/* public-base.bundle.css — generated by `php artisan assets:bundle`.
 * Edit the sources, not this file. Order is config/assets.php.
 */

/* ── tokens.css ── */
/*
 * UAEFMA Newsroom — design tokens.
 *
 * ONE palette, not two. Every token below aliases onto the existing
 * :root set in newsroom-v3-shell.css (--v3-*). The literal after each
 * comma is a fallback for contexts where that file is not loaded —
 * chiefly the admin, which loads admin.css / admin-light.css instead.
 * Changing a colour means changing it in newsroom-v3-shell.css; this
 * file only gives those colours role-based names.
 *
 * Contrast: every text token here is verified >= 4.5:1 (WCAG AA) against
 * the surface it is intended for. Ratios noted inline. Do not lighten
 * these without re-checking.
 */
:root {
    /* ---- Brand -------------------------------------------------------
       The site's established identity, NOT the UAE flag palette. The
       green is the existing institutional teal; introducing flag green
       (#00843D) here would create a second, competing green. */
    --brand-green: var(--v3-green, #0d6e63);
    --brand-ink: var(--v3-ink, #0b1f33);
    --brand-red: var(--admin-red, #b21e2b);
    --accent-gold: var(--v3-copper, #c59a3d);

    /* Gold is a 2.60:1 colour on white — fine for rules, borders and
       icons, but it fails AA as body text. Use this darker tone when
       gold has to carry actual words. 4.86:1 white / 4.55:1 sand. */
    --accent-gold-text: #8c6d1c;

    /* ---- Dark surfaces (public footer, topbar) ------------------------
       Not the admin sidebar: that is light-themed via admin-light.css. */
    --shell-bg: var(--v3-ink, #0b1f33);
    --shell-bg-2: #0e2647;
    --shell-text: #e6edf5;          /* 14.15:1 on shell-bg */
    --shell-text-muted: #9fb0c4;    /*  7.54:1 on shell-bg */
    --shell-hover: rgba(255, 255, 255, .06);
    --shell-active: var(--v3-green, #0d6e63);
    --shell-border: rgba(255, 255, 255, .10);

    /* ---- Light surfaces ---------------------------------------------- */
    --bg: var(--v3-sand, #faf7f2);
    --surface: var(--v3-paper, #fff);
    --surface-2: #faf8f3;
    --border: var(--v3-rule, #d7dfe4);
    --border-strong: #c3ced6;

    --text: var(--v3-ink, #0b1f33);          /* 15.7:1 on white */
    --text-secondary: var(--v3-muted, #5f6f7e); /* 5.17 white / 4.84 sand */
    --text-muted: #5d6a79;                   /* 5.52 white / 5.17 sand */

    /* ---- Semantic ----------------------------------------------------- */
    --up: #0e7a55;
    --down: #c02626;
    --neutral: var(--text-muted);

    /* ---- Scale -------------------------------------------------------- */
    --radius: 8px;
    --radius-card: 12px;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .06);
}

/* ── base.css ── */
/* ================================================================
   UAEFMA Newsroom — base.css  |  v2 Design System
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Variables — v2 Palette
   ---------------------------------------------------------------- */
:root {
    /* ── Core palette ── */
    --paper:       #FFFFFF;
    --band:        #F7F7F5;
    --ink:         #1A1A1A;
    --ink-soft:    #4A4A4A;
    /* was #8A8A8A — 3.45:1 on white, 3.23:1 on sand, under AA. This token
       (and --muted, which aliases it) carries ~72 declarations of card
       dates, bylines and captions, all on light grounds. 5.02 / 4.70. */
    --ink-faint:   #6F6F6F;
    --rule:        #E2E2E2;
    --rule-2:      #EFEFEF;
    --accent:      #B11226;
    --accent-deep: #8C0D1E;
    --up:          #0A7C3E;
    --up-light:    #22C55E;
    --down:        #C0392B;
    --down-light:  #EF4444;
    --navy:        #071A2D;
    --navy-2:      #0D2540;
    --navy-deep:   #03111F;

    /* ── Backward-compat aliases (deprecated — do not add new refs) ── */
    --deep-navy:  var(--navy-deep);
    --gold:       #C9A24A;
    --off-white:  var(--band);
    --white:      var(--paper);
    --text:       var(--ink);
    --muted:      var(--ink-faint);
    --border:     var(--rule);
    --red:        var(--accent);
    --green:      var(--up);

    /* ── Font stacks ── */
    --ar-head:  'Readex Pro', 'Noto Kufi Arabic', sans-serif;
    --ar-body:  'IBM Plex Sans Arabic', 'Readex Pro', sans-serif;
    --en-serif: 'Newsreader', Georgia, serif;
    --en-sans:  'Inter', Arial, sans-serif;

    /* ── Chrome dimensions ── */
    --topbar-h: 36px;
    --header-h: 104px;
    --nav-h:    44px;
    --radius:   2px;
}

/* ----------------------------------------------------------------
   Reset
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    font-size: 15px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    font-family: var(--en-sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.lang-ar {
    font-family: var(--ar-body);
    direction: rtl;
}
body.lang-en {
    font-family: var(--en-sans);
    direction: ltr;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ════════════════════════════════════════════════════════
   PHASE 22E — RTL / Arabic Polish
   ════════════════════════════════════════════════════════ */

/* Arabic body: increase line-height for readability */
body.lang-ar {
    line-height: 1.75;
    word-spacing: .04em;
}

/* Arabic article body font size bump */
body.lang-ar .np-art-body {
    font-size: 1.08rem;
    line-height: 1.9;
}

/* Ensure logical props work in RTL (inline-start = right, inline-end = left) */
body.lang-ar .np-art-kicker::before {
    margin-inline-end: .5em;
    margin-inline-start: 0;
}

/* Fix drop-cap float direction in Arabic */
body.lang-ar .np-art-body > p:first-child::first-letter {
    float: none;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Hero: ensure RTL text alignment */
body.lang-ar .hero-content,
body.lang-ar .hero-title,
body.lang-ar .hero-excerpt,
body.lang-ar .hero-meta { text-align: right; }

/* Nav / header RTL */
body.lang-ar .nav-list { flex-direction: row-reverse; }
body.lang-ar .hero-side { text-align: right; }

/* Cards: ensure RTL text wraps correctly */
body.lang-ar .np-rel-title,
body.lang-ar .np-sidebar-item-title,
body.lang-ar .fv-featured-title,
body.lang-ar .fv-stack-title,
body.lang-ar .pod-title { text-align: right; }

/* Category pill in cards: direction fix */
body.lang-ar .eg-cat { direction: rtl; }

/* Article header in Arabic */
body.lang-ar .np-art-header { text-align: right; }
body.lang-ar .np-art-byline { justify-content: flex-end; }

/* Editorial grid sections: RTL */
body.lang-ar .eg-section-hd,
body.lang-ar .media-section-hd,
body.lang-ar .fv-hd {
    flex-direction: row-reverse;
}

/* Most-read numbers: RTL side */
body.lang-ar .mr-item { flex-direction: row-reverse; }
body.lang-ar .mr-body { text-align: right; }

/* Newsletter */
body.lang-ar .hp-newsletter-inner { direction: rtl; }
body.lang-ar .hp-newsletter-sub,
body.lang-ar .hp-newsletter-title { text-align: right; }
body.lang-ar .hp-newsletter-perks { justify-content: flex-start; direction: rtl; }

/* Footer in RTL */
body.lang-ar .site-footer { text-align: right; }
body.lang-ar .footer-col ul { text-align: right; }

/* Breaking bar RTL */
body.lang-ar .bb-track { animation-direction: reverse; }

/* ════════════════════════════════════════════════════════════════
   PHASE 23 — GLOBAL TYPOGRAPHY + DENSITY
   ════════════════════════════════════════════════════════════════ */

/* Slightly tighter base line-height */
body { line-height: 1.55 !important; }

/* Headings: tighter globally */
h1, h2, h3, h4 {
    line-height: 1.18;
    letter-spacing: -.015em;
}

/* Skip-to-content link — accessibility */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: .5rem 1rem;
    background: var(--navy);
    color: #fff;
    font-size: .85rem;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
    transition: top .15s;
}
.skip-to-content:focus {
    top: 0;
}

/* Container: consistent max-width */
.container {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* ── layout.css ── */
/* ----------------------------------------------------------------
   Container
   ---------------------------------------------------------------- */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ================================================================
   SITE MAIN
   ================================================================ */
.site-main {
    min-height: 60vh;
}

/* ================================================================
   PAGE INTRO
   ================================================================ */
.page-intro {
    padding: 3rem 0 2.5rem;
    border-bottom: 1px solid var(--border);
}
.page-intro h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.6rem;
    line-height: 1.3;
}
.page-intro p {
    font-size: 0.92rem;
    color: var(--muted);
    max-width: 560px;
}
body.lang-ar .page-intro p { max-width: 560px; }

/* ================================================================
   SITE FOOTER
   ================================================================ */
.site-footer {
    background: var(--navy);
    color: rgba(255,255,255,.55);
    margin-top: 3rem;
    border-top: 2px solid var(--accent);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 2rem;
    padding: 2.5rem 0 2rem;
}
.footer-brand .footer-logo {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: .04em;
    display: block;
    margin-bottom: 0.5rem;
}
.footer-brand p {
    font-size: 0.75rem;
    color: rgba(255,255,255,.35);
    line-height: 1.5;
    max-width: 220px;
}
.footer-col h4 {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}
.footer-col ul li {
    margin-bottom: 0.45rem;
}
.footer-col ul li a {
    font-size: 0.78rem;
    color: rgba(255,255,255,.5);
    transition: color .15s;
}
.footer-col ul li a:hover { color: var(--white); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 0.85rem 0;
}
.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-bottom span {
    font-size: 0.72rem;
    color: rgba(255,255,255,.3);
}

/* ================================================================
   RESPONSIVE — footer/page-intro
   (header/nav/ticker responsive is in responsive.css)
   ================================================================ */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p { max-width: 100%; }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
    .page-intro { padding: 2rem 0 1.75rem; }
    .page-intro h1 { font-size: 1.3rem; }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ── header.css ── */
/* ================================================================
   TOPBAR  (Phase 25)
   Bloomberg-style financial strip. Desktop: fixed strip.
   Mobile: horizontally scrollable ticker.
   ================================================================ */
.topbar {
    background: var(--deep-navy);
    border-bottom: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
}
.topbar-inner {
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    gap: 0.75rem;
}

/* ── Scrollable ticker wrap ── */
.topbar-ticker-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}
.topbar-markets {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    white-space: nowrap;
}

/* ── Individual market item ── */
.mkt-item {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.72rem;
    flex-shrink: 0;
}
.mkt-label {
    color: rgba(255,255,255,.42);
    font-weight: 500;
    letter-spacing: .03em;
}
.mkt-val {
    color: rgba(255,255,255,.82);
    font-weight: 700;
    font-size: 0.73rem;
    font-variant-numeric: tabular-nums;
}
.mkt-chg {
    font-size: 0.67rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Change colours */
.mkt-up    { color: #22c55e; }
.mkt-down  { color: #ef4444; }
.mkt-neutral { color: rgba(255,255,255,.55); }

/* Separator between items */
.mkt-item + .mkt-item::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background: rgba(255,255,255,.12);
    margin-inline-end: 1.5rem;
    vertical-align: middle;
}

/* ── Right meta ── */
.topbar-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.topbar-date {
    font-size: 0.7rem;
    color: rgba(255,255,255,.38);
    white-space: nowrap;
    letter-spacing: .01em;
}
.topbar-sep {
    color: rgba(255,255,255,.15);
    font-size: 0.7rem;
    user-select: none;
}
.lang-btn {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    letter-spacing: .05em;
    padding: 0.12rem 0.45rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 2px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.lang-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.topbar-admin {
    font-size: 0.78rem;
    color: rgba(255,255,255,.28);
    padding: 0.1rem 0.3rem;
    transition: color .15s;
}
.topbar-admin:hover { color: rgba(255,255,255,.6); }

/* ================================================================
   SITE HEADER  (Phase 25 — 3-column premium layout)
   ================================================================ */
.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.6rem 0;
}
.hdr-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
    min-height: 68px;
}

/* ── Wings (Chairman / Association) ── */
.hdr-wing {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hdr-wing--start { align-items: flex-start; }
.hdr-wing--end   { align-items: flex-end;   }

/* RTL: start = right reading edge, end = left */
body.lang-ar .hdr-wing--start { align-items: flex-end;   }
body.lang-ar .hdr-wing--end   { align-items: flex-start; }

.hdr-wing-sup {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1;
}
.hdr-wing-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
    white-space: nowrap;
}
.hdr-wing-tagline {
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--muted);
    text-transform: none;
    letter-spacing: .01em;
}

/* ── Center Brand ── */
.hdr-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 0;
    padding: 0 0.5rem;
}
.hdr-brand:hover .hdr-logo-text { opacity: .85; }

.hdr-logo-text {
    font-family: var(--en-serif);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: .03em;
    line-height: 1;
    transition: opacity .15s;
}
.hdr-logo-img {
    max-height: 44px;
    width: auto;
    display: block;
}
.hdr-brand-divider {
    display: block;
    width: 36px;
    height: 1px;
    background: var(--rule);
    margin: 0.35rem auto;
}
.hdr-newsroom {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1;
}

/* ================================================================
   SITE NAV  (Phase 25 — clean gold underline style)
   ================================================================ */
.site-nav {
    background: var(--paper);
    height: var(--nav-h);
    position: relative;
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--nav-h);
    position: relative;
}
.nav-list {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 0;
}
.nav-list li a {
    display: flex;
    align-items: center;
    height: var(--nav-h);
    padding: 0 0.95rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: .01em;
    white-space: nowrap;
    transition: color .15s;
    border-bottom: 2px solid transparent;
    position: relative;
}
.nav-list li a:hover,
.nav-list li a.is-active {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

/* Search icon */
.nav-search {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    padding: 0.4rem;
    border-radius: var(--radius);
    transition: color .15s;
}
body.lang-ar .nav-search { left: 1.25rem; }
body.lang-en .nav-search { right: 1.25rem; }
.nav-search:hover { color: var(--accent); }

/* Hamburger (mobile — hidden by default) */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 0.45rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border-radius: var(--radius);
    transition: background .15s;
}
.nav-toggle:hover { background: rgba(0,0,0,.05); }
body.lang-ar .nav-toggle { right: 1.25rem; }
body.lang-en .nav-toggle { left: 1.25rem; }
.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink-soft);
    border-radius: 1px;
    transition: transform .2s, opacity .2s;
}

/* ── components.css ── */
/* ════════════════════════════════════════════════════════
   PHASE 13 — INDEX / LISTING PAGES
   ════════════════════════════════════════════════════════ */

.np-index-hd {
    background: var(--deep-navy);
    padding: 2.5rem 0 2rem;
    margin-bottom: 2rem;
}
.np-index-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .5rem;
}
.np-index-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 .5rem;
    line-height: 1.2;
}
.np-index-desc {
    font-size: .95rem;
    color: rgba(255,255,255,.65);
    margin: 0;
}

/* filters */
.np-index-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.75rem;
    align-items: center;
}
.np-filter-search {
    flex: 1 1 220px;
    padding: .55rem .9rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .9rem;
    background: #fff;
    color: var(--ink);
}
.np-filter-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.np-filter-select {
    padding: .55rem .9rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .9rem;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}
.np-filter-btn {
    padding: .55rem 1.2rem;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.np-filter-btn:hover { background: var(--accent-deep); }
.np-filter-reset {
    font-size: .85rem;
    color: var(--muted);
    text-decoration: none;
}
.np-filter-reset:hover { color: var(--accent); }

/* grid */
.np-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.np-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
    font-size: 1rem;
}

/* pagination */
.np-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 0 2rem;
}
.np-pagination a {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.np-pagination a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.np-pagination span { font-size: .88rem; color: var(--muted); }
.np-pagination span[aria-current] { font-weight: 700; color: var(--navy); }
.np-pagination span.disabled {
    padding: .45rem .9rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--border);
    font-size: .88rem;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════
   PHASE 13 — MEDIA PAGES (PODCASTS / VIDEOS)
   ════════════════════════════════════════════════════════ */

.np-media-hd {
    background: var(--deep-navy);
    padding: 2.5rem 0 2rem;
    margin-bottom: 2rem;
}
.np-media-page-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 .4rem;
}
.np-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.np-media-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s;
}
.np-media-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.np-media-thumb {
    position: relative;
    overflow: hidden;
    background: var(--deep-navy);
    aspect-ratio: 16/9;
}
.np-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.np-media-card:hover .np-media-thumb img { transform: scale(1.04); }
.np-media-thumb-blank {
    position: relative;
    background: var(--navy);
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.np-media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    background: rgba(0,0,0,.6);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s, border-color .2s;
    pointer-events: none;
}
.np-media-card:hover .np-media-play,
[data-youtube-id]:hover .np-media-play {
    background: var(--accent, #c8102e);
    border-color: rgba(255,255,255,.7);
    transform: translate(-50%, -50%) scale(1.1);
}
.np-media-play svg { filter: none; margin-left: 2px; }
[data-youtube-id].np-media-card { cursor: pointer; }
.np-media-body { padding: 1rem 1.1rem 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.np-media-ep {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}
.np-media-title {
    font-size: .97rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.35;
    margin: 0;
}
.np-media-desc {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.np-media-date {
    font-size: .75rem;
    color: var(--muted);
    margin-top: auto;
}

/* ════════════════════════════════════════════════════════
   PHASE 13 — STATIC PAGES (ABOUT, PRIVACY, TERMS etc.)
   ════════════════════════════════════════════════════════ */

.np-static-hd {
    background: var(--deep-navy);
    padding: 2.5rem 0 2rem;
    margin-bottom: 2.25rem;
}
.np-static-hd-kicker {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .5rem;
}
.np-static-hd-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 .35rem;
    line-height: 1.2;
}
.np-static-hd-sub {
    font-size: .9rem;
    color: rgba(255,255,255,.6);
    margin: 0;
}
.np-static-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 0 3rem;
    color: var(--ink);
    line-height: 1.75;
}
.np-static-body h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy);
    margin: 2rem 0 .6rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}
.np-static-body p { margin: 0 0 1rem; font-size: .95rem; }
.np-static-body a { color: var(--accent); text-decoration: none; }
.np-static-body a:hover { text-decoration: underline; }
.np-static-body ul { padding-inline-start: 1.4rem; margin: 0 0 1rem; }
.np-static-body li { margin-bottom: .4rem; font-size: .95rem; }

/* ════════════════════════════════════════════════════════
   PHASE 13 — FORMS (CONTACT, SUBMIT ARTICLE)
   ════════════════════════════════════════════════════════ */

.np-form-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 0 3rem;
}
.np-form-wrap > p {
    font-size: .95rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
    line-height: 1.65;
}
.np-form-row { margin-bottom: 1.2rem; }
.np-form-label {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: .35rem;
}
.np-form-input,
.np-form-textarea {
    width: 100%;
    padding: .6rem .85rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .93rem;
    color: var(--ink);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
}
.np-form-input:focus,
.np-form-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(177,18,38,.12);
}
.np-form-textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
.np-form-submit {
    display: inline-block;
    padding: .65rem 1.8rem;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    margin-top: .5rem;
}
.np-form-submit:hover { background: var(--accent-deep); }

/* Submit-Article contribution form: grouped sections, hints, rights
   checkboxes and the confirmation receipt (phase-30 D1). Reuses the existing
   np-form controls; adds only grouping and the pieces they lacked. */
.np-form-section { margin: 0 0 1.6rem; }
.np-form-section + .np-form-section { border-top: 1px solid var(--nf-rule, #e3e7ec); padding-top: 1.5rem; }
.np-form-section-title {
    font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--navy, #16233a); margin: 0 0 .3rem;
}
.np-form-section-sub { font-size: .82rem; color: #5f6f7e; margin: 0 0 1rem; line-height: 1.5; }
.np-form-hint { display: block; margin-top: .3rem; font-size: .74rem; color: #6c7782; line-height: 1.4; }
.np-form-check {
    display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .7rem;
    font-size: .84rem; line-height: 1.45; color: var(--text, #1f2733);
}
.np-form-check input[type="checkbox"] { margin-top: .2rem; width: 16px; height: 16px; flex: none; accent-color: var(--navy, #16233a); }
.np-form-receipt {
    background: #f5f9f7; border: 1px solid #bfe3d1; border-inline-start: 3px solid #0f8a5f;
    border-radius: 8px; padding: 1.1rem 1.25rem; margin-bottom: 1.4rem;
}
.np-form-receipt h2 { margin: 0 0 .35rem; font-size: 1.05rem; color: #0f5c40; }
.np-form-receipt .np-form-ref {
    display: inline-block; margin: .35rem 0; padding: .25rem .6rem; border-radius: 5px;
    background: #0f5c40; color: #fff; font-family: ui-monospace, Menlo, monospace;
    font-size: .9rem; font-weight: 700; letter-spacing: .04em;
}
.np-form-receipt p { margin: .3rem 0 0; font-size: .85rem; color: #37564a; line-height: 1.55; }
body.lang-ar .np-form-check { text-align: right; }
body.lang-ar .np-form-receipt { border-inline-start: 3px solid #0f8a5f; }

.np-form-success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 4px;
    color: #065f46;
    padding: .8rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.np-form-error {
    display: block;
    font-size: .78rem;
    color: #dc2626;
    margin-top: .25rem;
}

/* ════════════════════════════════════════════════════════
   PHASE 13 — ABOUT PAGE
   ════════════════════════════════════════════════════════ */

.np-about-intro {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--ink);
}
.np-about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 0 auto 2.5rem;
    max-width: 760px;
}
.np-stat {
    background: var(--deep-navy);
    border-radius: 6px;
    padding: 1.5rem 1rem;
    text-align: center;
}
.np-stat-num {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    margin-bottom: .3rem;
}
.np-stat-lbl {
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════
   PHASE 13 — ADVERTISE PAGE
   ════════════════════════════════════════════════════════ */

.np-ad-formats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2.5rem;
}
.np-ad-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.5rem 1.25rem;
    transition: box-shadow .2s;
}
.np-ad-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.np-ad-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 .5rem;
}
.np-ad-card p { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.55; }
.np-ad-cta {
    text-align: center;
    padding: 2rem 0 3rem;
}
.np-ad-cta p { font-size: 1rem; color: var(--ink); margin-bottom: 1rem; }
.np-ad-cta a {
    display: inline-block;
    padding: .7rem 2rem;
    background: var(--navy);
    color: #fff;
    border-radius: 4px;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.np-ad-cta a:hover { background: var(--accent); color: var(--deep-navy); }

/* ════════════════════════════════════════════════════════
   PHASE 13 — RTL ADJUSTMENTS
   ════════════════════════════════════════════════════════ */

body.lang-ar .np-index-filters { flex-direction: row-reverse; }
body.lang-ar .np-static-body { text-align: right; }
body.lang-ar .np-static-body h2 { display: block; }
body.lang-ar .np-static-body ul { padding-inline-start: 0; padding-inline-end: 1.4rem; }
body.lang-ar .np-form-label { text-align: right; }
body.lang-ar .np-about-intro { text-align: right; }
body.lang-ar .np-ad-card { text-align: right; }

/* ════════════════════════════════════════════════════════
   PHASE 13 — RESPONSIVE
   ════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .np-index-grid,
    .np-media-grid,
    .np-ad-formats { grid-template-columns: 1fr; }
    .np-about-stats { grid-template-columns: repeat(2, 1fr); }
    .np-index-filters { flex-direction: column; align-items: stretch; }
    .np-filter-search,
    .np-filter-select { width: 100%; }
}

/* ════════════════════════════════════════════════════════
   PHASE 22D — Contact Page & Form Improvements
   ════════════════════════════════════════════════════════ */

/* Contact info cards */
.ct-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
.ct-info-card {
    padding: 1.5rem 1.25rem;
    background: #faf9f6;
    border: 1px solid var(--border);
    border-radius: 4px;
    border-top: 3px solid var(--accent);
    text-align: center;
    transition: box-shadow .18s;
}
.ct-info-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.ct-info-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--deep-navy);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.85rem;
}
.ct-info-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.ct-info-val {
    font-size: 0.85rem;
    color: var(--navy);
    font-weight: 600;
    word-break: break-all;
}

/* Form grid (two columns for name/email) */
.np-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
}

/* Improved form inputs */
.np-form-input,
.np-form-textarea {
    padding: .7rem 1rem;
    font-size: .92rem;
    border-radius: 3px;
    font-family: inherit;
}
select.np-form-input { appearance: auto; }

/* Submit button with icon */
.np-form-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: .7rem 2rem;
    border-radius: 3px;
    font-size: .92rem;
}

/* Form success with icon */
.np-form-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: .85rem 1.1rem;
    border-radius: 3px;
    border-inline-start: 4px solid #059669;
    background: #ecfdf5;
    border-color: #6ee7b7;
}

/* RTL contact */
body.lang-ar .ct-info-row { direction: rtl; }
body.lang-ar .ct-info-card { text-align: right; }
body.lang-ar .ct-info-icon { margin: 0 0 .85rem auto; }

/* Responsive contact */
@media (max-width: 768px) {
    .ct-info-row { grid-template-columns: 1fr; }
    .np-form-grid { grid-template-columns: 1fr; }
}

/* ---- Reusable empty state (Phase A) ------------------------------------ */
.nf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .4rem;
    max-width: 34rem;
    margin: 2.5rem auto;
    padding: 3rem 1.5rem;
    color: var(--muted, #5c626b);
}
.nf-empty__icon { width: 42px; height: 42px; opacity: .45; margin-bottom: .4rem; }
.nf-empty__title {
    margin: 0;
    font-family: var(--en-serif, Georgia, serif);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink, #17191c);
}
.lang-ar .nf-empty__title { font-family: var(--ar-head, inherit); }
.nf-empty__msg { margin: 0; font-size: .95rem; line-height: 1.55; max-width: 30rem; }
.nf-empty__action {
    margin-top: .9rem;
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--accent, #c8102e);
    text-decoration: none;
    border: 1px solid currentColor;
    padding: .5rem 1.1rem;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease;
}
.nf-empty__action:hover,
.nf-empty__action:focus-visible { background: var(--accent, #c8102e); color: #fff; }

/* ---- Category directory grid (sections index) --------------------------- */
.np-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.np-cat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--border, #e4e4e4);
    border-top: 3px solid var(--accent, #c8102e);
    border-radius: 10px;
    text-decoration: none;
    background: var(--paper, #fff);
    transition: box-shadow .15s ease, transform .15s ease;
}
.np-cat-card:hover,
.np-cat-card:focus-visible {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.np-cat-card__name {
    margin: 0;
    font-family: var(--en-serif, Georgia, serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink, #1a1a1a);
}
.lang-ar .np-cat-card__name { font-family: var(--ar-head, inherit); }
.np-cat-card__count { font-size: 13px; color: var(--muted, #666); }

/* ── homepage.css ── */
/* ================================================================
   HERO — Static FT-Style  (v2 Design)
   ================================================================ */

.hero-ft {
    padding: 1.5rem 0 0;
    border-bottom: 1px solid var(--rule);
}

.hero-ft-grid {
    display: grid;
    grid-template-columns: 1.62fr 1fr;
    gap: 0;
    border: 1px solid var(--rule);
}

/* ── Lead story (left) ── */
.hero-lead {
    display: flex;
    flex-direction: column;
    border-inline-end: 1px solid var(--rule);
}

.hero-lead-img {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    background: var(--band);
}
.hero-lead-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.hero-lead:hover .hero-lead-img img { transform: scale(1.03); }

.hero-lead-body {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hero-lead-cat {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.55rem;
    text-decoration: none;
}
.hero-lead-cat:hover { text-decoration: underline; }

.hero-lead-title {
    font-family: var(--en-serif);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 0.65rem;
}
body.lang-ar .hero-lead-title { font-family: var(--ar-head); font-weight: 600; }

.hero-lead-title a { color: inherit; text-decoration: none; }
.hero-lead-title a:hover { color: var(--accent); }

.hero-lead-excerpt {
    font-size: 0.875rem;
    color: var(--ink-soft);
    line-height: 1.65;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.hero-lead-meta {
    display: block;
    font-size: 0.7rem;
    color: var(--ink-faint);
    margin-top: auto;
    font-variant-numeric: tabular-nums;
}

/* ── Side stack (right) ── */
.hero-stack {
    display: flex;
    flex-direction: column;
}

.hero-stack-item {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    transition: background .15s;
    min-height: 0;
}
.hero-stack-item:last-child { border-bottom: none; }
.hero-stack-item:hover { background: var(--band); }

.hero-stack-thumb {
    flex-shrink: 0;
    width: 92px;
    height: 70px;
    overflow: hidden;
    background: var(--rule-2);
}
.hero-stack-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.hero-stack-item:hover .hero-stack-thumb img { transform: scale(1.05); }

.hero-stack-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hero-stack-cat {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

.hero-stack-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.lang-ar .hero-stack-title { font-family: var(--ar-head); }

/* ── Hero responsive ── */
@media (max-width: 1024px) {
    .hero-ft-grid { grid-template-columns: 3fr 2fr; }
    .hero-lead-title { font-size: 1.45rem; }
}

@media (max-width: 768px) {
    .hero-ft-grid { grid-template-columns: 1fr; }
    .hero-lead { border-inline-end: none; border-bottom: 1px solid var(--rule); }
    .hero-stack { flex-direction: row; overflow-x: auto; }
    .hero-stack-item { flex: 0 0 220px; border-bottom: none; border-inline-end: 1px solid var(--rule); flex-direction: column; }
    .hero-stack-item:last-child { border-inline-end: none; }
    .hero-stack-thumb { width: 100%; height: 120px; }
    .hero-lead-title { font-size: 1.25rem; }
}

@media (max-width: 480px) {
    .hero-ft { padding-top: 1rem; }
    .hero-lead-body { padding: 1rem; }
    .hero-lead-title { font-size: 1.1rem; }
    .hero-lead-excerpt { -webkit-line-clamp: 2; }
    .hero-stack-item { flex: 0 0 175px; }
}

/* ================================================================
   EDITORIAL GRID  (Phase 3)
   ================================================================ */

/* ── Section shell ── */
.eg-section {
    padding: 2rem 0;
    border-top: 1px solid var(--border);
}

/* ── Section header ── */
.eg-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.6rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.eg-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
    padding-inline-start: 0.6rem;
    border-inline-start: 3px solid var(--accent);
}
.eg-more {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}
.eg-more:hover { color: var(--navy); }

/* ── Shared card ── */
.eg-card { display: flex; flex-direction: column; }

.eg-card-img {
    display: block;
    overflow: hidden;
    background: #e8e5e0;
    flex-shrink: 0;
    position: relative;
}
.eg-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.eg-card:hover .eg-card-img img { transform: scale(1.04); }

/* Semantic size modifiers — replaces inline style="height:Xpx" */
.eg-card-img--featured { height: 280px; }
.eg-card-img--grid     { height: 120px; }
.eg-card-img--row      { aspect-ratio: 16/9; height: auto; }

.eg-card-body {
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.eg-cat {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.3rem;
}
.eg-card-title {
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.eg-card-title a { color: inherit; text-decoration: none; }
.eg-card-title a:hover { color: var(--accent); }

/* Title size variants */
.eg-title-lg { font-size: 1.2rem; -webkit-line-clamp: 4; }
.eg-title-md { font-size: 0.88rem; -webkit-line-clamp: 3; }
.eg-title-sm { font-size: 0.8rem;  -webkit-line-clamp: 3; }

.eg-card-excerpt {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.55;
    flex: 1;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.eg-card-date {
    font-size: 0.66rem;
    color: var(--muted);
    display: block;
    margin-top: auto;
    padding-top: 0.3rem;
}

/* ── Featured card override (large) ── */
.eg-feature-body,
.eg-feature-lg .eg-card-body {
    border-top: 3px solid var(--accent);
    padding-top: 0.75rem;
}

/* ── Section 1: Financial Markets 60/40 ── */
.eg-fm-layout {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 1.5rem;
    align-items: start;
}
.eg-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.eg-grid-2x2 .eg-card-body { border-top-width: 1px; }

/* ── Section 2: Banking row of 4 ── */
.eg-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* ── Section 3: Macro Economy 58/42 ── */
.eg-macro-layout {
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: 1.5rem;
    align-items: start;
}
.eg-stack-2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Horizontal card (image + text side by side) */
.eg-card-horiz {
    flex-direction: row;
    gap: 0.75rem;
    align-items: flex-start;
}
.eg-thumb {
    width: 96px !important;
    height: 72px !important;
    flex-shrink: 0;
}
.eg-card-horiz .eg-card-body {
    border-top: none;
    padding-top: 0;
}

/* ── Section 4: FinTech 3 equal cols ── */
.eg-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .eg-fm-layout      { grid-template-columns: 1fr 1fr; }
    .eg-title-lg       { font-size: 1.05rem; }
    .eg-row-4          { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .eg-section        { padding: 1.5rem 0; }
    .eg-fm-layout      { grid-template-columns: 1fr; }
    .eg-grid-2x2       { grid-template-columns: repeat(2, 1fr); }
    .eg-macro-layout   { grid-template-columns: 1fr; }
    .eg-card-horiz     { flex-direction: column; }
    .eg-thumb          { width: 100% !important; height: 140px !important; }
    .eg-card-horiz .eg-card-body { border-top: 1px solid var(--border); padding-top: 0.6rem; }
    .eg-row-3          { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .eg-row-4          { grid-template-columns: 1fr; }
    .eg-grid-2x2       { grid-template-columns: 1fr; }
    .eg-row-3          { grid-template-columns: 1fr; }
}

/* ================================================================
   PHASE 4 — VISUAL POWER UPGRADE
   ================================================================ */

/* ── 1. Featured image: taller + dark-bottom overlay ── */
.eg-card-img { position: relative; }

.eg-feature    .eg-card-img { height: 320px !important; }
.eg-feature-lg .eg-card-img { height: 300px !important; }

.eg-feature    .eg-card-img::after,
.eg-feature-lg .eg-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7,26,45,.22) 0%, transparent 55%);
    pointer-events: none;
}

/* Stronger gold accent on featured body */
.eg-feature-body,
.eg-feature-lg .eg-card-body {
    border-top-width: 3px;
    padding-top: 0.85rem;
}

/* ── 2. Section background distinction ── */
.editorial-grid > .eg-section:nth-child(2) { background: #faf9f6; } /* Banking  */
.editorial-grid > .eg-section:nth-child(3) { background: #f5f5f4; } /* Macro    */
.editorial-grid > .eg-section:nth-child(4) { background: #f0f4f8; } /* FinTech  */

/* Cards in tinted sections pop with white bg */
.editorial-grid > .eg-section:nth-child(n+2) .eg-row-4 .eg-card,
.editorial-grid > .eg-section:nth-child(n+2) .eg-row-3 .eg-card {
    background: var(--white);
}
.editorial-grid > .eg-section:nth-child(n+2) .eg-row-4 .eg-card-body,
.editorial-grid > .eg-section:nth-child(n+2) .eg-row-3 .eg-card-body {
    padding: 0.55rem 0.65rem 0.7rem;
    border-top: 1px solid var(--border);
}
.editorial-grid > .eg-section:nth-child(3) .eg-card-horiz {
    background: var(--white);
    padding: 0.55rem;
    border-radius: 2px;
}
.editorial-grid > .eg-section:nth-child(3) .eg-card-horiz .eg-card-body {
    border-top: none;
    padding-top: 0;
}

/* ── 3. Hover interactions ── */
.eg-card                 { transition: transform .15s, box-shadow .2s; }
.eg-card:hover .eg-card-img img { transform: scale(1.05); }
.eg-card:hover .eg-card-title a { color: var(--navy); }

.eg-row-4    .eg-card:hover,
.eg-row-3    .eg-card:hover,
.eg-grid-2x2 .eg-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0,0,0,0.09);
}
.eg-feature:hover,
.eg-feature-lg:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}

/* ── 4. Typography upgrade ── */
.eg-title-lg {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.025em;
    -webkit-line-clamp: 4;
}
.eg-title-md {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}
.eg-title-sm {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.32;
}
.eg-cat      { font-size: 0.58rem; letter-spacing: .12em; }
.eg-card-date { font-size: 0.62rem; color: var(--text-secondary, #5f6f7e); }

/* ── 5. Subtle default shadow on grid/row cards ── */
.eg-row-4    .eg-card,
.eg-row-3    .eg-card,
.eg-grid-2x2 .eg-card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ── 6. Consistent aspect ratios (overrides inline height) ── */
.eg-grid-2x2 .eg-card-img { aspect-ratio: 4 / 3;  height: auto !important; }
.eg-row-4    .eg-card-img { aspect-ratio: 16 / 9; height: auto !important; }
.eg-row-3    .eg-card-img { aspect-ratio: 16 / 9; height: auto !important; }

/* ── 7. Tighter density ── */
.eg-section      { padding: 1.75rem 0; }
.eg-section-hd   { margin-bottom: 1rem; }
.eg-fm-layout    { gap: 1.25rem; }
.eg-macro-layout { gap: 1.25rem; }
.eg-grid-2x2     { gap: 0.85rem; }
.eg-row-4        { gap: 0.85rem; }
.eg-row-3        { gap: 1rem; }
.eg-stack-2      { gap: 0.85rem; }
.eg-card-body    { padding-top: 0.5rem; }

/* ── Phase 4 responsive adjustments ── */
@media (max-width: 1024px) {
    .eg-feature    .eg-card-img { height: 240px !important; }
    .eg-feature-lg .eg-card-img { height: 220px !important; }
    .eg-title-lg { font-size: 1.1rem; }
}
@media (max-width: 768px) {
    .eg-feature    .eg-card-img { height: 200px !important; }
    .eg-feature-lg .eg-card-img { height: 190px !important; }
    .eg-grid-2x2 .eg-card-img { aspect-ratio: 16 / 9; }
    .eg-row-4 .eg-card:hover,
    .eg-row-3 .eg-card:hover { transform: none; }
}

/* ================================================================
   PHASE 5 — AUTHORITY LAYER
   ================================================================ */

/* ── BREAKING BAR ─────────────────────────────────────────────── */
.breaking-bar {
    display: flex;
    align-items: stretch;
    height: 34px;
    overflow: hidden;
    background: var(--red);
    border-bottom: 1px solid rgba(0,0,0,.15);
}

.brk-label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    background: rgba(0,0,0,.22);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: rgba(255,255,255,.95);
    text-transform: uppercase;
    white-space: nowrap;
    border-inline-end: 1px solid rgba(255,255,255,.15);
}

.brk-wrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.brk-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    direction: ltr;
    animation: brk-scroll 40s linear infinite;
}
.brk-wrap:hover .brk-track { animation-play-state: paused; }

.brk-item {
    font-size: 0.76rem;
    font-weight: 500;
    color: rgba(255,255,255,.92);
    padding: 0 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
a.brk-item:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.brk-sep {
    font-size: 0.4rem;
    color: rgba(255,255,255,.35);
    flex-shrink: 0;
}

@keyframes brk-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── TOP STORIES — Editorial Digest ───────────────────────────── */
.top-stories {
    padding: 1.75rem 0;
    border-top: 1px solid var(--border);
    background: var(--white);
}

/* 3-column digest grid */
.ts-digest {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 0;
}

.ts-col {
    padding: 0 1.25rem;
    border-inline-end: 1px solid var(--border);
}
.ts-col:first-child { padding-inline-start: 0; }
.ts-col:last-child  { border-inline-end: none; padding-inline-end: 0; }

.ts-col--center { padding: 0 1.5rem; }

/* Compact text row */
.ts-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.ts-row:last-child { border-bottom: none; }

.ts-cat { margin-bottom: 0.25rem; }

.ts-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.3rem;
}
.ts-title a { color: inherit; text-decoration: none; }
.ts-title a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Center featured card */
.ts-featured {
    margin-bottom: 0.5rem;
}

.ts-feat-img {
    display: block;
    overflow: hidden;
    border-radius: 3px;
    margin-bottom: 0.6rem;
    aspect-ratio: 16 / 9;
}

.ts-feat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.ts-feat-img:hover img { transform: scale(1.03); }

.ts-feat-body {}

.ts-feat-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.3rem 0;
}
.ts-feat-title a { color: inherit; text-decoration: none; }
.ts-feat-title a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

.ts-row--center-sub {
    border-top: 1px solid var(--border);
    border-bottom: none;
    padding: 0.65rem 0;
}

/* ── MOST READ ────────────────────────────────────────────────── */
.most-read {
    background: var(--off-white);
    border-top: 2px solid var(--navy);
    border-bottom: 1px solid var(--border);
    padding: 1.75rem 0;
    margin-top: 0;
}

.mr-hd {
    display: flex;
    align-items: center;
    padding-bottom: 0.6rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.mr-hd-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
    padding-inline-start: 0.6rem;
    border-inline-start: 3px solid var(--accent);
}

.mr-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.mr-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0 1.25rem;
    border-inline-end: 1px solid var(--border);
}
.mr-item:first-child { padding-inline-start: 0; }
.mr-item:last-child  { border-inline-end: none; padding-inline-end: 0; }

.mr-num {
    font-family: 'Inter', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--navy);
    opacity: .12;
    flex-shrink: 0;
    letter-spacing: -.04em;
    margin-top: .05rem;
}

.mr-body { flex: 1; min-width: 0; }

.mr-title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.25rem;
}
.mr-title a { color: inherit; text-decoration: none; }
.mr-title a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* ── Phase 5 Responsive ── */
@media (max-width: 1024px) {
    .mr-list { grid-template-columns: repeat(3, 1fr); }
    .mr-item:nth-child(3) { border-inline-end: none; padding-inline-end: 0; }
    .mr-item:nth-child(4) { padding-inline-start: 0; }
}

@media (max-width: 992px) {
    .ts-digest { grid-template-columns: 1fr 1.3fr; }
    .ts-col--side:last-child { display: none; }
}

@media (max-width: 768px) {
    .brk-label { padding: 0 0.65rem; font-size: 0.55rem; }
    .brk-item  { font-size: 0.72rem; padding: 0 0.75rem; }

    .ts-digest { grid-template-columns: 1fr; }
    .ts-col--side:last-child { display: block; }
    .ts-col  { padding: 0; border-inline-end: none; border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1rem; }
    .ts-col:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
    .ts-col--center { padding: 0; }

    .mr-list { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .mr-item  { padding: 0; border-inline-end: none; }
    .mr-num   { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    .mr-list { grid-template-columns: 1fr; }
}

/* ================================================================
   PHASE 6 — HERO DOMINATION
   ================================================================ */

/* ── 1. Full bleed 70vh ── */
.hero-slider {
    height: 70vh;
    min-height: 460px;
    max-height: 700px;
}

/* ── 2. Image: transition for hover zoom ── */
.hero-img img {
    transition: transform 0.9s ease;
}
.hero-slider:hover .hero-slide.is-active .hero-img img {
    transform: scale(1.03);
}

/* ── 3. Dual gradient overlay: dark top + heavy bottom ── */
.hero-overlay {
    background:
        linear-gradient(to bottom, rgba(3,17,31,.62) 0%, transparent 30%),
        linear-gradient(to top, rgba(3,17,31,.98) 0%, rgba(3,17,31,.68) 28%, rgba(3,17,31,.18) 65%, transparent 100%);
    transition: opacity .4s;
}
.hero-slider:hover .hero-slide.is-active .hero-overlay {
    opacity: .9;
}

/* ── 4. Badge: absolute top-inline-start of image ── */
.hero-badge {
    position: absolute;
    top: 1.35rem;
    inset-inline-start: 1.75rem;
    z-index: 3;
    margin-bottom: 0;
    font-size: 0.62rem;
    letter-spacing: .1em;
    padding: 0.2rem 0.6rem;
}

/* ── 5. Content: bottom padding only (badge no longer in flow) ── */
.hero-content {
    padding: 0 2rem 2.25rem;
}

/* ── 6. Title domination ── */
.hero-title {
    font-size: clamp(1.65rem, 2.8vw, 2.2rem);
    font-weight: 800;
    line-height: 1.17;
    letter-spacing: -.03em;
    -webkit-line-clamp: 2;
    max-width: 620px;
    margin-bottom: 0.65rem;
}
.hero-title a {
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hero-title a:hover { opacity: .9; }

/* ── 7. Excerpt: softer, 2-line clamp ── */
.hero-excerpt {
    font-size: 0.88rem;
    color: rgba(255,255,255,.72);
    -webkit-line-clamp: 2;
    max-width: 510px;
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

/* ── 8. Meta: subtler ── */
.hero-meta {
    font-size: 0.7rem;
    color: rgba(255,255,255,.45);
    gap: 0.35rem;
}

/* ── 9. Side panel: vertical list upgrade ── */
.hero-side {
    border-inline-start: 1px solid rgba(255,255,255,.08);
}
.side-item {
    padding: 0.95rem 1.1rem;
    gap: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    transition: background .18s;
}
.side-item:hover { background: rgba(255,255,255,.05); }

.side-img {
    width: 82px;
    height: 60px;
    border-radius: 2px;
    flex-shrink: 0;
}
.side-img img { border-radius: 2px; }

.side-badge { font-size: 0.59rem; letter-spacing: .1em; margin-bottom: 0.28rem; }

.side-title {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.38;
    -webkit-line-clamp: 3;
    color: rgba(255,255,255,.86);
}

/* ── 10. Arrows: minimal ghost style ── */
.hero-arrow {
    width: 32px;
    height: 32px;
    background: rgba(3,17,31,.5);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
}
.hero-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}
.hero-prev { left: 1rem; }
.hero-next { left: calc(70% - 3.2rem); }

/* ── 11. Dots: refined pill style ── */
.hero-dots { gap: 0.35rem; bottom: 1.25rem; }

.hero-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transition: background .25s, width .3s, border-radius .3s;
}
.hero-dot.is-active {
    width: 22px;
    height: 5px;
    border-radius: 2px;
    background: var(--accent);
}

/* ── Phase 6 Responsive ── */
@media (max-width: 1024px) {
    .hero-slider  { height: 58vh; min-height: 380px; }
    .hero-title   { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
    .hero-content { padding: 0 1.5rem 1.75rem; }
    .hero-badge   { top: 1rem; inset-inline-start: 1.25rem; }
    .hero-next    { left: calc(70% - 2.9rem); }
}

@media (max-width: 768px) {
    .hero-slider  { height: 50vh; min-height: 280px; max-height: 380px; }
    .hero-title   { font-size: 1.2rem; letter-spacing: -.015em; }
    .hero-excerpt { display: none; }
    .hero-badge   { top: 0.75rem; inset-inline-start: 1rem; }
    .hero-content { padding: 0 1rem 1.25rem; }
    .hero-prev    { left: 0.6rem; }
    .hero-next    { left: auto; right: 0.6rem; }
    .hero-dots    { left: 50%; bottom: 0.85rem; }
}

/* ══════════════════════════════════════════════════════
   PHASE 7 — HERO EDITORIAL DOMINANCE
   ══════════════════════════════════════════════════════ */

/* ── Kicker line ── */
.hero-kicker {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    border-inline-start: 2px solid var(--accent);
    padding-inline-start: 0.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.95;
}

/* ── Primary slide (index 0): full editorial weight ── */
.hero-slide[data-index="0"].is-active .hero-title {
    font-size: clamp(2.1rem, 3.8vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.18;
}

.hero-slide[data-index="0"].is-active .hero-kicker {
    color: var(--accent);
    border-color: var(--accent);
}

.hero-slide[data-index="0"].is-active .hero-overlay {
    background: linear-gradient(
        to top,
        rgba(3,17,31,0.92) 0%,
        rgba(3,17,31,0.55) 45%,
        rgba(3,17,31,0.18) 72%,
        transparent 100%
    );
}

/* ── Secondary slides (index 1–4): subdued ── */
.hero-slide:not([data-index="0"]) .hero-excerpt {
    display: none;
}

.hero-slide:not([data-index="0"]).is-active .hero-title {
    font-size: clamp(1.75rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero-slide:not([data-index="0"]) .hero-kicker {
    color: rgba(255,255,255,0.65);
    border-color: rgba(255,255,255,0.35);
}

/* ── Side panel: tighter, sharper ── */
.hero-side .side-item {
    padding: 0.6rem 0.75rem;
    gap: 0.6rem;
}

.hero-side .side-item:hover {
    background: rgba(177,18,38,.12);
}

.hero-side .side-title {
    font-size: 0.78rem;
    line-height: 1.35;
}

.hero-side .side-badge {
    font-size: 0.58rem;
    letter-spacing: .08em;
    margin-bottom: 0.2rem;
}

/* ── Phase 7 Responsive ── */
@media (max-width: 768px) {
    .hero-kicker { font-size: 0.6rem; margin-bottom: 0.35rem; }
}

/* ══════════════════════════════════════════════════════
   PHASE 8 — HERO VISUAL IMPACT
   ══════════════════════════════════════════════════════ */

/* ── 1. Depth / float shadow under entire hero ── */
.hero-slider {
    box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.25);
}

/* ── 2. Vignette: radial darkness at image edges ── */
.hero-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 38% 48%, transparent 32%, rgba(3,17,31,.55) 100%);
    pointer-events: none;
}

/* ── 3. Stronger overlay gradient (replaces Phase 6 dual) ── */
.hero-overlay {
    background:
        linear-gradient(to bottom, rgba(3,17,31,.78) 0%, transparent 24%),
        linear-gradient(to top,
            rgba(3,17,31,1.0)  0%,
            rgba(3,17,31,.84) 24%,
            rgba(3,17,31,.32) 54%,
            transparent       100%
        );
}

/* ── 4. Headline shock — primary slide ── */
.hero-slide[data-index="0"].is-active .hero-title {
    font-size: clamp(2.5rem, 4.4vw, 3.1rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.09;
}

/* ── 5. Deep text shadow / glow on all hero titles ── */
.hero-title a {
    text-shadow:
        0 2px 18px rgba(0,0,0,.78),
        0 1px 4px  rgba(0,0,0,.60),
        0 6px 44px rgba(0,0,0,.32);
}

/* ── 6. Hover: zoom 1.05 + darker overlay (override Phase 6 .9) ── */
.hero-slider:hover .hero-slide.is-active .hero-img img {
    transform: scale(1.05);
}
.hero-slider:hover .hero-slide.is-active .hero-overlay {
    opacity: 1;
    background:
        linear-gradient(to bottom, rgba(3,17,31,.86) 0%, transparent 24%),
        linear-gradient(to top,
            rgba(3,17,31,1.0)  0%,
            rgba(3,17,31,.94) 24%,
            rgba(3,17,31,.50) 54%,
            rgba(3,17,31,.12) 100%
        );
}

/* ── 7. Side panel — dark glass separation ── */
.hero-side {
    background: rgba(3,17,31,.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-inline-start: 1px solid rgba(255,255,255,.07);
}

/* ── 8. Reduce noise: hide meta on secondary slides ── */
.hero-slide:not([data-index="0"]) .hero-meta {
    display: none;
}

/* ── 9. Kicker glow on primary slide ── */
.hero-slide[data-index="0"].is-active .hero-kicker {
    text-shadow: 0 0 20px rgba(177,18,38,.45);
    letter-spacing: .15em;
}

/* ── Phase 8 Responsive ── */
@media (max-width: 1024px) {
    .hero-slide[data-index="0"].is-active .hero-title {
        font-size: clamp(1.9rem, 3.5vw, 2.4rem);
    }
}
@media (max-width: 768px) {
    .hero-side {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ══════════════════════════════════════════════════════
   PHASE 9 — POST-HERO POWER FLOW
   ══════════════════════════════════════════════════════ */

/* ── 1. Section headers — stronger, authority ── */
.eg-section-hd {
    padding-bottom: 0.75rem;
    margin-bottom: 1.4rem;
    border-bottom: 2px solid rgba(177,18,38,.28);
}
.mr-hd {
    padding-bottom: 0.75rem;
    margin-bottom: 1.4rem;
    border-bottom: 2px solid rgba(177,18,38,.28);
}
.eg-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--deep-navy);
    border-inline-start-width: 4px;
    padding-inline-start: 0.7rem;
}
.mr-hd-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--deep-navy);
    border-inline-start-width: 4px;
    padding-inline-start: 0.7rem;
}

/* ── 2. Top Stories — clarity + rhythm ── */
.ts-col {
    border-inline-end-color: rgba(7,26,45,.1);
}
.ts-title a:hover {
    color: var(--accent);
    text-decoration: none;
}

/* ── 3. Editorial grid — taller features, better rhythm ── */
.eg-feature    .eg-card-img { height: 360px !important; }
.eg-feature-lg .eg-card-img { height: 340px !important; }

.eg-section      { padding: 2.1rem 0; }
.eg-fm-layout    { gap: 1.4rem; }
.eg-macro-layout { gap: 1.4rem; }
.eg-grid-2x2     { gap: 1.1rem; }
.eg-row-4        { gap: 1.1rem; }
.eg-row-3        { gap: 1.15rem; }
.eg-card-body    { padding-top: 0.65rem; }

/* Card lift: stronger hover elevation */
.eg-row-4    .eg-card:hover,
.eg-row-3    .eg-card:hover,
.eg-grid-2x2 .eg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(0,0,0,.11);
}

/* Title hover: gold accent */
.eg-card-title a:hover { color: var(--accent); }

/* Card base: consistent radius + shadow */
.eg-row-4    .eg-card,
.eg-row-3    .eg-card,
.eg-grid-2x2 .eg-card {
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 2px 7px rgba(0,0,0,.07);
}

/* ── 4. Most Read — contrast + impact ── */
.most-read {
    border-top: 3px solid var(--accent);
    padding: 2.1rem 0;
}
.mr-num {
    color: var(--accent);
    opacity: .22;
    font-size: 2.2rem;
}
.mr-title {
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.mr-title a:hover { color: var(--accent); }
.mr-item { gap: 0.85rem; }

/* ── 5. Section background rhythm ── */
.editorial-grid > .eg-section:nth-child(1) { background: var(--white); }
.editorial-grid > .eg-section:nth-child(2) { background: #f9f8f5; }
.editorial-grid > .eg-section:nth-child(3) { background: #f4f4f2; }
.editorial-grid > .eg-section:nth-child(4) { background: #eef3f8; }

/* ── Phase 9 Responsive ── */
@media (max-width: 1024px) {
    .eg-feature    .eg-card-img { height: 270px !important; }
    .eg-feature-lg .eg-card-img { height: 250px !important; }
    .top-stories { padding: 1.75rem 0; }
    .most-read   { padding: 1.75rem 0; }
}
@media (max-width: 768px) {
    .eg-feature    .eg-card-img { height: 220px !important; }
    .eg-feature-lg .eg-card-img { height: 205px !important; }
    .top-stories { padding: 1.25rem 0; }
    .most-read   { padding: 1.25rem 0; }
    .mr-num      { font-size: 1.6rem; }
}

/* ── Phase 14: hero compact on desktop ── */
.hero-slider {
    height: 55vh;
    min-height: 400px;
    max-height: 560px;
}

/* ── Phase 14: tighter vertical rhythm ── */
.editorial-grid > .eg-section { padding: 1.75rem 0; }
.top-stories { padding: 1.75rem 0; }
.most-read   { padding: 1.75rem 0; }

/* ── Phase 14 responsive: hero ── */
@media (max-width: 1024px) {
    .hero-slider { height: 50vh; min-height: 360px; max-height: 480px; }
}
@media (max-width: 768px) {
    .hero-slider { height: 44vh; min-height: 260px; max-height: 360px; }
}

/* ════════════════════════════════════════════════════════
   PHASE 22B + 22D — Homepage Newsletter + Density polish
   ════════════════════════════════════════════════════════ */

/* ── Newsletter section ── */
.hp-newsletter {
    background: var(--deep-navy);
    padding: 3rem 0;
    border-top: 1px solid rgba(177,18,38,.12);
    border-bottom: 1px solid rgba(177,18,38,.12);
}
.hp-newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.hp-newsletter-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(177,18,38,.35);
    padding: 0.2rem 0.65rem;
    border-radius: 2px;
    margin-bottom: 0.75rem;
}
.hp-newsletter-title {
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.22;
    margin: 0 0 0.6rem;
    letter-spacing: -.02em;
}
.hp-newsletter-sub {
    font-size: 0.88rem;
    color: rgba(255,255,255,.55);
    margin: 0;
    line-height: 1.6;
    max-width: 420px;
}
.hp-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.hp-newsletter-input-row {
    display: flex;
    gap: 0.55rem;
}
.hp-newsletter-input {
    flex: 1;
    padding: 0.75rem 1.1rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--white);
    font-size: 0.9rem;
    border-radius: 3px;
    outline: none;
    transition: border-color .18s;
    font-family: inherit;
}
.hp-newsletter-input::placeholder { color: rgba(255,255,255,.3); }
.hp-newsletter-input:focus { border-color: rgba(177,18,38,.5); background: rgba(255,255,255,.1); }
.hp-newsletter-btn {
    padding: 0.75rem 1.6rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .18s, transform .15s;
    letter-spacing: .02em;
}
.hp-newsletter-btn:hover { opacity: .9; transform: translateY(-1px); }
.hp-newsletter-note {
    font-size: 0.7rem;
    color: rgba(255,255,255,.3);
}
.hp-newsletter-note a { color: rgba(177,18,38,.6); text-decoration: none; }
.hp-newsletter-note a:hover { color: var(--accent); }
.hp-newsletter-perks {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.hp-newsletter-perk {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,.5);
}
.hp-newsletter-perk svg { color: var(--accent); flex-shrink: 0; }
@media (max-width: 768px) {
    .hp-newsletter-inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .hp-newsletter-input-row { flex-direction: column; }
    .hp-newsletter-btn { width: 100%; text-align: center; }
}

/* ── Category section density: tighter headings ── */
.eg-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid rgba(177,18,38,.2);
    gap: 1rem;
}
.eg-section-title {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--deep-navy);
    padding-inline-start: 0.65rem;
    border-inline-start: 4px solid var(--accent);
    line-height: 1.2;
}
.eg-section-more {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: .85;
    transition: opacity .15s;
}
.eg-section-more:hover { opacity: 1; }

/* ── Homepage density: tighter section gaps ── */
.media-section { padding: 2rem 0; }
.media-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid rgba(177,18,38,.2);
}
.media-section-title {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--deep-navy);
    padding-inline-start: 0.65rem;
    border-inline-start: 4px solid var(--accent);
}
.media-section-more {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    opacity: .85;
    transition: opacity .15s;
}
.media-section-more:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   PHASE 23 — FINAL VISUAL DOMINANCE
   Bloomberg / FT elite newsroom feel
   ════════════════════════════════════════════════════════════════ */

/* ── 1. HERO: taller, bigger typography, Ken Burns zoom ── */
.hero-slider {
    height: 520px !important;
    min-height: 460px !important;
    max-height: 600px !important;
}

@keyframes heroKenBurns {
    from { transform: scale(1);    }
    to   { transform: scale(1.07); }
}
.hero-slide.is-active .hero-img img {
    animation: heroKenBurns 9s ease-out forwards;
}

/* Hero title: bigger, tighter, heavier */
.hero-title {
    font-size: clamp(1.65rem, 2.8vw, 2.3rem) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -.028em !important;
    margin-bottom: 0.7rem !important;
    max-width: 640px !important;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.55rem;
}
.hero-kicker::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 2px;
    background: var(--accent);
}
.hero-excerpt {
    font-size: 0.88rem !important;
    -webkit-line-clamp: 3 !important;
    max-width: 580px !important;
    color: rgba(255,255,255,.75) !important;
}
/* Deeper overlay — text always readable */
.hero-overlay {
    background: linear-gradient(
        to top,
        rgba(3,17,31,.98) 0%,
        rgba(3,17,31,.72) 35%,
        rgba(3,17,31,.22) 65%,
        transparent 100%
    ) !important;
}
.hero-content { padding: 2rem 2.25rem !important; }

/* Side panel upgrade */
.side-item {
    padding: 0.75rem 1rem !important;
}
.side-img {
    width: 78px !important;
    height: 58px !important;
}
.side-title {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* Hero responsive */
@media (max-width: 1024px) {
    .hero-slider { height: 400px !important; min-height: 360px !important; }
}
@media (max-width: 768px) {
    .hero-slider { height: 300px !important; min-height: 260px !important; }
    .hero-title  { font-size: 1.3rem !important; }
}

/* ── 2. GLOBAL SECTION SPACING: 25% tighter ── */
.eg-section         { padding: 1.5rem 0 !important; }
.top-stories        { padding: 1.35rem 0 !important; }
.most-read          { padding: 1.35rem 0 !important; }
.editorial-grid > .eg-section { padding: 1.5rem 0 !important; }
.hp-newsletter      { padding: 2.25rem 0 !important; }
.media-section      { padding: 1.5rem 0 !important; }

/* ── 3. NEWS GRID: denser cards, tighter gaps ── */
.eg-row-4  { gap: 0 !important; }
.eg-row-3  { gap: 0 !important; }
.eg-grid-2x2 { gap: 0 !important; }
.eg-fm-layout  { gap: 1.25rem !important; }
.eg-macro-layout { gap: 1.25rem !important; }

/* Cards in row-4 and row-3: add right separator */
.eg-row-4 .eg-card,
.eg-row-3 .eg-card {
    padding-inline-end: 0.9rem;
    padding-inline-start: 0.9rem;
    border-inline-end: 1px solid var(--border);
}
.eg-row-4 .eg-card:first-child,
.eg-row-3 .eg-card:first-child { padding-inline-start: 0; }
.eg-row-4 .eg-card:last-child,
.eg-row-3 .eg-card:last-child  { border-inline-end: none; padding-inline-end: 0; }

/* Card body: tighter padding */
.eg-card-body {
    padding-top: 0.5rem !important;
}

/* Card title: tighter line-height */
.eg-card-title {
    line-height: 1.28 !important;
    margin-bottom: 0.25rem !important;
}
.eg-title-lg { font-size: 1.22rem !important; font-weight: 800 !important; }
.eg-title-md { font-size: 0.9rem  !important; font-weight: 700 !important; }
.eg-title-sm { font-size: 0.82rem !important; font-weight: 700 !important; }

/* Category label: crisper */
.eg-cat {
    font-size: 0.58rem !important;
    letter-spacing: .1em !important;
    font-weight: 800 !important;
    margin-bottom: 0.22rem !important;
}

/* Card excerpt: 1-line only on small cards */
.eg-row-4 .eg-card-excerpt { display: none !important; }
.eg-row-3 .eg-card-excerpt { -webkit-line-clamp: 1 !important; }

/* Date meta */
.eg-card-date {
    font-size: 0.64rem !important;
    padding-top: 0.2rem !important;
    opacity: .65;
}

/* Section header: cleaner, bolder */
.eg-section-hd {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.85rem !important;
    border-bottom: 2px solid var(--border) !important;
}
.eg-section-title {
    font-size: 0.6rem !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    border-inline-start: 4px solid var(--accent) !important;
}
.eg-more {
    font-size: 0.68rem !important;
    text-decoration: none !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
    opacity: .8;
    transition: opacity .15s;
}
.eg-more:hover { opacity: 1 !important; color: var(--accent) !important; }

/* Featured card image: taller on desktop */
.eg-feature    .eg-card-img { height: 340px !important; }
.eg-feature-lg .eg-card-img { height: 320px !important; }
@media (max-width: 1024px) {
    .eg-feature    .eg-card-img { height: 240px !important; }
    .eg-feature-lg .eg-card-img { height: 220px !important; }
}

/* Section backgrounds: more contrast */
.editorial-grid > .eg-section:nth-child(2) { background: #f8f7f3 !important; }
.editorial-grid > .eg-section:nth-child(3) { background: #f2f4f7 !important; }
.editorial-grid > .eg-section:nth-child(4) { background: #f0f4f8 !important; }

/* ── 4. TOP-STORIES ticker: denser ── */
.ts-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ts-item {
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid var(--border);
}
.ts-item:last-child { border-bottom: none; }

/* ── 5. MOST-READ: tighter spacing ── */
.mr-item  { padding: 0.55rem 0 !important; gap: 0.75rem !important; }
.mr-num   { font-size: 1.55rem !important; line-height: 1 !important; }
.mr-title { font-size: 0.85rem !important; line-height: 1.3 !important; }

/* ── 6. AD SLOTS: integrated feel ── */
.ad-wrap--leaderboard,
.ad-wrap--banner {
    margin: 0 !important;
    padding: 0.6rem 0 !important;
    background: #f8f7f3;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.ad-slot { text-align: center; }
.ad-sponsored-label {
    font-size: 0.56rem !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 0.35rem;
    opacity: .6;
}

/* Homepage secondary ad between sections */
.ad-wrap--native-mid {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(177,18,38,.1);
    border-bottom: 1px solid rgba(177,18,38,.1);
    background: var(--deep-navy);
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   PHASE 30 — PREMIUM POLISH + FINAL RHYTHM
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Definitive section spacing ── */
.editorial-grid > .eg-section { padding: 1.75rem 0 !important; }
.top-stories                  { padding: 1.6rem 0 !important; }
.most-read                    { padding: 1.6rem 0 !important; }
.hp-newsletter                { padding: 2.75rem 0 !important; }
.media-section                { padding: 1.75rem 0 !important; }

/* ── 2. Top Stories — stronger column separators + visual anchor ── */
.top-stories {
    border-top: 3px solid var(--navy);
    border-bottom: 1px solid var(--border);
}
.ts-col                 { border-inline-end-color: rgba(177,18,38,.2) !important; }
.ts-row                 { border-bottom-color: rgba(7,26,45,.07) !important; }
.ts-row--center-sub     { border-top-color: rgba(7,26,45,.07) !important; }

/* Category + date meta row */
.ts-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.22rem;
    flex-wrap: wrap;
}
.ts-meta-sep {
    font-size: 0.5rem;
    color: var(--text-secondary, #5f6f7e);
    line-height: 1;
    flex-shrink: 0;
}

/* ── 3. Events slider — strong top edge, bigger title ── */
.ev-slider         { border-top: 3px solid var(--navy); border-bottom: 3px solid var(--navy); }
.ev-title          { font-size: 1.9rem !important; font-weight: 900 !important; letter-spacing: -.025em !important; }
.ev-subtitle       { font-size: 0.95rem; line-height: 1.6; }

/* ── 4. Section header standardization across all types ── */
.mr-hd,
.media-section-hd,
.fv-hd,
.pod-hd {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.9rem !important;
    border-bottom: 2px solid var(--border) !important;
    gap: 1rem;
}
.mr-hd-title,
.media-section-title,
.fv-title,
.pod-hd-title {
    font-size: 0.6rem !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--deep-navy) !important;
    border-inline-start: 4px solid var(--accent) !important;
    padding-inline-start: 0.65rem !important;
    line-height: 1.2 !important;
}

/* ── 5. Card image border-radius consistency ── */
.eg-card-img { border-radius: 2px; overflow: hidden; }

/* ── 6. Most-read item padding — flush on edges ── */
.mr-item:first-child { padding-inline-start: 0 !important; }
.mr-item:last-child  { padding-inline-end: 0 !important; }

/* ── Phase 30 responsive ── */
@media (max-width: 768px) {
    .top-stories   { padding: 1.25rem 0 !important; border-top-width: 2px; }
    .most-read     { padding: 1.25rem 0 !important; }
    .editorial-grid > .eg-section { padding: 1.4rem 0 !important; }
    .ev-title      { font-size: 1.4rem !important; }
    .ev-slider     { border-top-width: 2px; border-bottom-width: 2px; }
}
@media (max-width: 480px) {
    .ev-title      { font-size: 1.15rem !important; }
    .ts-meta       { gap: 0.25rem; }
}

/* ════════════════════════════════════════════════════════════════
   PHASE 31 — FINAL HOMEPAGE DOMINANCE
   ════════════════════════════════════════════════════════════════ */

/* ── 1. DENSITY: 10–15% tighter than Phase 30 ── */
.editorial-grid > .eg-section { padding: 1.5rem 0 !important; }
.top-stories                  { padding: 1.4rem 0 !important; }
.most-read                    { padding: 1.4rem 0 !important; }
.hp-newsletter                { padding: 2.5rem 0 !important; }
.media-section                { padding: 1.5rem 0 !important; }
.fv-block                     { padding: 1.5rem 0 !important; }
.eg-section-hd                { margin-bottom: 0.75rem !important; padding-bottom: 0.45rem !important; }
.mr-hd                        { margin-bottom: 0.75rem !important; padding-bottom: 0.45rem !important; }
.eg-card-body                 { padding-top: 0.45rem !important; }

/* ── 2. TOP STORIES: wider center, stronger featured ── */
.ts-digest {
    grid-template-columns: 1fr 1.55fr 1fr !important;
}
.ts-feat-title {
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.36 !important;
    letter-spacing: -.015em !important;
    -webkit-line-clamp: 4 !important;
}
.ts-feat-img {
    border-radius: 3px;
    overflow: hidden;
}
.ts-feat-img img {
    transition: transform .45s ease !important;
}
.ts-featured:hover .ts-feat-img img {
    transform: scale(1.03) !important;
}
.ts-featured:hover .ts-feat-img {
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
}
.ts-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
}
.ts-title a:hover { color: var(--accent) !important; text-decoration: none !important; }
.ts-row { transition: background .18s ease; }
.ts-row:hover { background: rgba(177,18,38,.025); }

/* ── 3. ADS: native integration, grid-aligned ── */
.ad-rail {
    background: #f5f4f0 !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(7,26,45,.06) !important;
    padding: 0.85rem 0 !important;
}
.ad-wrap--mid-leaderboard {
    background: #f5f4f0 !important;
    border-top: 1px solid rgba(7,26,45,.05) !important;
    border-bottom: 1px solid rgba(7,26,45,.05) !important;
}
.ad-wrap--banner,
.ad-wrap--leaderboard {
    background: #f8f7f3 !important;
}

/* ── 4. SECTION HEADERS: sharper gold bar, reduced letter-spacing ── */
.eg-section-title {
    letter-spacing: .14em !important;
    border-inline-start: 4px solid var(--accent) !important;
    border-inline-start-color: var(--accent) !important;
    padding-inline-start: 0.6rem !important;
    line-height: 1.15 !important;
}
.mr-hd-title,
.media-section-title,
.fv-title,
.pod-hd-title {
    letter-spacing: .14em !important;
}

/* ── 5. MICRO INTERACTIONS ── */
.eg-card {
    transition: transform .25s ease, box-shadow .25s ease !important;
}
.eg-card-img img {
    transition: transform .45s ease !important;
}
.eg-card:hover .eg-card-img img {
    transform: scale(1.03) !important;
}
.eg-row-4 .eg-card:hover,
.eg-row-3 .eg-card:hover,
.eg-grid-2x2 .eg-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.1) !important;
}
.eg-feature:hover,
.eg-feature-lg:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.08) !important;
}
/* Side items: smooth transition */
.side-item {
    transition: background .2s ease !important;
}
/* Most-read: subtle hover */
.mr-title a:hover { color: var(--accent) !important; text-decoration: none !important; }

/* ── 6. VISUAL DEPTH ── */
.top-stories {
    box-shadow: 0 2px 14px rgba(7,26,45,.04);
}
.most-read {
    box-shadow: inset 0 -2px 10px rgba(7,26,45,.03);
}
.editorial-grid > .eg-section:nth-child(2) { background: #f8f7f3 !important; }
.editorial-grid > .eg-section:nth-child(3) { background: #f2f5f8 !important; }
.editorial-grid > .eg-section:nth-child(4) { background: #edf2f7 !important; }

/* Featured card images: tall and impactful on desktop */
.eg-feature    .eg-card-img { height: 360px !important; }
.eg-feature-lg .eg-card-img { height: 340px !important; }

/* ── Phase 31 responsive ── */
@media (max-width: 992px) {
    .ts-digest { grid-template-columns: 1fr 1.45fr !important; }
}
@media (max-width: 768px) {
    .ts-digest               { grid-template-columns: 1fr !important; }
    .top-stories             { padding: 1.2rem 0 !important; }
    .most-read               { padding: 1.2rem 0 !important; }
    .editorial-grid > .eg-section { padding: 1.25rem 0 !important; }
    .eg-feature    .eg-card-img   { height: 220px !important; }
    .eg-feature-lg .eg-card-img   { height: 205px !important; }
    .ts-feat-title           { font-size: 0.98rem !important; }
    .eg-row-4 .eg-card:hover,
    .eg-row-3 .eg-card:hover { transform: none !important; }
}
@media (max-width: 480px) {
    .eg-feature    .eg-card-img { height: 185px !important; }
    .eg-feature-lg .eg-card-img { height: 175px !important; }
}

/* ── article.css ── */
/* ══════════════════════════════════════════════════════
   ARTICLE PAGE  (np-art-*)
   ══════════════════════════════════════════════════════ */

/* ── Article wrapper ── */
.np-art {
    background: var(--white);
    padding-bottom: 3.5rem;
}

/* ── Header ── */
.np-art-header {
    background: var(--paper);
    padding: 2.5rem 0 1.75rem;
    border-top: 4px solid var(--accent);
    border-bottom: 1px solid var(--rule);
}
.np-art-header-inner {
    max-width: 720px;
    margin: 0 auto;
}
.np-art-kicker {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    margin-bottom: 0.85rem;
    transition: opacity .15s;
}
.np-art-kicker:hover { opacity: .75; }
.np-art-title {
    font-family: var(--en-serif);
    font-size: clamp(1.75rem, 3.2vw, 2.55rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 0.85rem;
    max-width: 680px;
}
body.lang-ar .np-art-title { font-family: var(--ar-head); font-weight: 600; }
.np-art-subtitle {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
    max-width: 640px;
}
.np-art-byline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--ink-faint);
    border-top: 1px solid var(--rule);
    padding-top: 0.85rem;
}
.np-art-byline-author a {
    color: var(--ink-soft);
    font-weight: 600;
    text-decoration: none;
}
.np-art-byline-author a:hover { color: var(--accent); }
.np-art-byline-sep { opacity: .4; }
.np-art-byline-date { color: var(--ink-faint); }

/* ── Hero image ── */
.np-art-hero-img {
    background: var(--band);
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}
.np-art-figure {
    max-width: 900px;
    margin: 0 auto;
}
.np-art-figure img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: cover;
}
.np-art-caption {
    font-size: 0.7rem;
    color: var(--ink-faint);
    margin-top: 0.55rem;
    padding-inline-start: 0.6rem;
    border-inline-start: 2px solid var(--rule);
    line-height: 1.45;
}

/* ── Body layout (main + optional sidebar) ── */
.np-art-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 2.5rem;
    padding-top: 2rem;
    align-items: start;
}
.np-art-layout--nosidebar {
    grid-template-columns: minmax(0, 680px);
    justify-content: center;
}
.np-art-sidebar {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
}

/* ── Article body typography ── */
.np-art-body {
    font-family: var(--en-serif);
    font-size: 1.05rem;
    line-height: 1.82;
    color: var(--ink);
    max-width: 680px;
}
body.lang-ar .np-art-body { font-family: var(--ar-body); }
.np-art-body > * + * { margin-top: 1.25em; }
.np-art-body p { margin: 0 0 1.1em; }

.np-art-body h2 {
    font-size: 1.38rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--navy);
    margin: 2em 0 0.65em;
    padding-bottom: 0.4em;
    border-bottom: 2px solid rgba(177,18,38,.3);
}
.np-art-body h3 {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--navy);
    margin: 1.75em 0 0.5em;
}
.np-art-body h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    margin: 1.5em 0 0.4em;
}

.np-art-body strong { font-weight: 700; color: #111827; }
.np-art-body em     { font-style: italic; color: #374151; }

.np-art-body a {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(7,26,45,.3);
    transition: color .15s, text-decoration-color .15s;
}
.np-art-body a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

.np-art-body blockquote {
    margin: 1.75em 0;
    padding: 1rem 1.25rem;
    border-inline-start: 4px solid var(--accent);
    background: #faf9f6;
    font-size: 1.05rem;
    font-style: italic;
    color: #374151;
    line-height: 1.65;
    border-radius: 0 2px 2px 0;
}
.np-art-body blockquote cite {
    display: block;
    font-size: 0.8rem;
    font-style: normal;
    color: var(--muted);
    margin-top: 0.5em;
}

.np-art-body pre,
.np-art-body code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.88rem;
    background: #f3f4f6;
    border-radius: 3px;
}
.np-art-body pre {
    padding: 1rem 1.25rem;
    overflow-x: auto;
    line-height: 1.55;
}
.np-art-body code { padding: 0.1em 0.35em; }
.np-art-body pre code { background: none; padding: 0; }

.np-art-body ul,
.np-art-body ol {
    padding-inline-start: 1.5rem;
    margin: 0 0 1.1em;
}
.np-art-body li { margin-bottom: 0.3em; }

.np-art-body hr {
    border: none;
    border-top: 2px solid rgba(177,18,38,.25);
    margin: 2em 0;
}

/* Tables: responsive wrapper + clean style */
.np-art-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 0 0 1.1em;
}
.np-art-body th {
    background: var(--navy);
    color: var(--white);
    font-weight: 700;
    text-align: start;
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
    letter-spacing: .04em;
}
.np-art-body td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.np-art-body tr:nth-child(even) td { background: #faf9f6; }

/* Images inside body */
.np-art-body img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    margin: 0.25em auto;
}
.np-art-body figure {
    margin: 1.5em 0;
}
.np-art-body figcaption {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 0.4em;
    padding-inline-start: 0.5rem;
    border-inline-start: 2px solid var(--border);
}

/* Video embed (ContentSanitizer wraps with .np-art-video) */
.np-art-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 1.5em 0;
    border-radius: 2px;
}
.np-art-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Tags ── */
.np-art-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.np-art-tags-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-inline-end: 0.25rem;
}
.np-art-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--navy);
    background: #f3f4f6;
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
    text-decoration: none;
    border: 1px solid var(--border);
    transition: background .15s, color .15s;
}
.np-art-tag:hover {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}

/* ── Share row ── */
.np-art-share {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.75rem;
    padding: 1rem 1.1rem;
    background: #faf9f6;
    border: 1px solid var(--border);
    border-radius: 3px;
}
.np-art-share-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-inline-end: 0.25rem;
    flex-shrink: 0;
}
.np-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--navy);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
    flex-shrink: 0;
}
.np-share-btn:hover           { background: var(--navy); color: var(--white); border-color: var(--navy); }
.np-share-btn.np-share-wa:hover  { background: #25D366; border-color: #25D366; }
.np-share-btn.np-share-li:hover  { background: #0A66C2; border-color: #0A66C2; }
.np-share-btn.np-share-x:hover   { background: #000;    border-color: #000; }
.np-share-btn.is-copied          { background: var(--green); border-color: var(--green); color: var(--white); }

/* ── Author box ── */
.np-art-author-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 2rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--accent);
    background: #faf9f6;
    border-radius: 0 3px 3px 0;
}
.np-art-author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.np-art-author-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.np-art-author-info { flex: 1; min-width: 0; }
.np-art-author-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.2rem;
}
.np-art-author-name a { color: inherit; text-decoration: none; }
.np-art-author-name a:hover { color: var(--accent); }
.np-art-author-role {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 0.45rem;
}
.np-art-author-bio {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #374151;
    margin: 0;
}

/* ── Related articles ── */
.np-art-related {
    background: #f8f7f4;
    border-top: 2px solid rgba(177,18,38,.3);
    padding: 2.25rem 0;
    margin-top: 2rem;
}
.np-art-related-hd {
    margin-bottom: 1.35rem;
}
.np-art-related-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--deep-navy);
    border-inline-start: 4px solid var(--accent);
    padding-inline-start: 0.7rem;
}
.np-art-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.np-rel-card {
    background: var(--white);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 2px 7px rgba(0,0,0,.07);
    transition: transform .15s, box-shadow .2s;
}
.np-rel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,.11);
}
.np-rel-img {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.np-rel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}
.np-rel-card:hover .np-rel-img img { transform: scale(1.04); }
.np-rel-body {
    padding: 0.75rem 0.9rem 0.9rem;
}
.np-rel-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin: 0.3rem 0 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.np-rel-title a { color: inherit; text-decoration: none; }
.np-rel-title a:hover { color: var(--accent); }

/* ── Article page responsive ── */
@media (max-width: 1024px) {
    .np-art-layout { grid-template-columns: 1fr; }
    .np-art-sidebar { position: static; }
    .np-art-title   { font-size: clamp(1.6rem, 3vw, 2.2rem); }
}
@media (max-width: 768px) {
    .np-art-header  { padding: 1.75rem 0 1.5rem; }
    .np-art-title   { font-size: 1.55rem; letter-spacing: -.02em; }
    .np-art-subtitle { font-size: 0.92rem; }
    .np-art-figure img { max-height: 260px; }
    .np-art-layout  { padding-top: 1.5rem; }
    .np-art-body    { font-size: 0.96rem; line-height: 1.7; }
    .np-art-body h2 { font-size: 1.15rem; }
    .np-art-body h3 { font-size: 0.98rem; }
    .np-art-related-grid { grid-template-columns: 1fr 1fr; }
    .np-art-author-box   { flex-direction: column; gap: 0.75rem; }
}
@media (max-width: 480px) {
    .np-art-related-grid { grid-template-columns: 1fr; }
    .np-art-share { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════
   PHASE 15 — ARTICLE PAGE UPGRADES
   ════════════════════════════════════════════════════════ */

/* Wider layout */
.np-art-layout {
    grid-template-columns: 1fr 300px;
    gap: 2.5rem;
}

/* Body fills main column when sidebar present */
.np-art-layout:not(.np-art-layout--nosidebar) .np-art-body {
    max-width: 100%;
}

/* Improved typography */
.np-art-body {
    font-size: 1.04rem;
    line-height: 1.82;
}
.np-art-body p { margin: 0 0 1.25em; }
.np-art-body h2 {
    font-size: 1.32rem;
    margin: 2.25em 0 0.6em;
    padding-bottom: 0.45em;
}
.np-art-body h3 {
    font-size: 1.1rem;
    margin: 1.85em 0 0.5em;
    padding-inline-start: 0.65rem;
    border-inline-start: 3px solid var(--accent);
}
.np-art-body blockquote {
    margin: 2em 0;
    padding: 1.25rem 1.5rem;
    border-inline-start: 5px solid var(--accent);
    background: linear-gradient(to inline-end, rgba(177,18,38,.06), transparent);
    font-size: 1.08rem;
    line-height: 1.7;
}
.np-art-body hr {
    margin: 2.5em 0;
    border-top: 1px solid var(--border);
    position: relative;
}
.np-art-body hr::after {
    content: '◆';
    position: absolute;
    left: 50%;
    top: -0.65em;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: var(--accent);
    background: var(--white);
    padding: 0 0.5rem;
}

/* Sidebar */
.np-sidebar-ad-wrap {
    margin-bottom: 1.75rem;
}
.np-sidebar-related {
    padding-top: 1.25rem;
    border-top: 2px solid rgba(177,18,38,.25);
}
.np-sidebar-section-title {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--deep-navy);
    border-inline-start: 4px solid var(--accent);
    padding-inline-start: 0.6rem;
    margin-bottom: 1.1rem;
}
.np-sidebar-item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    text-decoration: none;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
    transition: opacity .15s;
}
.np-sidebar-item:last-child { border-bottom: none; }
.np-sidebar-item:hover { opacity: .78; }
.np-sidebar-thumb {
    flex: 0 0 70px;
    height: 52px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--border);
}
.np-sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.np-sidebar-item:hover .np-sidebar-thumb img { transform: scale(1.05); }
.np-sidebar-item-body { flex: 1; min-width: 0; }
.np-sidebar-item-title {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--navy);
    margin: 0 0 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.np-sidebar-item-date {
    font-size: 0.68rem;
    color: var(--muted);
    display: block;
}

/* Author box upgrade */
.np-art-author-box {
    margin-top: 2.5rem;
    padding: 1.5rem 1.6rem;
    border: none;
    border-top: 3px solid var(--accent);
    background: var(--deep-navy);
    border-radius: 0 0 3px 3px;
    border-inline-start: none;
}
.np-art-author-eyebrow {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.85rem;
    opacity: .85;
}
.np-art-author-header { margin-bottom: 0; }
.np-art-author-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}
.np-art-author-box .np-art-author-avatar {
    width: 56px;
    height: 56px;
    border: 2px solid rgba(177,18,38,.5);
}
.np-art-author-box .np-art-author-name {
    color: var(--white);
    font-size: 0.95rem;
}
.np-art-author-box .np-art-author-name a { color: var(--white); }
.np-art-author-box .np-art-author-name a:hover { color: var(--accent); }
.np-art-author-box .np-art-author-role { color: rgba(255,255,255,.5); }
.np-art-author-box .np-art-author-bio {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255,255,255,.65);
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,.1);
}

/* Related articles: tighter */
.np-art-related {
    margin-top: 0;
    padding: 2rem 0 2.5rem;
}
.np-art-related-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid rgba(177,18,38,.25);
}
.np-rel-card {
    transition: transform .2s, box-shadow .2s;
}
.np-rel-body {
    padding: 0.8rem 0.95rem 1rem;
}
.np-rel-title {
    font-size: 0.9rem;
    line-height: 1.32;
}

/* Phase 15 article responsive */
@media (max-width: 768px) {
    .np-art-layout { grid-template-columns: 1fr; }
    .np-art-sidebar { position: static; }
    .np-art-author-identity { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════
   PHASE 22A — Article Polish: Progress bar, Reading time,
   Typography refinements, Sticky share, Newsletter CTA
   ════════════════════════════════════════════════════════ */

/* ── Reading progress bar ── */
#art-progress {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-deep));
    z-index: 2000;
    transition: width .1s linear;
    pointer-events: none;
}

/* ── Reading time badge in byline ── */
.np-art-read-time {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: rgba(255,255,255,.45);
}
.np-art-read-time svg { opacity: .65; }

/* ── Article header — upgraded kicker with line ── */
.np-art-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    margin-bottom: 0.85rem;
}
.np-art-kicker::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 2px;
    background: var(--accent);
    flex-shrink: 0;
}

/* ── Improved article title ── */
.np-art-title {
    font-size: clamp(1.75rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.025em;
    color: var(--white);
}

/* ── Article header gradient ── */
.np-art-header {
    background: linear-gradient(160deg, var(--deep-navy) 60%, #0a1e3d);
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid rgba(177,18,38,.15);
}

/* ── Sticky share bar ── */
.np-art-share-sticky {
    position: sticky;
    bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--deep-navy);
    border: 1px solid rgba(177,18,38,.3);
    border-radius: 50px;
    padding: 0.45rem 0.85rem;
    box-shadow: 0 8px 30px rgba(0,0,0,.22);
    margin-top: 2rem;
    width: fit-content;
    z-index: 90;
}
.np-art-share-sticky .np-art-share-label {
    color: rgba(255,255,255,.5);
    font-size: 0.65rem;
}
.np-art-share-sticky .np-share-btn {
    background: transparent;
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.75);
    width: 30px;
    height: 30px;
}
.np-art-share-sticky .np-share-btn:hover {
    background: rgba(177,18,38,.2);
    color: var(--accent);
    border-color: rgba(177,18,38,.4);
}

/* ── Article newsletter CTA ── */
.np-art-newsletter {
    margin: 2.5rem 0 0;
    padding: 1.75rem 2rem;
    background: var(--deep-navy);
    border-radius: 4px;
    border: 1px solid rgba(177,18,38,.2);
    border-top: 3px solid var(--accent);
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.np-art-newsletter-text {}
.np-art-newsletter-eyebrow {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.35rem;
}
.np-art-newsletter-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 0.3rem;
    line-height: 1.3;
}
.np-art-newsletter-sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,.5);
    margin: 0;
}
.np-art-newsletter-form {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.np-art-newsletter-input {
    padding: 0.55rem 1rem;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.07);
    color: var(--white);
    font-size: 0.82rem;
    border-radius: 3px;
    outline: none;
    width: 220px;
    transition: border-color .18s;
}
.np-art-newsletter-input::placeholder { color: rgba(255,255,255,.35); }
.np-art-newsletter-input:focus { border-color: rgba(177,18,38,.5); }
.np-art-newsletter-btn {
    padding: 0.55rem 1.25rem;
    background: var(--accent);
    color: var(--deep-navy);
    font-size: 0.8rem;
    font-weight: 700;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .18s;
}
.np-art-newsletter-btn:hover { opacity: .88; }

/* ── Drop-cap first paragraph ── */
.np-art-body > p:first-child::first-letter {
    font-size: 3.4em;
    font-weight: 800;
    line-height: .85;
    float: inline-start;
    margin-inline-end: .1em;
    margin-top: .05em;
    color: var(--accent);
    font-family: Georgia, serif;
}

/* ── Improved figure handling ── */
.np-art-figure {
    position: relative;
    margin: 0;
}
.np-art-figure img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* ── Better blockquote ── */
.np-art-body blockquote {
    position: relative;
    overflow: hidden;
}
.np-art-body blockquote::before {
    content: '\201C';
    position: absolute;
    top: -.2em;
    inset-inline-start: .5rem;
    font-size: 5rem;
    line-height: 1;
    color: rgba(177,18,38,.15);
    font-family: Georgia, serif;
    pointer-events: none;
}

/* ── Article mobile ── */
@media (max-width: 768px) {
    .np-art-newsletter { flex-direction: column; gap: 1rem; }
    .np-art-newsletter-input { width: 100%; }
    .np-art-newsletter-form { width: 100%; }
    .np-art-newsletter-btn { width: 100%; text-align: center; }
    .np-art-share-sticky { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   PHASE 23 — ARTICLE TYPOGRAPHY POLISH + STICKY SIDEBAR
   ════════════════════════════════════════════════════════════════ */

/* ── Sticky sidebar ── */
.np-art-sidebar {
    position: sticky !important;
    top: calc(var(--topbar-h) + var(--header-h) + var(--nav-h) + 1rem) !important;
    align-self: start !important;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(177,18,38,.2) transparent;
}
@media (max-width: 1024px) {
    .np-art-sidebar { position: static !important; max-height: none; }
}

/* ── Article body typography: tighter line-height ── */
.np-art-body {
    font-size: 1.06rem !important;
    line-height: 1.78 !important;
}
.np-art-body p { margin: 0 0 1.1em !important; }

/* ── Article header: tighter ── */
.np-art-title {
    font-size: clamp(1.8rem, 3.2vw, 2.7rem) !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    line-height: 1.13 !important;
}
.np-art-subtitle {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,.72) !important;
    font-weight: 400 !important;
}
.np-art-header { padding: 2.25rem 0 1.75rem !important; }

/* ── Kicker separator ── */
.np-art-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: .2em !important;
    color: var(--accent) !important;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

/* ── Related articles: tighter ── */
.np-art-related-grid {
    gap: 1rem !important;
}
.np-rel-title { font-size: 0.88rem !important; line-height: 1.28 !important; }
.np-rel-body  { padding: 0.65rem 0.8rem 0.8rem !important; }

/* ── Ad slots in article: after 2nd paragraph ── */
.ad-wrap--article-top {
    margin: 0 0 1.5rem !important;
}
.ad-wrap--inline {
    margin: 1.5rem 0 !important;
    padding: 0.5rem 0 !important;
}

/* ── media.css ── */
/* ════════════════════════════════════════════════════════
   UAEFMA — media.css  |  Media sections (homepage)
   ════════════════════════════════════════════════════════ */

/* ── Phase 14: homepage media sections ── */
.media-section {
    padding: 1.75rem 0;
}
.media-section--podcasts {
    background: var(--deep-navy);
}
.media-section--videos {
    background: #0b2240;
}
.media-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(177,18,38,.3);
}
.media-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    border-inline-start: 4px solid var(--accent);
    padding-inline-start: 0.7rem;
}
.media-section-more {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .15s;
}
.media-section-more:hover { color: var(--accent); }

.media-section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.media-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255,255,255,.05);
    transition: transform .2s, box-shadow .2s;
}
.media-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
}

.media-card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: rgba(0,0,0,.45);
}
.media-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s;
}
.media-card:hover .media-card-thumb img { transform: scale(1.04); }

.media-card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.15);
    transition: background .2s;
}
.media-card:hover .media-card-play { background: rgba(0,0,0,.32); }

.media-card-body {
    padding: 0.85rem 1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.media-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--white);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.media-card-date {
    font-size: 0.72rem;
    color: rgba(255,255,255,.45);
    margin-top: auto;
}

/* ── Phase 15: featured video block ── */
.fv-block {
    background: #04172b;
    padding: 1.75rem 0;
}
.fv-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(177,18,38,.3);
}
.fv-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    border-inline-start: 4px solid var(--accent);
    padding-inline-start: 0.7rem;
}
.fv-more {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .15s;
}
.fv-more:hover { color: var(--accent); }

.fv-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: stretch;
}

.fv-featured {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(0,0,0,.5);
    min-height: 290px;
}
.fv-featured img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.fv-featured:hover img { transform: scale(1.04); }

.fv-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(3,17,31,.2) 0%, transparent 30%),
        linear-gradient(to top, rgba(3,17,31,.95) 0%, rgba(3,17,31,.55) 45%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.fv-play-ring {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform .25s;
}
.fv-featured:hover .fv-play-ring { transform: scale(1.12); }
.fv-featured:hover .fv-play-ring svg circle { fill: rgba(177,18,38,.75); }

.fv-featured-body {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    z-index: 3;
}
.fv-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--deep-navy);
    background: var(--accent);
    padding: 0.18rem 0.55rem;
    border-radius: 2px;
    margin-bottom: 0.55rem;
}
.fv-featured-title {
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--white);
    margin: 0 0 0.45rem;
    letter-spacing: -.02em;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fv-date {
    font-size: 0.7rem;
    color: rgba(255,255,255,.5);
    display: block;
}

.fv-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    justify-content: space-between;
}
.fv-stack-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    text-decoration: none;
    padding: 0.75rem;
    border-radius: 3px;
    background: rgba(255,255,255,.04);
    transition: background .18s;
    flex: 1;
}
.fv-stack-item:hover { background: rgba(255,255,255,.09); }

.fv-stack-thumb {
    position: relative;
    flex: 0 0 110px;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(0,0,0,.4);
}
.fv-stack-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.fv-stack-item:hover .fv-stack-thumb img { transform: scale(1.05); }

.fv-stack-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.15);
}
.fv-stack-body { flex: 1; min-width: 0; }
.fv-stack-title {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--white);
    margin: 0 0 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Phase 15: podcasts featured layout ── */
.pod-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.pod-featured {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(0,0,0,.5);
    min-height: 280px;
}
.pod-featured img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.pod-featured:hover img { transform: scale(1.04); }
.pod-featured:hover .fv-play-ring { transform: scale(1.12); }
.pod-featured:hover .fv-play-ring svg circle { fill: rgba(177,18,38,.75); }

.pod-featured-body {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    padding: 1.1rem 1.25rem 1.35rem;
    z-index: 3;
}
.pod-ep-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--deep-navy);
    background: var(--accent);
    padding: 0.18rem 0.55rem;
    border-radius: 2px;
    margin-bottom: 0.5rem;
}
.pod-featured-title {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 800;
    line-height: 1.28;
    color: var(--white);
    margin: 0 0 0.4rem;
    letter-spacing: -.02em;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pod-grid-2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .media-section-grid { grid-template-columns: repeat(2, 1fr); }
    .fv-layout { grid-template-columns: 1fr; }
    .fv-stack { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; }
    .fv-stack-item { flex: 0 0 calc(50% - 0.375rem); }
    .pod-layout { grid-template-columns: 1fr; }
    .pod-grid-2 { flex-direction: row; }
}
@media (max-width: 768px) {
    .media-section-grid { grid-template-columns: 1fr; }
    .media-section { padding: 1.25rem 0; }
    .fv-block { padding: 1.25rem 0; }
    .fv-featured { min-height: 220px; }
    .fv-stack { flex-direction: column; }
    .fv-stack-item { flex: 1 1 100%; }
    .pod-grid-2 { flex-direction: column; }
}
@media (max-width: 480px) {
    .fv-featured { min-height: 190px; }
    .fv-featured-title { font-size: 1rem; }
}

/* ── Phase 17B: hard media compact ── */
.fv-featured {
    min-height: 290px !important;
    max-height: 360px !important;
    aspect-ratio: 16/9;
}
.fv-stack-thumb {
    flex: 0 0 120px !important;
    aspect-ratio: 16/9;
    background: #04172b !important;
}
.media-card-thumb {
    aspect-ratio: 16/9;
    background: #0b2240 !important;
}
.media-card-thumb img,
.fv-featured img,
.fv-stack-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ── Phase 18: image visibility fix ── */

/* fv-featured: give img explicit z-index so it sits correctly in stacking order */
.fv-featured img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    z-index: 0 !important;
}

/* Lighten the overlay so the thumbnail is clearly visible in the upper portion */
.fv-overlay {
    background:
        linear-gradient(to bottom, rgba(3,17,31,.1) 0%, transparent 25%),
        linear-gradient(to top, rgba(3,17,31,.92) 0%, rgba(3,17,31,.5) 35%, transparent 65%) !important;
    z-index: 1 !important;
}

/* Podcast/video cards: ensure img is above the container background */
.media-card-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}
.media-card-play {
    z-index: 2 !important;
}

/* fv-stack thumbnail img */
.fv-stack-thumb img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    z-index: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   YOUTUBE MODAL PLAYER  (Phase 20)
   ══════════════════════════════════════════════════════════════ */

/* Lighter featured-video overlay — thumbnail clearly visible */
.fv-overlay {
    background:
        linear-gradient(to bottom, rgba(3,17,31,.05) 0%, transparent 20%),
        linear-gradient(to top,   rgba(3,17,31,.9) 0%, rgba(3,17,31,.35) 30%, transparent 55%) !important;
    z-index: 1 !important;
}

/* Active/playing card highlight */
.fv-featured.is-playing .fv-play-ring svg circle,
.fv-stack-item.is-playing .fv-stack-thumb::after { opacity: 1; }
.fv-stack-item.is-playing {
    background: rgba(177,18,38,.12) !important;
    border-inline-start: 3px solid var(--accent);
}

/* ── Modal base: opacity-based so CSS transitions work ── */
.yt-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(3,17,31,.88);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}
.yt-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* ── PiP mode ── */
.yt-modal.is-pip {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0;
}
.yt-modal.is-pip .yt-modal-inner {
    pointer-events: all;
    width: 300px;
    max-width: 300px;
    position: fixed;
    bottom: 1.5rem;
    inset-inline-end: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0,0,0,.75);
    cursor: pointer;
}
.yt-modal.is-pip .yt-modal-bar { display: none; }
.yt-modal.is-pip .yt-modal-close {
    top: 0.35rem;
    inset-inline-end: 0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.9rem;
}

/* ── Modal inner ── */
.yt-modal-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #04172b;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.7);
    transform: scale(.96);
    transition: transform .25s ease;
}
.yt-modal.is-open .yt-modal-inner { transform: scale(1); }

/* ── Title bar ── */
.yt-modal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(0,0,0,.35);
    min-height: 0;
}
.yt-modal-title-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.yt-modal-controls {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* ── Buttons ── */
.yt-modal-close,
.yt-modal-pip {
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.yt-modal-close:hover { background: rgba(177,18,38,.7); }
.yt-modal-pip:hover   { background: rgba(255,255,255,.2); }

/* ── Video frame ── */
.yt-modal-frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.yt-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── Clickable cards ── */
[data-youtube-id] { cursor: pointer; user-select: none; }

/* ══════════════════════════════════════════════════════════════
   PODCAST INTERVIEW STYLE  (Phase 20)
   ══════════════════════════════════════════════════════════════ */
.media-section--podcasts { background: #071e36; }

/* Overide grid → use list for podcasts */
.media-section--podcasts .media-section-grid { display: none; }

.pod-list {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 4px;
    overflow: hidden;
}
.pod-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
    transition: background .18s;
    position: relative;
}
.pod-list-item:last-child { border-bottom: none; }
.pod-list-item:hover { background: rgba(255,255,255,.05); }
.pod-list-item.is-playing {
    background: rgba(177,18,38,.08);
    border-inline-start: 3px solid var(--accent);
}
.pod-list-item.is-playing .pod-ep-num { color: var(--accent); }

.pod-thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: #0b2240;
}
.pod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pod-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.38);
    transition: background .18s;
}
.pod-list-item:hover .pod-thumb-play { background: rgba(0,0,0,.55); }
.pod-list-item.is-playing .pod-thumb-play { background: rgba(177,18,38,.25); }

.pod-body { flex: 1; min-width: 0; }
.pod-ep-num {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    display: block;
    margin-bottom: 0.25rem;
}
.pod-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.35;
    margin: 0 0 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pod-date {
    font-size: 0.68rem;
    color: rgba(255,255,255,.38);
}

/* ── Responsive: podcast list ── */
@media (max-width: 768px) {
    .pod-thumb { flex: 0 0 64px; width: 64px; height: 64px; }
    .pod-title { font-size: 0.82rem; }
    .yt-modal.is-pip .yt-modal-inner { width: 240px; }
}
@media (max-width: 480px) {
    .yt-modal.is-pip .yt-modal-inner { width: 200px; }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 21 — PREMIUM MEDIA POLISH
   ══════════════════════════════════════════════════════════════ */

/* 1. Clean overlay: bottom 50% only, zero top shading */
.fv-overlay {
    background: linear-gradient(
        to top,
        rgba(3,17,31,.85) 0%,
        rgba(3,17,31,.22) 30%,
        transparent 52%
    ) !important;
}

/* 2. Stack: scrollable, max 5 items visible, custom scrollbar */
.fv-stack {
    max-height: 440px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(177,18,38,.4) transparent;
}
.fv-stack::-webkit-scrollbar { width: 4px; }
.fv-stack::-webkit-scrollbar-track { background: transparent; }
.fv-stack::-webkit-scrollbar-thumb {
    background: rgba(177,18,38,.35);
    border-radius: 4px;
}

/* 3. Stack item: hover scale on whole card */
.fv-stack-item {
    transition: background .18s, transform .18s !important;
}
.fv-stack-item:hover {
    transform: translateX(-2px);
    background: rgba(255,255,255,.08) !important;
}
.fv-stack-item.is-playing {
    background: rgba(177,18,38,.13) !important;
    border-inline-start: 3px solid var(--accent);
    transform: none;
}

/* 4. Modal blur 6px + tighter scale animation */
.yt-modal {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.yt-modal-inner {
    transition: transform .22s cubic-bezier(.22,.68,0,1.2), box-shadow .22s ease !important;
}
.yt-modal.is-open .yt-modal-inner {
    transform: scale(1) !important;
    box-shadow: 0 40px 100px rgba(0,0,0,.8) !important;
}

/* 5. PiP: exact 320×180 */
.yt-modal.is-pip .yt-modal-inner {
    width: 320px !important;
    max-width: 320px !important;
    bottom: 1.5rem !important;
    inset-inline-end: 1.5rem !important;
    transition: none !important;
}
.yt-modal.is-pip .yt-modal-inner:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,.85) !important;
}

/* 6. Podcast waveform */
.pod-wave {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    margin-top: 0.4rem;
}
.pod-wave span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.18);
    transition: background .3s;
}
.pod-wave span:nth-child(1) { height: 55%; }
.pod-wave span:nth-child(2) { height: 100%; }
.pod-wave span:nth-child(3) { height: 40%; }
.pod-wave span:nth-child(4) { height: 80%; }
.pod-wave span:nth-child(5) { height: 60%; }
.pod-wave span:nth-child(6) { height: 35%; }
.pod-wave span:nth-child(7) { height: 90%; }

/* Animate waveform only when this episode is playing */
.pod-list-item.is-playing .pod-wave span {
    background: var(--accent);
    animation: podWave .6s ease-in-out infinite alternate;
}
.pod-list-item.is-playing .pod-wave span:nth-child(2) { animation-delay: .08s; }
.pod-list-item.is-playing .pod-wave span:nth-child(3) { animation-delay: .16s; }
.pod-list-item.is-playing .pod-wave span:nth-child(4) { animation-delay: .24s; }
.pod-list-item.is-playing .pod-wave span:nth-child(5) { animation-delay: .32s; }
.pod-list-item.is-playing .pod-wave span:nth-child(6) { animation-delay: .40s; }
.pod-list-item.is-playing .pod-wave span:nth-child(7) { animation-delay: .48s; }

@keyframes podWave {
    from { transform: scaleY(.4); opacity: .7; }
    to   { transform: scaleY(1);  opacity: 1;  }
}

/* 7. Podcast: richer hover + playing state */
.pod-list-item {
    transition: background .18s, border-color .18s, padding-inline-start .15s !important;
}
.pod-list-item:hover .pod-title { color: var(--accent); }
.pod-list-item.is-playing {
    padding-inline-start: 1.45rem !important;
}

/* 8. Featured video play ring — gold pulse on hover */
.fv-featured:hover .fv-play-ring svg circle {
    fill: rgba(177,18,38,.75) !important;
    transition: fill .2s;
}

/* 9. Responsive adjustments */
@media (max-width: 768px) {
    .fv-stack { max-height: none; overflow-y: visible; }
    .yt-modal.is-pip .yt-modal-inner { width: 240px !important; }
}
@media (max-width: 480px) {
    .yt-modal.is-pip .yt-modal-inner { width: 200px !important; }
}

/* ════════════════════════════════════════════════════════════════
   PHASE 23 — VIDEO + PODCAST PREMIUM UPGRADE
   ════════════════════════════════════════════════════════════════ */

/* ── 1. FEATURED VIDEO: taller, cinematic, bigger play ── */
.fv-block { padding: 1.75rem 0 !important; }

.fv-featured {
    min-height: 400px !important;
    border-radius: 4px !important;
}
@media (min-width: 1200px) { .fv-featured { min-height: 440px !important; } }

/* Cinematic overlay: bottom 60% only, deep */
.fv-overlay {
    background: linear-gradient(
        to top,
        rgba(3,17,31,.96) 0%,
        rgba(3,17,31,.6)  30%,
        rgba(3,17,31,.15) 55%,
        transparent       75%
    ) !important;
}

/* Play button: bigger + pulse animation */
@keyframes playPulse {
    0%   { box-shadow: 0 0 0 0   rgba(177,18,38,.5); }
    70%  { box-shadow: 0 0 0 18px rgba(177,18,38,0); }
    100% { box-shadow: 0 0 0 0   rgba(177,18,38,0); }
}
.fv-play-ring svg {
    width: 72px !important;
    height: 72px !important;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
    transition: transform .25s;
}
.fv-featured:hover .fv-play-ring svg {
    transform: scale(1.1);
    animation: playPulse 1.4s ease infinite;
}
.fv-featured:hover .fv-play-ring svg circle {
    fill: rgba(177,18,38,.82) !important;
}

/* Featured title: bolder */
.fv-featured-title {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
    -webkit-line-clamp: 3 !important;
}
.fv-featured-body { padding: 1.5rem 1.75rem 1.75rem !important; }

/* ── 2. VIDEO STACK: dividers + tighter ── */
.fv-stack {
    max-height: 440px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 4px !important;
    overflow-y: auto !important;
    background: rgba(0,0,0,.25) !important;
}
.fv-stack-item {
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    transition: background .15s !important;
}
.fv-stack-item:last-child { border-bottom: none !important; }
.fv-stack-item:hover { background: rgba(255,255,255,.07) !important; transform: none !important; }

.fv-stack-thumb {
    flex: 0 0 90px !important;
    height: 60px !important;
    border-radius: 3px !important;
    overflow: hidden;
    position: relative;
}
.fv-stack-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.fv-stack-item:hover .fv-stack-thumb img { transform: scale(1.06); }
.fv-stack-title {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    display: -webkit-box !important;
}

/* Stack play overlay */
.fv-stack-play svg {
    width: 28px !important;
    height: 28px !important;
}

/* Section layout: video 65%, stack 35% */
.fv-layout {
    grid-template-columns: 1fr 300px !important;
    gap: 1rem !important;
    align-items: stretch !important;
}
@media (min-width: 1300px) { .fv-layout { grid-template-columns: 1fr 320px !important; } }

/* ── 3. PODCAST SECTION: Netflix grid ── */
.media-section--podcasts { padding: 1.75rem 0 !important; }
.media-section--podcasts .container { padding: 0 var(--container-pad, 1.25rem); }

/* Override list → 2-column grid */
.pod-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.07) !important;
}
.pod-list-item {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    border-inline-end: 1px solid rgba(255,255,255,.07) !important;
    align-items: center !important;
    gap: 0.9rem !important;
    transition: background .18s, box-shadow .18s !important;
}
/* Right column items: no right border */
.pod-list-item:nth-child(2n) { border-inline-end: none !important; }
/* Bottom row: no bottom border */
.pod-list-item:nth-last-child(-n+2) { border-bottom: none !important; }

.pod-list-item:hover {
    background: rgba(255,255,255,.07) !important;
    box-shadow: inset 0 0 0 1px rgba(177,18,38,.18) !important;
}

/* Thumb: bigger, shadow on hover */
.pod-thumb {
    flex: 0 0 90px !important;
    width:  90px !important;
    height: 90px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
    transition: box-shadow .2s, transform .2s !important;
}
.pod-list-item:hover .pod-thumb {
    box-shadow: 0 6px 22px rgba(0,0,0,.55) !important;
    transform: scale(1.03) !important;
}
.pod-thumb img {
    transition: transform .3s !important;
}
.pod-list-item:hover .pod-thumb img { transform: scale(1.06) !important; }

/* Episode number */
.pod-ep-num {
    font-size: 0.58rem !important;
    letter-spacing: .12em !important;
}

/* Pod title: stronger */
.pod-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    -webkit-line-clamp: 2 !important;
}

/* Waveform animation  */
.pod-wave {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 16px;
    margin-top: 0.45rem;
}
.pod-wave span {
    display: inline-block;
    width: 3px;
    border-radius: 2px;
    background: rgba(177,18,38,.45);
}
.pod-list-item.is-playing .pod-wave span { background: var(--accent); }

/* Responsive podcast grid */
@media (max-width: 768px) {
    .pod-list { grid-template-columns: 1fr !important; }
    .pod-list-item { border-inline-end: none !important; }
    .pod-list-item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.07) !important; }
    .pod-list-item:last-child { border-bottom: none !important; }
}

/* ── 4. VIDEO section header: gold on dark ── */
.fv-section-title {
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
}

/* ── 5. Podcast section header ── */
.media-section-title {
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    color: var(--accent) !important;
}
.media-section--podcasts .media-section-hd {
    border-bottom-color: rgba(177,18,38,.25) !important;
    margin-bottom: 1rem !important;
}

/* ── ads.css ── */
/* ══════════════════════════════════════════════════════
   AD SLOTS — native integration, no placeholders
   ══════════════════════════════════════════════════════ */

/* Base slot: renders nothing if empty (no $ad or no content) */
.ad-slot {
    text-align: center;
    overflow: hidden;
    line-height: 0;
}
.ad-slot img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 2px;
}
.ad-link { display: inline-block; line-height: 0; }

/* ── Wrapper: homepage after-hero banner ── */
.ad-wrap--banner {
    padding: 1.1rem 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.ad-wrap--banner .ad-slot {
    max-width: 970px;
    margin: 0 auto;
}
.ad-wrap--banner .ad-slot img {
    max-width: 970px;
    max-height: 160px;
    object-fit: contain;
    height: auto;
}

/* ── Wrapper: homepage mid-page strip ── */
.ad-wrap--strip {
    padding: 1.1rem 0;
    background: var(--off-white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ── Article top banner (above body, inside main column) ── */
.ad-wrap--article-top {
    margin-bottom: 1.5rem;
}
.ad-wrap--article-top .ad-slot {
    border-radius: 2px;
    overflow: hidden;
}

/* ── Inline article ad (after-intro & mid-content) ── */
.ad-slot--inline,
.ad-wrap--inline .ad-slot {
    margin: 1.75rem 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(229,231,235,.7);
    border-bottom: 1px solid rgba(229,231,235,.7);
}

/* ── Sidebar ad ── */
.np-art-sidebar .ad-slot {
    border-radius: 2px;
    overflow: hidden;
    max-width: 300px;
    margin: 0 auto;
}
.np-art-sidebar .ad-slot img {
    max-width: 300px;
    height: auto;
}

/* ── Phase 14: ad wrappers ── */
.ad-wrap--leaderboard {
    padding: 1.25rem 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.ad-wrap--leaderboard .ad-slot {
    display: inline-block;
    max-width: 970px;
}
.ad-wrap--leaderboard .ad-slot img { max-width: 970px; }

.ad-wrap--section-break {
    padding: 1rem 0;
    background: var(--off-white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.ad-wrap--bottom {
    padding: 1.5rem 0;
    background: var(--off-white);
    border-top: 1px solid var(--border);
    text-align: center;
}
.ad-wrap--bottom .ad-slot img { max-width: 1200px; }

.ad-video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.ad-video-wrap iframe,
.ad-video-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── Phase 14 responsive: ad wrappers ── */
@media (max-width: 768px) {
    .ad-wrap--leaderboard,
    .ad-wrap--section-break,
    .ad-wrap--bottom { padding: 0.75rem 0; }
    .ad-slot img { max-height: 140px; width: 100%; object-fit: contain; }
    .ad-wrap--banner .ad-slot img { max-height: 100px; }
}

/* ── Phase 15: sponsored label + inline ad ── */
.ad-slot { position: relative; }
.ad-sponsored-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-bottom: 0.35rem;
    opacity: .65;
}
.ad-slot--inline {
    margin: 2rem 0;
    padding: 1.25rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fdfcfa;
}

/* ── Phase 17B: hard ad size enforcement ── */
.ad-wrap--banner,
.ad-wrap--leaderboard {
    padding: 18px 0 !important;
}
.ad-wrap--banner .ad-slot,
.ad-wrap--leaderboard .ad-slot {
    max-width: 970px !important;
    max-height: 140px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: block !important;
}
.ad-wrap--banner img,
.ad-wrap--leaderboard img {
    width: 100% !important;
    max-width: 970px !important;
    max-height: 140px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    height: auto !important;
}
@media (max-width: 768px) {
    .ad-wrap--banner img,
    .ad-wrap--leaderboard img { max-height: 90px !important; }
}

/* ── Ad Rail: featured + 2 tiles under hero ── */
.ad-rail {
    padding: 1rem 0;
    background: var(--off-white, #f8f7f4);
    border-bottom: 1px solid var(--border, #e8e4df);
}

.ad-rail-inner {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.ad-rail-featured {
    flex: 3;
    min-width: 0;
}

.ad-rail-tiles {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.ad-rail-tile {
    flex: 1;
    min-width: 0;
}

.ad-rail .ad-slot img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 2px;
}

/* ── 3-column ad row (after events) ── */
.ad-row-3 {
    padding: 1rem 0;
    background: var(--white, #fff);
    border-top: 1px solid var(--border, #e8e4df);
    border-bottom: 1px solid var(--border, #e8e4df);
}

.ad-row-3-inner {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.ad-row-3-cell {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.ad-row-3-cell .ad-slot img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 2px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .ad-rail-inner {
        flex-direction: column;
    }
    .ad-rail-tiles {
        flex-direction: row;
    }
    .ad-row-3-inner {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ── Phase 30: mid-page leaderboard — max 100px, no empty placeholder ── */
.ad-wrap--mid-leaderboard {
    padding: 0.85rem 0;
    background: var(--off-white, #f6f4ef);
    border-top: 1px solid var(--border, #e5e7eb);
    border-bottom: 1px solid var(--border, #e5e7eb);
    text-align: center;
}
.ad-wrap--mid-leaderboard .ad-slot {
    max-width: 970px;
    max-height: 100px;
    margin: 0 auto;
    overflow: hidden;
    display: block;
}
.ad-wrap--mid-leaderboard .ad-slot img,
.ad-wrap--mid-leaderboard img {
    max-width: 970px !important;
    max-height: 100px !important;
    width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    height: auto !important;
}
.ad-wrap--mid-leaderboard .ad-sponsored-label {
    margin-bottom: 0.4rem;
    opacity: .55;
    font-size: 0.55rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
    display: block;
}
@media (max-width: 768px) {
    .ad-wrap--mid-leaderboard img { max-height: 60px !important; }
    .ad-wrap--mid-leaderboard { padding: 0.65rem 0; }
}

/* ══════════════════════════════════════════════════════
   PHASE 32 — AD SLOT SYSTEM: zones, placeholders, layout
   ══════════════════════════════════════════════════════ */

/* ── Ad Zones: full-width containers ── */
.ad-zone {
    text-align: center;
    overflow: hidden;
}
.ad-zone .container {
    display: flex;
    justify-content: center;
}
.ad-zone--leaderboard {
    padding: 0.9rem 0;
    background: var(--off-white, #f6f4ef);
    border-top: 1px solid var(--border, #e5e7eb);
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.ad-zone--strip {
    padding: 0.75rem 0;
    background: var(--white, #fff);
    border-top: 1px solid var(--border, #e5e7eb);
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.ad-zone--before-related {
    padding: 1rem 0;
    background: var(--off-white, #f6f4ef);
    border-top: 1px solid var(--border, #e5e7eb);
    border-bottom: 1px solid var(--border, #e5e7eb);
    margin: 2rem 0;
}
.ad-zone--footer-sponsor {
    padding: 1rem 0;
    background: var(--white, #fff);
    border-top: 1px solid var(--border, #e5e7eb);
}

/* ── Sponsor Row: after-hero & after-events ── */
.sponsor-row {
    padding: 1rem 0;
    background: var(--off-white, #f8f7f4);
    border-top: 1px solid var(--border, #e8e4df);
    border-bottom: 1px solid var(--border, #e8e4df);
}
.sponsor-row--after-events {
    background: var(--white, #fff);
    border-top: 1px solid var(--border, #e8e4df);
}

/* ── Sponsor Grid ── */
.sponsor-grid {
    display: grid;
    gap: 1rem;
    align-items: stretch;
}
.sponsor-grid--three {
    grid-template-columns: repeat(3, 1fr);
}

/* ── Page Wrap: main column + sidebar ── */
.np-page-wrap {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
    align-items: start;
    padding-top: 1.5rem;
}
.np-page-main { min-width: 0; }
.np-page-sidebar {
    min-width: 0;
    position: sticky;
    top: 80px;
}

/* ── Inline ad within grid (spans full row) ── */
.np-index-ad,
.np-media-ad {
    grid-column: 1 / -1;
    padding: 0.5rem 0;
}

/* ── Ad Slot Placeholder — premium "Advertise With Us" ── */
.ad-slot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    background: #fafaf8;
    border: 1.5px dashed rgba(177,18,38,.45);
    border-radius: 4px;
    transition: border-color .2s ease, background .2s ease;
    overflow: hidden;
    box-sizing: border-box;
}
.ad-slot-placeholder:hover {
    border-color: rgba(177,18,38,.8);
    background: #fdf9ef;
}

/* Variant heights */
.ad-slot-placeholder--leaderboard {
    min-height: 90px;
    max-height: 100px;
    max-width: 970px;
}
.ad-slot-placeholder--strip {
    min-height: 70px;
    max-height: 90px;
    max-width: 970px;
}
.ad-slot-placeholder--rectangle {
    min-height: 250px;
    max-width: 300px;
}
.ad-slot-placeholder--sidebar {
    min-height: 250px;
    max-width: 300px;
}
.ad-slot-placeholder--native {
    min-height: 90px;
    max-height: 120px;
}
.ad-slot-placeholder--inline {
    min-height: 70px;
    max-height: 90px;
    max-width: 970px;
}

/* Placeholder inner layout */
.ad-slot-placeholder-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
}
.ad-slot-placeholder--rectangle .ad-slot-placeholder-inner,
.ad-slot-placeholder--sidebar .ad-slot-placeholder-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
}

/* Icon */
.ad-slot-placeholder-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: rgba(177,18,38,.7);
}
.ad-slot-placeholder--rectangle .ad-slot-placeholder-icon,
.ad-slot-placeholder--sidebar .ad-slot-placeholder-icon {
    width: 36px;
    height: 36px;
}

/* Text group */
.ad-slot-placeholder-texts { min-width: 0; }
.ad-slot-placeholder-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy, #071a2d);
    margin-bottom: 0.15rem;
}
.ad-slot-placeholder-sub {
    display: block;
    font-size: 0.65rem;
    color: var(--muted, #6b7280);
    line-height: 1.3;
}
.ad-slot-placeholder-size {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.58rem;
    letter-spacing: .08em;
    color: rgba(177,18,38,.8);
    font-weight: 600;
}

/* Sidebar ad bottom wrapper */
.np-sidebar-ad-wrap--btm {
    margin-top: 1.5rem;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .np-page-wrap {
        grid-template-columns: 1fr;
    }
    .np-page-sidebar {
        display: none;
    }
}
@media (max-width: 768px) {
    .sponsor-grid--three {
        grid-template-columns: repeat(2, 1fr);
    }
    .ad-zone--leaderboard,
    .ad-zone--strip,
    .ad-zone--before-related,
    .ad-zone--footer-sponsor {
        padding: 0.65rem 0;
    }
    .ad-slot-placeholder--leaderboard,
    .ad-slot-placeholder--strip,
    .ad-slot-placeholder--inline {
        min-height: 60px;
        max-height: 70px;
    }
    .ad-slot-placeholder-title { font-size: 0.65rem; }
    .ad-slot-placeholder-sub { display: none; }
    .ad-slot-placeholder-icon { width: 20px; height: 20px; }
}
@media (max-width: 480px) {
    .sponsor-grid--three {
        grid-template-columns: 1fr;
    }
    .ad-slot-placeholder--native {
        min-height: 70px;
    }
}

/* ══════════════════════════════════════════════════════
   PHASE 32 — ADVERTISE PAGE
   ══════════════════════════════════════════════════════ */

/* Why section */
.adv-why { margin-bottom: 2.5rem; }
.adv-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.75rem;
    padding: 1.5rem;
    background: #f8f7f3;
    border-radius: 6px;
    border: 1px solid var(--border, #e5e7eb);
}
.adv-stat { text-align: center; }
.adv-stat-num {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold, #c9a24a);
    line-height: 1;
    margin-bottom: 0.35rem;
}
.adv-stat-lbl {
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Ad format cards */
.np-ad-formats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}
.np-ad-card {
    padding: 1.5rem;
    background: var(--white, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    position: relative;
    transition: box-shadow .2s ease;
}
.np-ad-card:hover {
    box-shadow: 0 4px 18px rgba(7,26,45,.07);
}
.np-ad-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy, #071a2d);
    margin: 0 0 0.6rem;
}
.np-ad-card p {
    font-size: 0.85rem;
    color: var(--muted, #6b7280);
    line-height: 1.55;
    margin: 0 0 0.75rem;
}
.np-ad-card--featured {
    border-color: rgba(177,18,38,.5);
    background: #fdf9ef;
}
.np-ad-card-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold, #c9a24a);
    border: 1px solid rgba(177,18,38,.5);
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
    margin-bottom: 0.65rem;
}

/* Slot list inside card */
.adv-slot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.adv-slot-list li {
    font-size: 0.78rem;
    color: var(--navy, #071a2d);
    padding-inline-start: 1rem;
    position: relative;
}
.adv-slot-list li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    color: var(--gold, #c9a24a);
    font-size: 0.75rem;
}

/* Technical specs table */
.adv-specs { margin: 2rem 0; }
.adv-specs-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
    margin: 1rem 0;
}
.adv-spec-row {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.adv-spec-row:last-child { border-bottom: none; }
.adv-spec-row:nth-child(even) { background: #f8f7f3; }
.adv-spec-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy, #071a2d);
}
.adv-spec-size {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gold, #c9a24a);
    font-family: monospace;
    text-align: center;
}
.adv-spec-fmt {
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
}
.adv-specs-note {
    font-size: 0.78rem;
    color: var(--muted, #6b7280);
    margin-top: 0.5rem;
}

/* CTA section */
.np-ad-cta {
    padding: 2rem;
    background: var(--navy, #071a2d);
    color: #fff;
    border-radius: 8px;
    text-align: center;
    margin-top: 2.5rem;
}
.np-ad-cta h2 {
    color: #fff;
    margin-top: 0;
}
.np-ad-cta p {
    color: rgba(255,255,255,.75);
    margin-bottom: 1.5rem;
}
.adv-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.adv-cta-email {
    background: var(--gold, #c9a24a) !important;
    color: var(--navy, #071a2d) !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
}
.adv-cta-email:hover {
    background: #b8913e !important;
}
.adv-cta-contact {
    display: inline-block;
    padding: .85rem 2rem;
    border: 1.5px solid rgba(255,255,255,.35);
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: border-color .2s ease, background .2s ease;
}
.adv-cta-contact:hover {
    border-color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.08);
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .np-ad-formats { grid-template-columns: 1fr; }
    .adv-stats { grid-template-columns: 1fr; gap: 1rem; }
    .adv-spec-row { grid-template-columns: 1fr 90px; }
    .adv-spec-fmt { display: none; }
    .adv-cta-row { flex-direction: column; }
    .np-ad-cta { padding: 1.5rem 1rem; }
}

/* ══════════════════════════════════════════════════════
   PHASE 38 — AD PACKAGES & BOOKING FORM
   ══════════════════════════════════════════════════════ */

/* Package price display */
.adv-pkg-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.6rem 0 0.85rem;
}
.adv-pkg-price-amount {
    font-size: 1.55rem;
    font-weight: 900;
    color: var(--navy, #071A2D);
    letter-spacing: -.03em;
}
/* was #c9a24a — 2.28:1 on the #fdf9ef featured card. Gold at full
   brightness cannot carry text on a light ground; this is the darker
   gold reserved for that. 4.62:1. */
.np-ad-card--featured .adv-pkg-price-amount { color: var(--accent-gold-text, #8c6d1c); }
.adv-pkg-price-duration {
    font-size: 0.78rem;
    color: var(--muted, #888);
    font-weight: 400;
}

/* Book Now button on card */
.adv-pkg-book {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.4rem;
    background: var(--navy, #071A2D);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 3px;
    text-decoration: none;
    transition: background .2s ease, transform .15s ease;
}
.adv-pkg-book:hover {
    background: #0a2040;
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}
.np-ad-card--featured .adv-pkg-book {
    background: var(--gold, #c9a24a);
    color: #03111F;
}
.np-ad-card--featured .adv-pkg-book:hover {
    background: #dbb95c;
    color: #03111F;
}

/* Booking inquiry form */
.adv-booking-form {
    margin-top: 1.75rem;
    padding: 1.75rem 2rem;
    background: #fafaf8;
    border: 1px solid #e8e5e0;
    border-radius: 6px;
    border-top: 3px solid var(--gold, #c9a24a);
}
.adv-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.adv-form-field--full { grid-column: 1 / -1; }
.adv-form-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #888);
    margin-bottom: 0.35rem;
}
.adv-form-field input,
.adv-form-field select,
.adv-form-field textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    border: 1px solid #dddad5;
    border-radius: 4px;
    background: #fff;
    color: var(--text, #1a202c);
    transition: border-color .18s;
    font-family: inherit;
    box-sizing: border-box;
}
.adv-form-field input:focus,
.adv-form-field select:focus,
.adv-form-field textarea:focus {
    outline: none;
    border-color: var(--gold, #c9a24a);
    box-shadow: 0 0 0 3px rgba(177,18,38,.1);
}
.adv-form-field textarea { resize: vertical; line-height: 1.55; }

@media (max-width: 600px) {
    .adv-form-grid { grid-template-columns: 1fr; }
    .adv-booking-form { padding: 1.25rem 1rem; }
}

/* ══════════════════════════════════════════════════════
   PHASE 39 — ADVERTISE PAGE CONVERSION OPTIMISATION
   ══════════════════════════════════════════════════════ */

/* ── 1. CONVERSION HERO ── */
.adv-hero {
    position: relative;
    background: var(--navy, #071a2d);
    color: #fff;
    padding: 4.5rem 0 3.5rem;
    overflow: hidden;
}
.adv-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 80% 50%, rgba(177,18,38,.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 80% at 10% 80%, rgba(177,18,38,.07) 0%, transparent 55%);
    pointer-events: none;
}
.adv-hero-inner {
    position: relative;
    max-width: 780px;
}
.adv-hero-kicker {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold, #c9a24a);
    border: 1px solid rgba(177,18,38,.35);
    border-radius: 20px;
    padding: 0.28rem 0.9rem;
    margin-bottom: 1.1rem;
}
.adv-hero-headline {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -.02em;
}
.adv-hero-sub {
    font-size: 1rem;
    color: rgba(255,255,255,.72);
    line-height: 1.65;
    margin: 0 0 2rem;
    max-width: 620px;
}
.adv-hero-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.adv-hero-cta {
    display: inline-block;
    padding: 0.85rem 2rem;
    background: var(--gold, #c9a24a);
    color: #03111f;
    font-size: 0.9rem;
    font-weight: 800;
    border-radius: 4px;
    text-decoration: none;
    letter-spacing: .03em;
    transition: background .2s ease, transform .15s ease;
}
.adv-hero-cta:hover {
    background: #dbb95c;
    color: #03111f;
    transform: translateY(-1px);
    text-decoration: none;
}
.adv-hero-secondary {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border: 1.5px solid rgba(255,255,255,.28);
    border-radius: 4px;
    color: rgba(255,255,255,.85);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}
.adv-hero-secondary:hover {
    border-color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.06);
    color: #fff;
    text-decoration: none;
}

/* Hero stats bar */
.adv-hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.12);
}
.adv-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 2rem 0 0;
}
.adv-hero-stat:first-child { padding-left: 0; }
.adv-hero-stat-num {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--gold, #c9a24a);
    line-height: 1;
    letter-spacing: -.03em;
}
.adv-hero-stat-lbl {
    font-size: 0.7rem;
    color: rgba(255,255,255,.55);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}
.adv-hero-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.15);
    margin: 0 2rem 0 0;
    flex-shrink: 0;
}

/* ── 2. TRUST BLOCK ── */
.adv-trust {
    background: #f8f7f3;
    border-top: 1px solid var(--border, #e5e7eb);
    border-bottom: 1px solid var(--border, #e5e7eb);
    padding: 1.35rem 0;
}
.adv-trust-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted, #9ca3af);
    text-align: center;
    margin: 0 0 1rem;
}
.adv-trust-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.adv-trust-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.1rem;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 4px;
    min-width: 72px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.adv-trust-logo:hover {
    border-color: rgba(177,18,38,.5);
    box-shadow: 0 2px 8px rgba(7,26,45,.05);
}
.adv-trust-logo span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--navy, #071a2d);
    opacity: .55;
}

/* ── 3. BENEFITS ── */
.adv-benefits {
    padding: 3.5rem 0;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.adv-benefits-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--navy, #071a2d);
    text-align: center;
    margin: 0 0 2rem;
    letter-spacing: -.02em;
}
.adv-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.adv-benefit-card {
    padding: 1.75rem 1.5rem;
    background: #f8f7f3;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.adv-benefit-card:hover {
    box-shadow: 0 6px 22px rgba(7,26,45,.07);
    border-color: rgba(177,18,38,.4);
}
.adv-benefit-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(177,18,38,.1);
    border-radius: 8px;
    color: var(--gold, #c9a24a);
    margin-bottom: 1rem;
}
.adv-benefit-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy, #071a2d);
    margin: 0 0 0.65rem;
}
.adv-benefit-card p {
    font-size: 0.83rem;
    color: var(--muted, #6b7280);
    line-height: 1.6;
    margin: 0;
}

/* ── 4. PACKAGES SECTION ── */
.adv-packages-section {
    padding: 3.5rem 0;
    background: #f6f4ef;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.adv-section-hd {
    text-align: center;
    margin-bottom: 2rem;
}
.adv-section-hd h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--navy, #071a2d);
    margin: 0 0 0.5rem;
    letter-spacing: -.02em;
}
.adv-section-sub {
    font-size: 0.9rem;
    color: var(--muted, #6b7280);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
}
.adv-success-msg {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 6px;
    font-size: 0.88rem;
    color: #166534;
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.adv-success-msg svg { flex-shrink: 0; color: var(--up, #0e7a55); }

/* Package grid */
.adv-pkg-grid {
    grid-template-columns: repeat(3, 1fr);
}
.adv-pkg-card {
    position: relative;
    overflow: visible;
}
.adv-pkg-card--popular {
    border-color: rgba(177,18,38,.6) !important;
    box-shadow: 0 8px 30px rgba(177,18,38,.15);
}
.adv-pkg-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold, #c9a24a);
    color: #03111f;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 0.28rem 0.9rem;
    border-radius: 20px;
    white-space: nowrap;
}
.adv-pkg-exposure {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold, #c9a24a);
    margin-bottom: 0.4rem;
}
.adv-pkg-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy, #071a2d);
    margin: 0 0 0.1rem;
}
.adv-pkg-impressions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
    margin-bottom: 0.5rem;
}
.adv-pkg-impressions svg { color: var(--gold, #c9a24a); flex-shrink: 0; }
.adv-pkg-desc {
    font-size: 0.82rem;
    color: var(--muted, #6b7280);
    line-height: 1.55;
    margin: 0.5rem 0;
}
.adv-pkg-price--contact {
    font-size: 1.1rem !important;
    color: var(--muted, #6b7280) !important;
    font-weight: 700 !important;
}
.adv-pkg-urgency {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 3px;
    padding: 0.3rem 0.65rem;
    margin-top: 0.85rem;
}
.adv-pkg-urgency svg { flex-shrink: 0; }
.adv-pkg-urgency--soft {
    color: var(--muted, #6b7280);
    background: #f8f7f3;
    border-color: var(--border, #e5e7eb);
}

/* ── 5. SPECS SECTION ── */
.adv-specs-section {
    padding: 3rem 0;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
}

/* ── 6. BOOKING SECTION ── */
.adv-booking-section {
    padding: 4rem 0;
    background: var(--navy, #071a2d);
}
.adv-booking-section h2,
.adv-booking-section h3 { color: #fff; }
.adv-booking-wrap {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3rem;
    align-items: start;
}
.adv-booking-form-col { min-width: 0; }

/* Form header copy */
.adv-form-eyebrow {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold, #c9a24a);
    margin-bottom: 0.75rem;
}
.adv-form-headline {
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff !important;
    margin: 0 0 0.75rem;
    letter-spacing: -.02em;
}
.adv-form-sub {
    font-size: 0.88rem;
    color: rgba(255,255,255,.65);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.adv-form-errors {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: #991b1b;
}
.adv-form-errors div + div { margin-top: 0.3rem; }

/* Override booking form for dark context */
.adv-booking-section .adv-booking-form {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    border-top-color: var(--gold, #c9a24a);
}
.adv-booking-section .adv-form-field label {
    color: rgba(255,255,255,.5);
}
.adv-booking-section .adv-form-field input,
.adv-booking-section .adv-form-field select,
.adv-booking-section .adv-form-field textarea {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
    color: #fff;
}
.adv-booking-section .adv-form-field input::placeholder,
.adv-booking-section .adv-form-field textarea::placeholder {
    color: rgba(255,255,255,.35);
}
.adv-booking-section .adv-form-field select option {
    background: #071a2d;
    color: #fff;
}
.adv-booking-section .adv-form-field input:focus,
.adv-booking-section .adv-form-field select:focus,
.adv-booking-section .adv-form-field textarea:focus {
    border-color: var(--gold, #c9a24a);
    box-shadow: 0 0 0 3px rgba(177,18,38,.15);
}

/* Submit row */
.adv-form-submit-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}
.adv-form-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    background: var(--gold, #c9a24a);
    color: #03111f;
    font-size: 0.9rem;
    font-weight: 800;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: .03em;
    transition: background .2s ease, transform .15s ease;
    font-family: inherit;
}
.adv-form-submit-btn:hover {
    background: #dbb95c;
    transform: translateY(-1px);
}
.adv-form-response-time {
    font-size: 0.75rem;
    color: rgba(255,255,255,.45);
    font-style: italic;
}

/* Right trust column */
.adv-booking-trust-col { min-width: 0; }
.adv-booking-trust-card {
    padding: 1.75rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
}
.adv-booking-trust-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff !important;
    margin: 0 0 1rem;
}
.adv-trust-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.adv-trust-checklist li {
    font-size: 0.82rem;
    color: rgba(255,255,255,.72);
    padding-inline-start: 1.4rem;
    position: relative;
    line-height: 1.45;
}
.adv-trust-checklist li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    color: var(--gold, #c9a24a);
    font-weight: 700;
    font-size: 0.8rem;
}
.adv-booking-contact {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.adv-booking-contact p {
    font-size: 0.78rem;
    color: rgba(255,255,255,.45);
    margin: 0 0 0.5rem;
}
.adv-booking-email {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold, #c9a24a);
    text-decoration: none;
    transition: color .18s ease;
}
.adv-booking-email:hover {
    color: #dbb95c;
    text-decoration: none;
}

/* ── 7. STICKY CTA ── */
.adv-sticky-cta {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999;
    transition: opacity .3s ease, transform .3s ease;
}
.adv-sticky--hidden {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}
.adv-sticky-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--navy, #071a2d);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(7,26,45,.35), 0 0 0 2px rgba(177,18,38,.4);
    letter-spacing: .03em;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.adv-sticky-btn:hover {
    background: #0a2040;
    box-shadow: 0 6px 28px rgba(7,26,45,.45), 0 0 0 2px rgba(177,18,38,.7);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}
.adv-sticky-btn svg { color: var(--gold, #c9a24a); flex-shrink: 0; }

/* ── Phase 39 responsive ── */
@media (max-width: 1024px) {
    .adv-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .adv-pkg-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .adv-booking-wrap { grid-template-columns: 1fr; gap: 2rem; }
    .adv-booking-trust-col { max-width: 480px; }
}
@media (max-width: 768px) {
    .adv-hero { padding: 3rem 0 2.5rem; }
    .adv-hero-headline { font-size: 1.6rem; }
    .adv-hero-stats { flex-wrap: wrap; gap: 1.2rem; padding-top: 1.5rem; }
    .adv-hero-stat-divider { display: none; }
    .adv-hero-stat { padding: 0; }
    .adv-hero-stat-num { font-size: 1.4rem; }
    .adv-trust-logos { gap: 0.75rem; }
    .adv-benefits { padding: 2.5rem 0; }
    .adv-benefits-grid { grid-template-columns: 1fr; gap: 1rem; }
    .adv-packages-section { padding: 2.5rem 0; }
    .adv-pkg-grid { grid-template-columns: 1fr !important; }
    .adv-booking-section { padding: 2.5rem 0; }
    .adv-booking-wrap { gap: 1.5rem; }
    .adv-form-submit-row { flex-direction: column; align-items: flex-start; }
    .adv-sticky-cta { bottom: 1rem; right: 1rem; }
}
@media (max-width: 480px) {
    .adv-hero-actions { flex-direction: column; align-items: flex-start; }
    .adv-hero-cta, .adv-hero-secondary { width: 100%; text-align: center; }
    .adv-booking-trust-col { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════
   RELEASE HARDENING — no ad creative may ever break layout
   (appended last so it wins the cascade)
   ══════════════════════════════════════════════════════ */

/* Base slot: line-height:0 (set above for tight images) collapses TEXT
   creatives onto each other — restore normal flow for HTML/text ads. */
.ad-slot { line-height: normal; box-sizing: border-box; max-width: 100%; }
.ad-slot .ad-link,
.ad-slot > a > img,
.ad-slot > img { line-height: 0; }

/* Clamp anything an arbitrary HTML creative can throw at the slot. */
.ad-slot img,
.ad-slot iframe,
.ad-slot video,
.ad-slot canvas,
.ad-slot object,
.ad-slot embed,
.ad-slot table { max-width: 100% !important; height: auto; }
.ad-slot iframe { width: 100%; border: 0; }

/* Long unbroken strings / pasted markup must wrap, never overflow. */
.ad-slot,
.ad-slot * {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* Inline (in-article) ad: readable text, guaranteed footprint, centered. */
.ad-slot--inline {
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.ad-slot--inline > *:not(.ad-sponsored-label) {
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    line-height: 1.4;
}
.ad-slot--inline p { margin: 0 0 .5rem; }
.ad-slot--inline p:last-child { margin-bottom: 0; }

/* Rectangle / sidebar creatives stay inside their box. */
.ad-slot--rectangle,
.ad-slot--sidebar { overflow: hidden; margin-inline: auto; }

@media (max-width: 640px) {
    .ad-slot--inline { padding: 1rem 0.75rem; }
}

/* ── events.css ── */
/* ══════════════════════════════════════════════════════
   EVENTS SLIDER
   ══════════════════════════════════════════════════════ */

.ev-slider {
    position: relative;
    overflow: hidden;
    background: #0a1628;
    margin: 0;
}

.ev-slider-inner {
    position: relative;
    height: 320px;
}

/* Slides */
.ev-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.ev-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.ev-slide-bg {
    position: absolute;
    inset: 0;
    background-color: #0a1628;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease;
}

.ev-slide.is-active .ev-slide-bg {
    transform: scale(1.04);
}

.ev-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(10, 22, 40, 0.88) 0%,
        rgba(10, 22, 40, 0.55) 60%,
        rgba(10, 22, 40, 0.2) 100%
    );
}

/* Content */
.ev-slide-content {
    position: relative;
    z-index: 2;
    padding: 3rem 0;
    max-width: 640px;
}

body.lang-en .ev-slide-content {
    max-width: 600px;
}

.ev-label {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--gold, #c8a94a);
    color: #0a1628;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
    margin-bottom: 0.85rem;
}

.ev-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 0.65rem;
}

.ev-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,.78);
    line-height: 1.55;
    margin: 0 0 1.25rem;
    max-width: 520px;
}

.ev-cta {
    display: inline-block;
    padding: 0.65rem 1.6rem;
    background: var(--gold, #c8a94a);
    color: #0a1628;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.ev-cta:hover {
    background: #dbb95c;
    transform: translateY(-1px);
    text-decoration: none;
}

/* Arrows */
.ev-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.4);
    background: rgba(10,22,40,.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}

.ev-arrow:hover {
    background: rgba(200,169,74,.85);
    border-color: var(--gold, #c8a94a);
}

.ev-prev { inset-inline-start: 1.25rem; }
.ev-next { inset-inline-end: 1.25rem; }

/* Dots */
.ev-dots {
    position: absolute;
    bottom: 1rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

body.lang-ar .ev-dots {
    transform: translateX(50%);
}

.ev-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.5);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.ev-dot.is-active {
    background: var(--gold, #c8a94a);
    border-color: var(--gold, #c8a94a);
    transform: scale(1.3);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ev-slider-inner { height: 260px; }
    .ev-title { font-size: 1.35rem; }
    .ev-subtitle { display: none; }
    .ev-slide-content { padding: 2rem 0; }
}

@media (max-width: 480px) {
    .ev-slider-inner { height: 220px; }
    .ev-title { font-size: 1.1rem; }
    .ev-label { font-size: 0.6rem; }
    .ev-cta { padding: 0.5rem 1.1rem; font-size: 0.8rem; }
    .ev-arrow { width: 30px; height: 30px; }
}

/* ══════════════════════════════════════════════════════
   PHASE 31 — CONFERENCE LANDING UPGRADE
   ══════════════════════════════════════════════════════ */

/* Taller, more cinematic */
.ev-slider-inner { height: 380px; }

/* Stronger directional overlay — text always readable */
.ev-slide-overlay {
    background: linear-gradient(
        105deg,
        rgba(5, 14, 28, 0.93) 0%,
        rgba(5, 14, 28, 0.62) 52%,
        rgba(5, 14, 28, 0.22) 100%
    );
}

/* Content: more breathing room */
.ev-slide-content { padding: 3.5rem 0; }

/* Title: headline-weight */
.ev-title {
    font-size: 2.1rem !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    line-height: 1.14 !important;
    text-shadow: 0 2px 24px rgba(0,0,0,.45);
}

/* Subtitle: visible */
.ev-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,.82);
    line-height: 1.65;
    max-width: 500px;
}

/* Label: gold badge with glow */
.ev-label {
    font-size: 0.65rem !important;
    letter-spacing: .12em !important;
    padding: 0.28rem 0.85rem !important;
    box-shadow: 0 2px 10px rgba(177,18,38,.38);
    margin-bottom: 0.85rem !important;
}

/* CTA: glowing gold button */
.ev-cta {
    padding: 0.75rem 2rem !important;
    font-size: 0.88rem !important;
    letter-spacing: .04em !important;
    box-shadow: 0 4px 18px rgba(177,18,38,.4);
    transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease !important;
}
.ev-cta:hover {
    background: #e0c263 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 30px rgba(177,18,38,.68), 0 0 0 4px rgba(177,18,38,.14) !important;
    text-decoration: none;
}

/* Arrows: stronger visibility */
.ev-arrow {
    border-color: rgba(255,255,255,.35);
    background: rgba(5,14,28,.6);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ev-arrow:hover {
    background: rgba(177,18,38,.9);
    border-color: var(--gold, #c8a94a);
    box-shadow: 0 2px 12px rgba(177,18,38,.45);
}

/* Phase 31 responsive — use !important to override responsive.css load order */
@media (max-width: 768px) {
    .ev-slider-inner { height: 300px !important; }
    .ev-title        { font-size: 1.55rem !important; }
    .ev-slide-content { padding: 2.25rem 0 !important; }
    .ev-subtitle     { display: block !important; font-size: 0.88rem !important; }
}
@media (max-width: 480px) {
    .ev-slider-inner { height: 250px !important; }
    .ev-title        { font-size: 1.2rem !important; }
    .ev-cta          { padding: 0.6rem 1.4rem !important; }
    .ev-subtitle     { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   PHASE 34 — STATIC FALLBACK EVENT CARD
   Shown when homepage_event_promos table is empty.
   Uses same slider classes, deep navy + gold identity.
   ══════════════════════════════════════════════════════ */

/* Static card: richer gradient background */
.ev-slider--static .ev-slide-bg {
    background: linear-gradient(
        130deg,
        #010c18 0%,
        #03111F 40%,
        #071a2d 70%,
        #0a2440 100%
    );
}

/* Stronger overlay for static (no photo beneath) */
.ev-slider--static .ev-slide-overlay {
    background: linear-gradient(
        105deg,
        rgba(1, 12, 24, 0.75) 0%,
        rgba(1, 12, 24, 0.35) 65%,
        rgba(1, 12, 24, 0.08) 100%
    );
}

/* Decorative gold line at top */
.ev-slider--static {
    border-top: 3px solid rgba(177,18,38,.45);
}

/* CTA button: outlined variant for newsletter style */
.ev-slider--static .ev-cta {
    background: transparent !important;
    border: 1.5px solid rgba(177,18,38,.75);
    color: var(--gold, #c9a24a) !important;
    box-shadow: none !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
.ev-slider--static .ev-cta:hover {
    background: var(--gold, #c9a24a) !important;
    color: #03111F !important;
    border-color: var(--gold, #c9a24a);
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 18px rgba(177,18,38,.35) !important;
}

/* Subtle animated gold shimmer accent (decorative) */
.ev-slider--static .ev-slider-inner::before {
    content: '';
    position: absolute;
    inset-inline-end: 8%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent 10%, rgba(177,18,38,.18) 45%, transparent 90%);
    pointer-events: none;
    z-index: 1;
}
.ev-slider--static .ev-slider-inner::after {
    content: '';
    position: absolute;
    inset-inline-end: 14%;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(177,18,38,.1), transparent);
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 768px) {
    .ev-slider--static .ev-cta { display: inline-block !important; }
}

/* ── responsive.css ── */
/* ================================================================
   RESPONSIVE  — Phase 29 Comprehensive Mobile
   Breakpoints: 1200 / 992 / 768 / 480
   Sections: topbar · header · nav · breaking-bar · hero ·
             top-stories · editorial-grid · most-read · events ·
             article · media · modal · footer · ads
   ================================================================ */

/* ── Global: no element ever overflows the viewport ── */
* { max-width: 100%; }
img, video, iframe, table { max-width: 100%; }

/* ── Container: consistent horizontal padding on all screens ── */
.container {
    width: 100%;
    padding-inline: 1rem;
}
@media (min-width: 768px) {
    .container { padding-inline: 1.25rem; }
}
@media (min-width: 1024px) {
    .container { padding-inline: 1.5rem; }
}


/* ================================================================
   1200px — slight compression
   ================================================================ */
@media (max-width: 1200px) {
    .hdr-wing-name { font-size: 0.78rem; }
    .topbar-markets { gap: 1.25rem; }
}


/* ================================================================
   992px — tablet
   ================================================================ */
@media (max-width: 992px) {
    /* Header */
    .hdr-wing-name  { font-size: 0.74rem; }
    .hdr-wing-sup   { font-size: 0.6rem; }
    .hdr-logo-text  { font-size: 1.65rem; }
    .hdr-inner      { gap: 0.75rem; }

    /* Nav: tighter items */
    .nav-list li a  { padding: 0 0.7rem; font-size: 0.8rem; }

    /* Top stories: already handled via 992px in homepage.css */
}


/* ================================================================
   768px — mobile
   ================================================================ */
@media (max-width: 768px) {

    /* ─── TOPBAR ─── */
    .topbar { height: auto; overflow: visible; }
    .topbar-inner {
        height: var(--topbar-h);
        gap: 0.5rem;
        overflow: hidden;
    }
    .topbar-ticker-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex: 1;
        min-width: 0;
    }
    .topbar-ticker-wrap::-webkit-scrollbar { display: none; }
    .topbar-markets { gap: 0.85rem; padding-inline-end: 0.5rem; white-space: nowrap; }
    .topbar-date    { display: none; }
    .topbar-sep     { display: none; }

    /* ─── HEADER ─── */
    .hdr-wing   { display: none; }
    .hdr-inner  {
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 52px;
        gap: 0;
        padding: 0.35rem 0;
    }
    .hdr-logo-text  { font-size: 1.65rem; }
    .hdr-brand      { padding: 0; }
    .hdr-brand-divider { width: 28px; margin: 0.28rem auto; }

    /* ─── NAV: hamburger ─── */
    .nav-toggle { display: flex; }
    .nav-list {
        display: none;
        position: absolute;
        top: var(--nav-h);
        inset-inline-start: 0;
        inset-inline-end: 0;
        background: var(--navy);
        flex-direction: column;
        align-items: stretch;
        z-index: 200;
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 4px 20px rgba(0,0,0,.35);
        max-height: calc(100vh - var(--topbar-h) - var(--header-h) - var(--nav-h));
        overflow-y: auto;
    }
    .nav-list.is-open { display: flex; }
    .nav-list li a {
        height: auto;
        padding: 0.85rem 1.25rem;
        font-size: 0.9rem;
        border-bottom: 1px solid rgba(255,255,255,.05);
        border-bottom-color: rgba(255,255,255,.05) !important;
    }
    .nav-list li a.is-active {
        background: rgba(177,18,38,.08);
        color: var(--accent);
    }
    /* Hamburger X animation */
    .nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* Search icon: keep accessible */
    body.lang-ar .nav-search { left: 3rem; right: auto; }
    body.lang-en .nav-search { right: 3rem; left: auto; }

    /* ─── BREAKING BAR ─── */
    .breaking-bar {
        height: 36px;
        font-size: 0.72rem;
    }
    .brk-label { padding: 0 0.6rem; font-size: 0.54rem; }
    .brk-item  { font-size: 0.72rem; padding: 0 0.75rem; }

    /* ─── HERO SLIDER ─── */
    .hero-slider  { height: 340px; }
    .hero-side    { display: none; }
    .hero-main    { flex: 0 0 100%; }
    .hero-title   { font-size: 1.35rem; line-height: 1.25; }
    .hero-excerpt { font-size: 0.82rem; -webkit-line-clamp: 2; }
    .hero-content { padding: 1.25rem 1.25rem; }
    .hero-prev    { left: 0.6rem; }
    .hero-next    { left: auto; right: 0.6rem; }
    .hero-dots    { left: 50%; transform: translateX(-50%); }
    .hero-arrow   { width: 30px; height: 30px; }
    body.lang-ar .hero-dots { transform: translateX(50%); }

    /* ─── TOP STORIES ─── */
    .ts-digest { grid-template-columns: 1fr !important; }
    .ts-col--side:last-child { display: block; }
    .ts-col {
        padding: 0;
        border-inline-end: none;
        border-bottom: 1px solid var(--border);
        padding-bottom: 0.85rem;
        margin-bottom: 0.85rem;
    }
    .ts-col:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
    .ts-col--center { padding: 0; }
    .ts-feat-img { aspect-ratio: 16/9; }

    /* ─── EDITORIAL GRID ─── */
    .eg-section     { padding: 1.25rem 0; }
    .eg-fm-layout   { grid-template-columns: 1fr; }
    .eg-macro-layout { grid-template-columns: 1fr; }
    .eg-card-horiz  { flex-direction: column; }
    .eg-thumb       { width: 100% !important; height: auto !important; aspect-ratio: 16/9; }
    .eg-row-3       { grid-template-columns: repeat(2, 1fr); }
    .eg-grid-2x2    { grid-template-columns: repeat(2, 1fr); }

    /* Override inline height on editorial-grid card images */
    .eg-card-img[style*="height"] {
        height: auto !important;
        aspect-ratio: 16/9;
    }
    .eg-feature .eg-card-img,
    .eg-feature-lg .eg-card-img { height: auto !important; aspect-ratio: 16/9; }

    /* ─── MOST READ ─── */
    .mr-list { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .mr-item { padding: 0 0; border-inline-end: none; }
    .mr-num  { font-size: 1.5rem; }

    /* ─── EVENTS SLIDER ─── */
    .ev-slider-inner { height: 260px; }
    .ev-title   { font-size: 1.3rem; }
    .ev-subtitle { display: none; }

    /* ─── ARTICLE PAGE ─── */
    .np-art-header  { padding: 1.75rem 0 1.5rem; }
    .np-art-title   { font-size: 1.55rem !important; letter-spacing: -.02em; }
    .np-art-subtitle { font-size: 0.92rem; }
    .np-art-figure img { max-height: 240px; }
    .np-art-layout  { grid-template-columns: 1fr !important; padding-top: 1.25rem; }
    .np-art-sidebar { position: static; }
    .np-art-body    { font-size: 0.96rem; line-height: 1.72; }
    .np-art-body h2 { font-size: 1.15rem; }
    .np-art-body h3 { font-size: 0.98rem; }
    .np-art-related-grid { grid-template-columns: 1fr 1fr; }
    .np-art-share   { flex-wrap: wrap; gap: 0.5rem; }

    /* ─── MEDIA / VIDEO / PODCAST ─── */
    .media-section-grid { grid-template-columns: 1fr; }
    .media-section  { padding: 1.25rem 0; }
    .fv-block       { padding: 1.25rem 0; }
    .fv-layout      { grid-template-columns: 1fr !important; }
    .fv-featured    { min-height: 220px !important; max-height: 300px !important; }
    .fv-play-ring svg { width: 52px !important; height: 52px !important; }
    .fv-stack       { flex-direction: column; overflow-y: visible; max-height: none; }
    .fv-stack-item  { flex: 1 1 100%; }
    .pod-layout     { grid-template-columns: 1fr !important; }
    .pod-grid-2     { flex-direction: column; }
    .pod-thumb      { flex: 0 0 60px; width: 60px; height: 60px; }

    /* ─── YOUTUBE MODAL ─── */
    .yt-modal       { padding: 0.5rem; align-items: flex-end; }
    .yt-modal-inner { max-width: 100%; border-radius: 8px 8px 0 0; }
    .yt-modal.is-pip .yt-modal-inner { width: 220px !important; }

    /* ─── FOOTER ─── */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        padding: 1.75rem 0 1.25rem;
    }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p { max-width: 100%; }

    /* ─── ADS ─── */
    .ad-rail-inner  { flex-direction: column; }
    .ad-rail-tiles  { flex-direction: row; }
    .ad-row-3-inner { flex-direction: column; gap: 0.5rem; }
    .ad-wrap--banner img,
    .ad-wrap--leaderboard img { max-height: 90px !important; }

    /* ─── PAGE INTRO ─── */
    .page-intro   { padding: 2rem 0 1.5rem; }
    .page-intro h1 { font-size: 1.25rem; }
    .np-index-grid { grid-template-columns: 1fr !important; }
}


/* ================================================================
   480px — small mobile
   ================================================================ */
@media (max-width: 480px) {

    /* ─── TOPBAR ─── */
    .topbar-inner   { height: 32px; }
    .mkt-item       { font-size: 0.67rem; gap: 0.18rem; }
    .mkt-val        { font-size: 0.67rem; }
    .mkt-chg        { display: none; }

    /* ─── HEADER ─── */
    .hdr-inner      { min-height: 46px; }
    .hdr-logo-text  { font-size: 1.45rem; }
    .hdr-newsroom   { font-size: 0.57rem; letter-spacing: .07em; }
    .hdr-brand-divider { width: 24px; }

    /* ─── HERO ─── */
    .hero-slider    { height: 300px; }
    .hero-title     { font-size: 1.2rem; }
    .hero-excerpt   { display: none; }
    .hero-content   { padding: 0.9rem 1rem; }
    .hero-badge     { font-size: 0.6rem; }
    .hero-meta      { font-size: 0.68rem; }

    /* ─── EDITORIAL GRID ─── */
    .eg-row-4       { grid-template-columns: 1fr; }
    .eg-grid-2x2    { grid-template-columns: 1fr; }
    .eg-row-3       { grid-template-columns: 1fr; }
    .eg-fm-layout   { gap: 0.85rem; }

    /* ─── MOST READ ─── */
    .mr-list        { grid-template-columns: 1fr; }

    /* ─── EVENTS ─── */
    .ev-slider-inner { height: 220px; }
    .ev-title       { font-size: 1.05rem; }
    .ev-label       { font-size: 0.6rem; }
    .ev-cta         { padding: 0.5rem 1rem; font-size: 0.8rem; }
    .ev-arrow       { width: 28px; height: 28px; }

    /* ─── ARTICLE ─── */
    .np-art-title   { font-size: 1.35rem !important; }
    .np-art-related-grid { grid-template-columns: 1fr; }
    .np-art-share   { flex-wrap: wrap; }

    /* ─── MODAL ─── */
    .yt-modal.is-pip .yt-modal-inner { width: 180px !important; }

    /* ─── FOOTER ─── */
    .footer-grid    { grid-template-columns: 1fr; }
    .footer-brand   { grid-column: 1; }

    /* ─── ADS ─── */
    .ad-rail-tiles  { flex-direction: column; }
    .ad-wrap--banner img,
    .ad-wrap--leaderboard img { max-height: 75px !important; }
}


/* ================================================================
   RTL overrides — mobile nav
   ================================================================ */
body.lang-ar .nav-list {
    inset-inline-start: 0;
    inset-inline-end: 0;
}
body.lang-ar .nav-toggle { right: 1.25rem; left: auto; }
body.lang-en .nav-toggle { left: 1.25rem; right: auto; }

/* ─── RTL hero dots ─── */
body.lang-ar .hero-dots  { left: auto; inset-inline-start: 50%; }