/* ============================================================
   AINews.AI — style.css (Combined)
   Covers ALL pages:
     • index.html (homepage)
     • llms, research, policy, products, funding
     • robotics, opensource, hardware, agents
     • events, podcasts, originals
     • news-detail (article page)
   ============================================================ */

/* ── GOOGLE FONTS ──────────────────────────────────────────── */
/* Playfair Display 700/800/900 | Barlow 300/400/500/600/700   */
/* Barlow Condensed 600/700/800                                  */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* ── Core Colors ── */
  --white:         #ffffff;
  --off-white:     #f7f8fc;
  --light:         #eef0f7;
  --border:        #e2e5ef;
  --border-mid:    #c8cde0;
  --border-2:      #edf0f7;

  /* ── Ink Scale ── */
  --ink:           #0d0f1a;
  --ink-2:         #1e2531;
  --ink-mid:       #3a3d52;
  --ink-muted:     #5a6477;
  --ink-light:     #7a7f9a;
  --ink-ghost:     #b0b5cc;

  /* ── Aliases (for news-detail page compatibility) ── */
  --bg:            var(--white);
  --bg-2:          var(--off-white);
  --bg-3:          var(--light);

  /* ── Blue ── */
  --blue:          #0057ff;
  --blue-mid:      #3d7fff;
  --blue-light:    #e8eeff;
  --blue-hover:    #0046cc;

  /* ── Green ── */
  --green:         #00b86b;
  --green-mid:     #00d47c;
  --green-light:   #e0faf0;

  /* ── Yellow ── */
  --yellow:        #f5c800;
  --yellow-mid:    #ffd60a;
  --yellow-light:  #fffbe0;
  --yellow-dark:   #a88600;

  /* ── Red ── */
  --red:           #e8002d;
  --red-light:     #ffeaee;

  /* ── Amber (article detail) ── */
  --amber:         #d97706;
  --amber-light:   #fff7e0;

  /* ── Utility Bar (article detail) ── */
  --util-bg:       #0d1117;
  --util-text:     #aab4c4;

  /* ── Height tokens (article detail) ── */
  --header-h:      60px;
  --nav-h:         44px;
  --ticker-h:      36px;
  --util-h:        32px;

  /* ── Typography ── */
  --font-head:     'Playfair Display', Georgia, serif;
  --font-body:     'Barlow', sans-serif;
  --font-cond:     'Barlow Condensed', sans-serif;

  /* ── Shadows & Radius ── */
  --shadow-sm:     0 1px 4px rgba(0,0,0,.07);
  --shadow-md:     0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.12);
  --radius:        6px;
  --radius-lg:     10px;
}

/* ── BASE RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; object-fit: cover; }

/* ============================================================ */
/* ── HOMEPAGE STYLES ───────────────────────────────────────── */
/* ============================================================ */

/* ── TOP UTILITY BAR ── */
  .utility-bar {
    background: var(--ink);
    color: var(--ink-ghost);
    font-family: var(--font-cond);
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 0;
    height: 34px;
  }
  .ub-date { color: #888caa; margin-right: auto; }
  .ub-links { display: flex; gap: 0; }
  .ub-links a {
    color: #888caa;
    padding: 0 14px;
    height: 34px;
    display: flex;
    align-items: center;
    border-left: 1px solid #1e2030;
    transition: color 0.2s;
  }
  .ub-links a:hover { color: var(--white); }
  .ub-subscribe {
    background: var(--blue);
    color: white !important;
    font-weight: 700;
    padding: 0 16px !important;
    border-left: none !important;
    border-radius: 0;
    transition: background 0.2s !important;
  }
  .ub-subscribe:hover { background: var(--blue-hover) !important; }

/* ── CLS Fix: Font fallback metrics ─────────────────────────
   Matches fallback font size to web font to prevent layout shift
   ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Playfair Display Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 97%;
  ascent-override: 90%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
  size-adjust: 104%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Condensed Fallback';
  src: local('Arial Narrow'), local('Arial'), local('sans-serif');
  size-adjust: 96%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}


  /* ── TICKER ── */
  .ticker-bar {
    background: var(--blue);
    display: flex;
    align-items: center;
    height: 32px;
    min-height: 32px;       /* ← reserve exact height — prevents CLS */
    overflow: hidden;
    position: relative;
    contain: strict;        /* ← tells browser layout won't change */
  }
  .ticker-label {
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
     position: relative; 
  z-index: 2;      
  }
  .ticker-scroll {
    display: flex;
    animation: tickerScroll 70s linear infinite;
    white-space: nowrap;
  }
  .ticker-scroll span {
    color: rgba(255,255,255,0.92);
    font-family: var(--font-body);
    font-size: 12px;
    padding: 0 24px;
    border-right: 1px solid rgba(255,255,255,0.2);
  }
  @keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* ── HEADER ── */
  header {
    background: var(--white);
    border-bottom: 3px solid var(--ink);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
  }
  .header-main {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    height: 64px;
    gap: 24px;
  }
  .logo {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--ink);
    flex-shrink: 0;
  }
  .logo em { font-style: italic; color: var(--blue); }
  .logo sup {
    font-family: var(--font-cond);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.1em;
    background: var(--green);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: super;
    margin-left: 4px;
  }

  .header-search {
    flex: 1;
    max-width: 360px;
    margin-left: auto;
    position: relative;
  }
  .header-search input {
    width: 100%;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 16px 8px 38px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s;
  }
  .header-search input:focus { border-color: var(--blue); background: white; }
  .header-search::before {
    content: '⌕';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-light);
    font-size: 18px;
  }
  .header-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }
  .btn-outline {
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--ink);
    border: 2px solid var(--border-mid);
    background: transparent;
    padding: 7px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-outline:hover { border-color: var(--ink); }
  .btn-blue {
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: white;
    background: var(--blue);
    border: 2px solid var(--blue);
    padding: 7px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-blue:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

  /* ── NAV ── */
  .nav-bar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 64px;
    z-index: 99;
  }
  .nav-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-inner::-webkit-scrollbar { display: none; }
  .nav-inner a {
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--ink-mid);
    padding: 12px 16px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
    text-transform: uppercase;
  }
  .nav-inner a:hover { color: var(--blue); }
  .nav-inner a.active { color: var(--blue); border-bottom-color: var(--blue); }

  /* ── PAGE WRAP ── */
  .page {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ── SECTION LABELS ── */
  .sec-label {
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
  }
  .sec-label .label-text { color: var(--ink-mid); }
  .sec-label .label-accent {
    background: var(--blue);
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
  }
  .sec-label .label-accent.green { background: var(--green); }
  .sec-label .label-accent.yellow { background: var(--yellow); color: var(--ink); }
  .sec-label .label-accent.red { background: var(--red); }
  .sec-label .see-all {
    margin-left: auto;
    font-weight: 600;
    color: var(--blue);
    font-size: 11px;
    transition: opacity 0.2s;
  }
  .sec-label .see-all:hover { opacity: 0.7; }

  /* ── HERO SECTION ── */
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto;
    gap: 2px;
    background: var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 24px 0 32px;
    box-shadow: var(--shadow-lg);
  }

  /* Main hero story */
  .hero-main {
    grid-row: 1 / 3;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--ink);
    min-height: 480px;
    contain: layout;        /* ← prevents shifts from affecting parent */
  }
  .hero-main img {
    aspect-ratio: 16 / 9;  /* ← reserve space before image loads */
  }
  .hero-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
    transition: opacity 0.4s, transform 0.4s;
  }
  .hero-main:hover img { opacity: 0.65; transform: scale(1.02); }
  .hero-main-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px;
    background: linear-gradient(to top, rgba(5,7,20,0.97) 0%, rgba(5,7,20,0.7) 60%, transparent 100%);
  }
  .story-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 3px;
  }
  .cat-blue { background: var(--blue); color: white; }
  .cat-green { background: var(--green); color: white; }
  .cat-yellow { background: var(--yellow); color: var(--ink); }
  .cat-red { background: var(--red); color: white; }
  .cat-outline-blue { border: 1px solid var(--blue); color: var(--blue); background: transparent; }
  .cat-outline-green { border: 1px solid var(--green); color: var(--green); background: transparent; }

  .hero-main h1 {
    font-family: var(--font-head);
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    color: white;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
  }
  .hero-main p {
    font-size: 14px;
    color: rgba(255,255,255,0.72);
    line-height: 1.6;
    margin-bottom: 12px;
    font-weight: 300;
  }
  .story-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    flex-wrap: wrap;
  }
  .meta-source { font-weight: 600; }
  .meta-source.blue { color: #6aa3ff; }
  .meta-source.green { color: #4ddba0; }
  .meta-time { color: rgba(255,255,255,0.45); }
  .meta-dot { color: rgba(255,255,255,0.25); }
  .meta-reactions {
    display: flex;
    gap: 8px;
    margin-left: auto;
  }
  .reaction-pill {
    background: rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* Hero side stories */
  .hero-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--border);
  }
  .hero-side-story {
    background: white;
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.2s;
    display: flex;
    flex-direction: column;
  }
  .hero-side-story:hover { background: var(--blue-light); }
  .hss-img {
    height: 130px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .hss-img img { height: 100%; transition: transform 0.3s; }
  .hero-side-story:hover .hss-img img { transform: scale(1.04); }
  .hss-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .hss-title {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
  }
  .hss-meta {
    font-size: 11px;
    color: var(--ink-light);
    margin-top: auto;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .hss-src { color: var(--blue); font-weight: 600; }

  /* ── MAIN CONTENT LAYOUT ── */
  .content-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
  }
  .main-col {}
  .side-col {}

  /* ── NEWS CARD STYLES ── */

  /* Horizontal card (image left) */
  .news-card-h {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
  }
  .news-card-h:first-of-type { padding-top: 0; }
  .news-card-h:hover { opacity: 0.85; }
  .nc-img {
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
    height: 120px;
    background: var(--light);
    position: relative;
  }
  .nc-img img { height: 100%; transition: transform 0.3s; }
  .news-card-h:hover .nc-img img { transform: scale(1.04); }
  .nc-body { display: flex; flex-direction: column; gap: 6px; }
  .nc-title {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    transition: color 0.2s;
  }
  .news-card-h:hover .nc-title { color: var(--blue); }
  .nc-desc {
    font-size: 13px;
    color: var(--ink-mid);
    line-height: 1.55;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--ink-light);
    margin-top: auto;
  }
  .nc-source { color: var(--blue); font-weight: 600; font-size: 11px; }
  .related-wrap {
    background: var(--off-white);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-top: 6px;
  }
  .related-label {
    font-family: var(--font-cond);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-ghost);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .related-link {
    display: block;
    font-size: 12px;
    color: var(--ink-mid);
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
    transition: color 0.15s;
  }
  .related-link:last-child { border-bottom: none; }
  .related-link:hover { color: var(--blue); }
  .related-link::before { content: '→ '; color: var(--blue); }

  /* Small news list item */
  .news-list-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .news-list-item:hover { opacity: 0.8; }
  .nli-img {
    width: 80px;
    height: 60px;
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--light);
  }
  .nli-img img { height: 100%; }
  .nli-body {}
  .nli-cat {
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  .nli-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .news-list-item:hover .nli-title { color: var(--blue); }
  .nli-meta { font-size: 11px; color: var(--ink-light); }

  /* ── FEATURED IMAGE STORY (Full width) ── */
  .card-full {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    margin-bottom: 24px;
    min-height: 240px;
    box-shadow: var(--shadow-md);
  }
  .card-full img {
    width: 100%;
    height: 240px;
    transition: transform 0.4s;
  }
  .card-full:hover img { transform: scale(1.02); }
  .card-full-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(5,7,20,0.92) 0%, transparent 100%);
    padding: 20px;
  }
  .card-full-title {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: white;
    line-height: 1.25;
    margin-top: 8px;
  }

  /* ── GRID CARDS ── */
  .cards-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
  }
  .cards-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
  }
  .card-v {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: box-shadow 0.25s, transform 0.25s;
    background: white;
  }
  .card-v:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
  }
  .card-v-img {
    height: 160px;
    overflow: hidden;
    background: var(--light);
  }
  .card-v-img img { height: 100%; transition: transform 0.3s; }
  .card-v:hover .card-v-img img { transform: scale(1.04); }
  .card-v-body { padding: 16px; }
  .card-v-title {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin: 8px 0 6px;
  }
  .card-v:hover .card-v-title { color: var(--blue); }
  .card-v-desc {
    font-size: 12px;
    color: var(--ink-mid);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-v-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--ink-light);
  }

  /* ── SECTION DIVIDERS ── */
  .section-rule {
    border: none;
    border-top: 2px solid var(--ink);
    margin: 32px 0 20px;
  }
  .section-rule.thin {
    border-width: 1px;
    border-color: var(--border);
    margin: 24px 0;
  }

  /* ── SIDEBAR WIDGETS ── */
  .widget {
    background: var(--off-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-bottom: 24px;
    overflow: hidden;
  }
  .widget-head {
    padding: 12px 16px;
    background: var(--ink);
    color: white;
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .widget-head.blue { background: var(--blue); }
  .widget-head.green { background: var(--green); }
  .widget-head.yellow { background: var(--yellow); color: var(--ink); }
  .widget-head a {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.7;
    letter-spacing: 0.08em;
    transition: opacity 0.2s;
  }
  .widget-head a:hover { opacity: 1; }
  .widget-head.yellow a { color: var(--ink); }
  .widget-body { padding: 14px 16px; }

  /* Trending */
  .trend-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .trend-row:last-child { border-bottom: none; padding-bottom: 0; }
  .trend-row:hover { opacity: 0.75; }
  .trend-rank {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 20px;
    color: var(--border-mid);
    line-height: 1;
    min-width: 24px;
    margin-top: 1px;
  }
  .trend-row:hover .trend-rank { color: var(--blue); }
  .trend-body {}
  .trend-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 3px;
  }
  .trend-row:hover .trend-title { color: var(--blue); }
  .trend-meta { font-size: 11px; color: var(--ink-light); display: flex; gap: 8px; }
  .trend-spike { color: var(--red); font-weight: 700; }

  /* Podcast widget */
  .pod-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: opacity 0.15s;
    align-items: flex-start;
  }
  .pod-item:last-child { border-bottom: none; }
  .pod-item:hover { opacity: 0.78; }
  .pod-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    flex-shrink: 0;
    overflow: hidden;
    background: var(--light);
    border: 1px solid var(--border);
  }
  .pod-thumb img { height: 100%; }
  .pod-body {}
  .pod-show {
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-light);
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .pod-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 3px;
  }
  .pod-meta { font-size: 10px; color: var(--ink-light); }
  .pod-platform {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 4px;
  }
  .pod-yt { background: #ffecec; color: #cc0000; }
  .pod-sp { background: #e7fdf1; color: #1db954; }

  /* Events widget */
  .ev-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: opacity 0.15s;
    align-items: flex-start;
  }
  .ev-item:last-child { border-bottom: none; }
  .ev-item:hover { opacity: 0.78; }
  .ev-date {
    flex-shrink: 0;
    width: 42px;
    text-align: center;
    background: var(--blue);
    border-radius: var(--radius);
    padding: 5px 4px;
    color: white;
  }
  .ev-date.yellow { background: var(--yellow); color: var(--ink); }
  .ev-date.green { background: var(--green); }
  .ev-month {
    font-family: var(--font-cond);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
    display: block;
  }
  .ev-day {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    display: block;
  }
  .ev-body {}
  .ev-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 2px;
    transition: color 0.2s;
  }
  .ev-item:hover .ev-name { color: var(--blue); }
  .ev-loc { font-size: 11px; color: var(--ink-light); }

  /* Ad sidebar */
  .ad-sidebar {
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    background: linear-gradient(145deg, #f0f4ff 0%, #fafbff 100%);
    margin-bottom: 24px;
    cursor: pointer;
    transition: box-shadow 0.2s;
  }
  .ad-sidebar:hover { box-shadow: var(--shadow-md); }
  .ad-tag {
    font-family: var(--font-cond);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--ink-ghost);
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
  }
  .ad-brand {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 8px;
  }
  .ad-text {
    font-size: 12px;
    color: var(--ink-mid);
    line-height: 1.55;
    margin-bottom: 14px;
  }
  .ad-btn {
    display: inline-block;
    background: var(--blue);
    color: white;
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 8px 20px;
    border-radius: var(--radius);
    transition: background 0.2s;
  }
  .ad-btn:hover { background: var(--blue-hover); }

  /* ── PODCAST STRIP ── */
  .podcast-section {
    background: var(--off-white);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 28px 0;
    margin: 32px -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .podcast-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
  }
  .pod-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.25s, transform 0.25s;
    display: flex;
    gap: 12px;
    padding: 14px;
    align-items: flex-start;
  }
  .pod-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .pod-card-thumb {
    width: 60px;
    height: 60px;
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--light);
    border: 1px solid var(--border);
  }
  .pod-card-thumb img { height: 100%; }
  .pod-card-body {}
  .pod-card-show {
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-light);
    text-transform: uppercase;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .pod-card-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 5px;
  }
  .pod-card:hover .pod-card-title { color: var(--blue); }
  .pod-card-meta { font-size: 10px; color: var(--ink-light); }

  /* ── EVENTS SECTION ── */
  .events-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 8px;
  }
  .event-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.25s, transform 0.25s;
    position: relative;
  }
  .event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .event-card-img {
    height: 110px;
    overflow: hidden;
    background: var(--light);
  }
  .event-card-img img { height: 100%; transition: transform 0.3s; }
  .event-card:hover .event-card-img img { transform: scale(1.04); }
  .event-card-body { padding: 14px; }
  .ec-date-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: var(--blue-light);
    border-radius: 4px;
    padding: 3px 8px;
    margin-bottom: 8px;
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 12px;
    color: var(--blue);
    letter-spacing: 0.04em;
  }
  .ec-date-badge.green { background: var(--green-light); color: var(--green); }
  .ec-date-badge.yellow { background: var(--yellow-light); color: var(--yellow-dark); }
  .ec-name {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 5px;
  }
  .event-card:hover .ec-name { color: var(--blue); }
  .ec-loc {
    font-size: 11px;
    color: var(--ink-light);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .ec-tags { display: flex; flex-wrap: wrap; gap: 4px; }
  .ec-tag {
    font-family: var(--font-cond);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid var(--border-mid);
    color: var(--ink-mid);
  }
  .ec-featured {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 9px;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: 3px;
  }
  .event-card-add {
    background: var(--off-white);
    border: 2px dashed var(--border-mid);
    border-radius: var(--radius-lg);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    gap: 8px;
    transition: border-color 0.2s;
  }
  .event-card-add:hover { border-color: var(--blue); }
  .event-card-add-icon { font-size: 26px; }
  .event-card-add-title {
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 13px;
    color: var(--ink-mid);
  }
  .event-card-add-sub { font-size: 11px; color: var(--ink-light); line-height: 1.4; }
  .event-card-add .btn-blue { font-size: 10px; padding: 6px 14px; margin-top: 4px; }

  /* ── ORIGINAL CONTENT BAND ── */
  .original-band {
    background: var(--ink);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 32px 0;
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 200px;
    box-shadow: var(--shadow-lg);
  }
  .ob-label-col {
    background: var(--blue);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .ob-title {
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 800;
    font-style: italic;
    color: white;
    line-height: 1.15;
  }
  .ob-sub { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 300; line-height: 1.5; }
  .ob-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    color: var(--blue);
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 8px 16px;
    border-radius: var(--radius);
    transition: opacity 0.2s;
  }
  .ob-cta:hover { opacity: 0.88; }
  .ob-articles {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-content: start;
  }
  .ob-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    padding: 14px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
  }
  .ob-card:hover { background: rgba(255,255,255,0.12); }
  .ob-type {
    font-family: var(--font-cond);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--yellow);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .ob-card-title {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    color: white;
    line-height: 1.3;
    margin-bottom: 8px;
  }
  .ob-card:hover .ob-card-title { color: #a8c7ff; }
  .ob-card-author { font-size: 10px; color: rgba(255,255,255,0.45); }

  /* ── AUTHORS GRID ── */
  .authors-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 8px;
  }
  .author-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.25s, transform 0.25s;
  }
  .author-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .author-avatar-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 20px;
    border: 2px solid var(--border);
  }
  .author-name {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
  }
  .author-card:hover .author-name { color: var(--blue); }
  .author-beat {
    font-size: 11px;
    color: var(--ink-light);
    margin-bottom: 8px;
    line-height: 1.35;
  }
  .author-count {
    font-family: var(--font-cond);
    font-size: 10px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.06em;
  }
  .author-card.add-author {
    border-style: dashed;
    border-color: var(--border-mid);
    background: var(--off-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .author-card.add-author:hover { border-color: var(--blue); }
  .author-card.add-author .icon { font-size: 24px; }

  /* ── ADVERTISE SECTION ── */
  .advertise-section {
    background: linear-gradient(135deg, var(--blue) 0%, #0040cc 100%);
    border-radius: var(--radius-lg);
    padding: 40px;
    margin: 32px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
  }
  .advertise-section::before {
    content: '';
    position: absolute;
    top: -40px;
    right: 80px;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
  }
  .advertise-section::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: 200px;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
  }
  .adv-left {}
  .adv-eyebrow {
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .adv-headline {
    font-family: var(--font-head);
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 800;
    color: white;
    line-height: 1.15;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
  }
  .adv-sub { font-size: 14px; color: rgba(255,255,255,0.72); font-weight: 300; line-height: 1.55; }
  .adv-stats {
    display: flex;
    gap: 24px;
    margin-top: 18px;
    flex-wrap: wrap;
  }
  .adv-stat { text-align: left; }
  .adv-stat-num {
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 900;
    color: var(--yellow);
    display: block;
    line-height: 1;
  }
  .adv-stat-label { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 2px; }
  .adv-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }
  .adv-btn-white {
    background: white;
    color: var(--blue);
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 13px 28px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
  }
  .adv-btn-white:hover { opacity: 0.9; }
  .adv-btn-ghost {
    background: transparent;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 12px 28px;
    border-radius: var(--radius);
    border: 2px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: border-color 0.2s;
    white-space: nowrap;
  }
  .adv-btn-ghost:hover { border-color: rgba(255,255,255,0.7); }

  /* ── NEWSLETTER ── */
  .newsletter-section {
    background: var(--yellow-light);
    border: 2px solid var(--yellow);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin: 32px 0;
    display: flex;
    align-items: center;
    gap: 32px;
  }
  .nl-icon { font-size: 40px; flex-shrink: 0; }
  .nl-body { flex: 1; }
  .nl-title {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .nl-sub { font-size: 13px; color: var(--ink-mid); font-weight: 300; }
  .nl-form {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }
  .nl-input {
    background: white;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius);
    padding: 11px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    outline: none;
    min-width: 220px;
    transition: border-color 0.2s;
  }
  .nl-input:focus { border-color: var(--blue); }
  .nl-input::placeholder { color: var(--ink-ghost); }
  .nl-submit {
    background: var(--ink);
    color: white;
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 11px 22px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
  }
  .nl-submit:hover { background: var(--blue); }

  /* ── FOOTER ── */
  footer {
    background: var(--ink);
    color: var(--ink-ghost);
    padding: 48px 24px 20px;
    margin-top: 48px;
  }
  .footer-inner { max-width: 1320px; margin: 0 auto; }
  .footer-top {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 24px;
  }
  .footer-logo { margin-bottom: 12px; }
  .footer-logo .logo { color: white; }
  .footer-logo .logo em { color: #6aa3ff; }
  .footer-tagline {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    line-height: 1.65;
    font-weight: 300;
    margin-top: 10px;
  }
  .footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .fl-col-head {
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 12px;
  }
  .fl-col a {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    padding: 4px 0;
    transition: color 0.2s;
  }
  .fl-col a:hover { color: white; }
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    flex-wrap: wrap;
    gap: 10px;
  }
  .footer-bottom-links { display: flex; gap: 0; }
  .footer-bottom-links a {
    color: rgba(255,255,255,0.35);
    padding: 0 14px;
    border-left: 1px solid rgba(255,255,255,0.1);
    transition: color 0.2s;
    font-size: 12px;
  }
  .footer-bottom-links a:first-child { border-left: none; padding-left: 0; }
  .footer-bottom-links a:hover { color: white; }
  .live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green-mid);
    font-size: 11px;
    font-weight: 600;
  }
  .live-indicator::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-mid);
    animation: livePulse 1.8s ease-in-out infinite;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,212,124,0.4); }
    50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(0,212,124,0); }
  }

  /* ── STATUS LINE ── */
  .status-line {
    background: var(--off-white);
    border-bottom: 1px solid var(--border);
    padding: 7px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    color: var(--ink-light);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .status-line::-webkit-scrollbar { display: none; }
  .status-item {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }
  .status-item strong { color: var(--ink-mid); }
  .status-item .up { color: var(--green); }
  .status-spacer { margin-left: auto; }

  /* ── PLACEHOLDER IMAGES (using picsum) ── */
  .img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--light) 0%, var(--border) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-mid);
    font-size: 28px;
  }

  /* ── BADGE VARIANTS ── */
  .badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-cond);
    font-weight: 800;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
  }
  .badge-hot { background: var(--red-light); color: var(--red); }
  .badge-new { background: var(--green-light); color: var(--green); }
  .badge-deep { background: var(--blue-light); color: var(--blue); }

  /* ── MOBILE ── */
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-side { display: none; }
    .content-layout { grid-template-columns: 1fr; }
    .side-col { display: none; }
    .cards-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .podcast-row { grid-template-columns: repeat(2, 1fr); }
    .events-grid { grid-template-columns: repeat(2, 1fr); }
    .authors-row { grid-template-columns: repeat(3, 1fr); }
    .original-band { grid-template-columns: 1fr; }
    .ob-articles { grid-template-columns: 1fr; }
    .advertise-section { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-links-grid { grid-template-columns: repeat(2, 1fr); }
    .news-card-h { grid-template-columns: 120px 1fr; }
    .nc-img { height: 90px; }
    .header-main { gap: 12px; }
    .header-search { display: none; }
    .newsletter-section { flex-direction: column; gap: 16px; }
    .nl-form { width: 100%; }
    .nl-input { flex: 1; min-width: 0; }
  }

  /* fade-in on load */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero-grid, .content-layout, .original-band, .podcast-section, .advertise-section {
    animation: fadeUp 0.45s ease both;
  }



/* ============================================================ */
/* ── SECTION PAGE STYLES ───────────────────────────────────── */
/* Shared by: LLMs, Research, Policy, Products, Funding,        */
/* Robotics, Open Source, Hardware, Agents, Events,             */
/* Podcasts, Originals                                           */
/* ============================================================ */

.utility-bar{background:var(--ink);color:#888caa;font-family:var(--font-cond);font-size:12px;letter-spacing:.06em;padding:0 24px;display:flex;align-items:center;height:34px;}
.ub-date{margin-right:auto;}
.ub-links{display:flex;}
.ub-links a{color:#888caa;padding:0 14px;height:34px;display:flex;align-items:center;border-left:1px solid #1e2030;transition:color .2s;}
.ub-links a:hover{color:#fff;}
.ub-subscribe{background:var(--blue);color:#fff!important;font-weight:700;}
.ticker-bar{background:var(--blue);display:flex;align-items:center;height:30px;overflow:hidden;}
.ticker-label{background:var(--yellow);color:var(--ink);font-family:var(--font-cond);font-weight:800;font-size:11px;letter-spacing:.12em;padding:0 14px;height:100%;display:flex;align-items:center;white-space:nowrap;flex-shrink:0;}
.ticker-track{display:flex;animation:tickerScroll 80s linear infinite;white-space:nowrap;}
.ticker-track span{color:rgba(255,255,255,.9);font-family:var(--font-body);font-size:12px;padding:0 24px;border-right:1px solid rgba(255,255,255,.18);}
@keyframes tickerScroll{0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
header{background:var(--white);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm);}
.header-main{max-width:1320px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:62px;gap:24px;}
.logo{font-family:var(--font-head);font-weight:900;font-size:26px;letter-spacing:-.02em;color:var(--ink);flex-shrink:0;}
.logo em{font-style:italic;color:var(--blue);}
.logo sup{font-family:var(--font-cond);font-style:normal;font-size:10px;letter-spacing:.1em;background:var(--green);color:#fff;padding:2px 5px;border-radius:3px;vertical-align:super;margin-left:3px;}
.header-search{flex:1;max-width:340px;margin-left:auto;position:relative;}
.header-search input{width:100%;background:var(--off-white);border:1px solid var(--border);border-radius:20px;padding:8px 16px 8px 36px;font-family:var(--font-body);font-size:13px;color:var(--ink);outline:none;transition:border-color .2s;}
.header-search input:focus{border-color:var(--blue);background:#fff;}
.header-search::before{content:'⌕';position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-light);font-size:17px;}
.header-actions{display:flex;gap:10px;flex-shrink:0;}
.btn-outline{font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--ink);border:2px solid var(--border-mid);background:transparent;padding:7px 16px;border-radius:var(--radius);cursor:pointer;transition:all .2s;}
.btn-blue{font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:.05em;color:#fff;background:var(--blue);border:2px solid var(--blue);padding:7px 18px;border-radius:var(--radius);cursor:pointer;transition:all .2s;}
.nav-bar{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:62px;z-index:99;}
.nav-inner{max-width:1320px;margin:0 auto;padding:0 24px;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;}
.nav-inner::-webkit-scrollbar{display:none;}
.nav-inner a{font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--ink-mid);padding:11px 14px;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px;transition:all .2s;text-transform:uppercase;}
.nav-inner a:hover{color:var(--blue);}
.nav-inner a.active{color:var(--blue);border-bottom-color:var(--blue);}
.page{max-width:1320px;margin:0 auto;padding:0 24px;animation:fadeUp .35s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
.section-banner{border-bottom:1px solid var(--border);padding:22px 0 18px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;}
.sb-left{}
.sb-breadcrumb{font-family:var(--font-cond);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--ink-ghost);text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.sb-breadcrumb a{color:var(--blue);}
.sb-title{font-family:var(--font-head);font-size:clamp(26px,4vw,40px);font-weight:900;letter-spacing:-.02em;color:var(--ink);line-height:1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.accent-pill{font-family:var(--font-cond);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;}
.sb-desc{font-size:13px;color:var(--ink-light);font-weight:300;margin-top:6px;max-width:520px;line-height:1.55;}
.sb-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.sb-count{font-family:var(--font-cond);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-light);}
.sb-count strong{color:var(--ink);font-size:18px;}
.sort-select{font-family:var(--font-cond);font-size:12px;font-weight:600;color:var(--ink-mid);border:1px solid var(--border-mid);border-radius:var(--radius);padding:6px 10px;background:var(--off-white);cursor:pointer;outline:none;}
.filter-row{display:flex;gap:6px;padding:14px 0 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);}
.filter-row::-webkit-scrollbar{display:none;}
.chip{font-family:var(--font-cond);font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 14px;border:1px solid var(--border-mid);border-radius:20px;color:var(--ink-mid);cursor:pointer;white-space:nowrap;transition:all .2s;background:transparent;text-transform:uppercase;}
.content-grid{display:grid;grid-template-columns:1fr 290px;gap:0;align-items:start;}
.main-feed{border-right:1px solid var(--border);padding-right:28px;padding-top:8px;}
.sidebar{padding-left:28px;padding-top:20px;position:sticky;top:120px;}
.date-label{font-family:var(--font-cond);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-ghost);padding:16px 0 8px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);}
.date-label:first-child{border-top:none;}
.date-label::after{content:'';flex:1;height:1px;background:var(--border);}
.date-label.today{color:var(--blue);}
.date-label.today::before{content:'●';font-size:7px;color:var(--blue);animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}
50%{opacity:.3}
}
.story-item{display:grid;grid-template-columns:1fr 100px;gap:14px;padding:13px 0;border-bottom:1px solid var(--border);align-items:start;transition:background .15s;cursor:pointer;}
.story-item:hover{background:var(--off-white);margin:0 -12px;padding:13px 12px;border-radius:var(--radius);border-bottom-color:transparent;}
.story-body{}
.story-source-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.source-favicon{width:14px;height:14px;border-radius:2px;flex-shrink:0;object-fit:contain;background:var(--light);}
.source-name{font-family:var(--font-cond);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.story-time{font-family:var(--font-cond);font-size:10px;color:var(--ink-ghost);letter-spacing:.04em;margin-left:auto;white-space:nowrap;}
.story-headline{font-family:var(--font-head);font-size:16px;font-weight:700;line-height:1.3;color:var(--ink);transition:color .15s;margin-bottom:5px;}
.story-item:hover .story-headline{color:var(--blue);}
.story-desc{font-size:12.5px;color:var(--ink-light);line-height:1.55;font-weight:300;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.story-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;align-items:center;}
.tag{font-family:var(--font-cond);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:3px;}
.tag-blue{background:var(--blue-light);color:var(--blue);}
.tag-green{background:var(--green-light);color:var(--green);}
.tag-yellow{background:var(--yellow-light);color:var(--yellow-dark);}
.tag-red{background:var(--red-light);color:var(--red);}
.tag-gray{background:var(--light);color:var(--ink-mid);}
.story-thumb{width:100px;height:70px;border-radius:var(--radius);overflow:hidden;background:var(--light);flex-shrink:0;}
.story-thumb img{height:100%;width:100%;object-fit:cover;transition:transform .3s;}
.story-item:hover .story-thumb img{transform:scale(1.06);}
.related-toggle{font-family:var(--font-cond);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--blue);display:inline-flex;align-items:center;gap:4px;cursor:pointer;border:none;background:none;padding:0;}
.related-sub{display:none;margin-top:7px;padding:10px 12px;background:var(--off-white);border-radius:var(--radius);border-left:3px solid var(--blue);}
.related-sub.open{display:block;}
.related-sub a{display:block;font-size:12px;color:var(--ink-mid);padding:4px 0;border-bottom:1px solid var(--border);transition:color .15s;}
.related-sub a:last-child{border-bottom:none;}
.related-sub a:hover{color:var(--blue);}
.related-sub a::before{content:'↳ ';color:var(--blue);font-family:var(--font-cond);}
.featured-story{display:grid;grid-template-columns:1fr 260px;gap:20px;padding:20px 0 18px;border-bottom:2px solid var(--border);margin-bottom:4px;cursor:pointer;transition:opacity .15s;}
.featured-story:hover{opacity:.88;}
.featured-story:hover .featured-headline{color:var(--blue);}
.featured-img{width:260px;height:160px;border-radius:var(--radius-lg);overflow:hidden;background:var(--light);flex-shrink:0;}
.featured-img img{height:100%;transition:transform .3s;}
.featured-story:hover .featured-img img{transform:scale(1.04);}
.featured-headline{font-family:var(--font-head);font-size:clamp(18px,2.5vw,24px);font-weight:800;line-height:1.25;color:var(--ink);margin:8px 0 10px;transition:color .15s;}
.featured-desc{font-size:13px;color:var(--ink-mid);line-height:1.6;font-weight:300;margin-bottom:10px;}
.featured-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.load-more-wrap{padding:24px 0 8px;text-align:center;}
.load-more-btn{font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--ink-mid);border:2px solid var(--border-mid);background:transparent;padding:10px 28px;border-radius:var(--radius);cursor:pointer;transition:all .2s;text-transform:uppercase;}
.load-more-btn:hover{border-color:var(--blue);color:var(--blue);}
.widget{margin-bottom:22px;}
.widget-head{font-family:var(--font-cond);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;border-radius:var(--radius) var(--radius) 0 0;}
.widget-head a{font-size:10px;font-weight:600;opacity:.7;}
.widget-head a:hover{opacity:1;}
.wh-blue{background:var(--blue);color:#fff;}
.wh-green{background:var(--green);color:#fff;}
.wh-yellow{background:var(--yellow);color:var(--ink);}
.wh-red{background:var(--red);color:#fff;}
.wh-ink{background:var(--ink);color:#fff;}
.widget-body{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);background:#fff;}
.trend-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.trend-item:last-child{border-bottom:none;}
.trend-item:hover{background:var(--off-white);}
.trend-num{font-family:var(--font-head);font-size:18px;font-weight:900;color:var(--border-mid);line-height:1;min-width:20px;margin-top:1px;}
.trend-item:hover .trend-num{color:var(--blue);}
.trend-title{font-size:12px;font-weight:600;color:var(--ink-mid);line-height:1.4;}
.trend-item:hover .trend-title{color:var(--ink);}
.trend-meta{font-size:10px;color:var(--ink-ghost);margin-top:2px;}
.trend-spike{font-family:var(--font-cond);font-size:10px;font-weight:700;color:var(--red);margin-left:auto;white-space:nowrap;}
.source-item{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.source-item:last-child{border-bottom:none;}
.source-item:hover{background:var(--off-white);}
.src-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.src-name-label{font-family:var(--font-cond);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-mid);}
.src-count{font-size:11px;color:var(--ink-ghost);margin-left:auto;font-family:var(--font-cond);font-weight:600;}
.ad-box{border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;text-align:center;background:linear-gradient(145deg,#f0f4ff,#fafbff);margin-bottom:20px;cursor:pointer;transition:box-shadow .2s;}
.ad-box:hover{box-shadow:var(--shadow-md);}
.ad-tag-label{font-family:var(--font-cond);font-size:9px;letter-spacing:.14em;color:var(--ink-ghost);display:block;margin-bottom:10px;text-transform:uppercase;}
.ad-brand-name{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--blue);margin-bottom:6px;}
.ad-copy{font-size:12px;color:var(--ink-mid);line-height:1.55;margin-bottom:12px;}
.ad-cta-btn{display:inline-block;background:var(--blue);color:#fff;font-family:var(--font-cond);font-weight:700;font-size:11px;letter-spacing:.06em;padding:7px 18px;border-radius:var(--radius);}
.nl-mini{background:var(--yellow-light);border:1px solid var(--yellow);border-radius:var(--radius-lg);padding:16px;margin-bottom:20px;}
.nl-mini-title{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--ink);margin-bottom:4px;}
.nl-mini-sub{font-size:11px;color:var(--ink-mid);font-weight:300;margin-bottom:10px;line-height:1.5;}
.nl-mini input{width:100%;background:#fff;border:1px solid var(--border-mid);border-radius:var(--radius);padding:8px 12px;font-family:var(--font-body);font-size:12px;color:var(--ink);outline:none;margin-bottom:7px;}
.nl-mini input:focus{border-color:var(--blue);}
.nl-mini-btn{width:100%;background:var(--ink);color:#fff;font-family:var(--font-cond);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:8px;border:none;border-radius:var(--radius);cursor:pointer;transition:background .2s;}
.nl-mini-btn:hover{background:var(--blue);}
.section-nav-bar{background:var(--off-white);border-top:2px solid var(--ink);border-bottom:1px solid var(--border);margin:40px -24px 0;padding:20px 24px;}
.section-nav-label{font-family:var(--font-cond);font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--ink-ghost);text-transform:uppercase;margin-bottom:12px;}
.section-nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
.section-nav-link{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;cursor:pointer;transition:all .2s;text-decoration:none;}
.section-nav-link:hover{border-color:var(--blue);background:var(--blue-light);}
.section-nav-link:hover .snl-name{color:var(--blue);}
.section-nav-link.current{border-color:var(--blue);background:var(--blue);pointer-events:none;}
.section-nav-link.current .snl-name,.section-nav-link.current .snl-count{color:#fff;}
.snl-icon{font-size:16px;}
.snl-name{font-family:var(--font-cond);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-mid);text-transform:uppercase;}
.snl-count{font-size:10px;color:var(--ink-ghost);font-family:var(--font-cond);margin-left:auto;}
footer{background:var(--ink);color:rgba(255,255,255,.4);padding:40px 24px 20px;}
.footer-inner{max-width:1320px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:260px 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:20px;}
.footer-logo .logo{color:#fff;}
.footer-logo .logo em{color:#6aa3ff;}
.footer-tagline{font-size:12px;color:rgba(255,255,255,.35);line-height:1.65;font-weight:300;margin-top:10px;}
.footer-links-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.fl-col-head{font-family:var(--font-cond);font-weight:800;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:10px;}
.fl-col a{display:block;font-size:12px;color:rgba(255,255,255,.35);padding:3px 0;transition:color .2s;}
.fl-col a:hover{color:#fff;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;font-size:11px;flex-wrap:wrap;gap:10px;}
.footer-bottom-links{display:flex;}
.footer-bottom-links a{color:rgba(255,255,255,.3);padding:0 12px;border-left:1px solid rgba(255,255,255,.08);transition:color .2s;font-size:11px;}
.footer-bottom-links a:first-child{border-left:none;padding-left:0;}
.footer-bottom-links a:hover{color:#fff;}
.live-dot{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-size:11px;font-weight:600;}
.live-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.8s ease-in-out infinite;}
/* Special layouts */
.pod-card{display:grid;grid-template-columns:80px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start;transition:background .15s;}
.pod-card:hover{background:var(--off-white);margin:0 -12px;padding:14px 12px;border-radius:var(--radius);border-bottom-color:transparent;}
.pod-thumb{width:80px;height:80px;border-radius:var(--radius);overflow:hidden;background:var(--light);border:1px solid var(--border);flex-shrink:0;}
.pod-thumb img{height:100%;}
.pod-platform-badge{display:inline-flex;align-items:center;font-family:var(--font-cond);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:3px;margin-bottom:4px;}
.badge-yt{background:#ffecec;color:#cc0000;}
.badge-sp{background:#e7fdf1;color:#1db954;}
.pod-show{font-family:var(--font-cond);font-size:10px;font-weight:700;color:var(--ink-light);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;}
.pod-ep-title{font-family:var(--font-head);font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);margin-bottom:5px;transition:color .15s;}
.pod-card:hover .pod-ep-title{color:var(--blue);}
.pod-ep-desc{font-size:12px;color:var(--ink-light);line-height:1.5;font-weight:300;margin-bottom:6px;}
.pod-meta-row{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink-ghost);font-family:var(--font-cond);flex-wrap:wrap;}
.pod-play-btn{display:inline-flex;align-items:center;gap:5px;background:var(--blue);color:#fff;font-family:var(--font-cond);font-weight:700;font-size:10px;letter-spacing:.06em;padding:4px 12px;border-radius:20px;}
.event-card{display:grid;grid-template-columns:56px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start;transition:background .15s;}
.event-card:hover{background:var(--off-white);margin:0 -12px;padding:14px 12px;border-radius:var(--radius);border-bottom-color:transparent;}
.event-date-box{text-align:center;border-radius:var(--radius);padding:6px 4px;flex-shrink:0;}
.edb-blue{background:var(--blue);color:#fff;}
.edb-green{background:var(--green);color:#fff;}
.edb-yellow{background:var(--yellow);color:var(--ink);}
.edb-month{font-family:var(--font-cond);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.8;display:block;}
.edb-day{font-family:var(--font-head);font-size:22px;font-weight:900;line-height:1;display:block;}
.event-name{font-family:var(--font-head);font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);margin-bottom:4px;transition:color .15s;}
.event-card:hover .event-name{color:var(--blue);}
.event-loc{font-size:12px;color:var(--ink-light);margin-bottom:5px;}
.event-tags{display:flex;flex-wrap:wrap;gap:4px;}
.event-reg-btn{display:inline-flex;align-items:center;background:var(--off-white);border:1px solid var(--border-mid);color:var(--ink-mid);font-family:var(--font-cond);font-weight:700;font-size:11px;letter-spacing:.06em;padding:6px 14px;border-radius:var(--radius);transition:all .2s;white-space:nowrap;cursor:pointer;}
.event-reg-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff;}
.event-sponsored{display:inline-flex;background:var(--yellow-light);color:var(--yellow-dark);font-family:var(--font-cond);font-size:9px;font-weight:800;letter-spacing:.1em;padding:2px 7px;border-radius:3px;margin-bottom:5px;text-transform:uppercase;}
.orig-card{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .15s;}
.orig-card:hover{opacity:.85;}
.orig-card:hover .orig-headline{color:var(--blue);}
.orig-img{width:200px;height:128px;border-radius:var(--radius-lg);overflow:hidden;background:var(--light);flex-shrink:0;}
.orig-img img{height:100%;transition:transform .3s;}
.orig-card:hover .orig-img img{transform:scale(1.04);}
.orig-type-badge{display:inline-flex;font-family:var(--font-cond);font-weight:800;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:3px;margin-bottom:6px;}
.orig-headline{font-family:var(--font-head);font-size:17px;font-weight:800;line-height:1.3;color:var(--ink);margin-bottom:6px;transition:color .15s;}
.orig-excerpt{font-size:13px;color:var(--ink-mid);line-height:1.6;font-weight:300;margin-bottom:10px;}
.orig-author-row{display:flex;align-items:center;gap:10px;}
.orig-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:11px;font-weight:800;border:1px solid var(--border);flex-shrink:0;}
.orig-author-name{font-size:12px;font-weight:600;color:var(--ink);line-height:1;}
.orig-author-meta{font-size:10px;color:var(--ink-light);font-family:var(--font-cond);letter-spacing:.04em;}
@media(max-width:900px){
  .content-grid{grid-template-columns:1fr;}
.main-feed{border-right:none;padding-right:0;}
.sidebar{padding-left:0;border-top:2px solid var(--border);padding-top:24px;position:static;}
.featured-story{grid-template-columns:1fr;}
.featured-img{width:100%;height:200px;}
.story-item{grid-template-columns:1fr 80px;}
.story-thumb{width:80px;height:58px;}
.orig-card{grid-template-columns:1fr;}
.orig-img{width:100%;height:180px;}
.event-card{grid-template-columns:48px 1fr;}
.event-card>:last-child:not(.event-card-body){display:none;}
.footer-top{grid-template-columns:1fr;}
.footer-links-grid{grid-template-columns:repeat(2,1fr);}
.header-search{display:none;}
}

.no-more-news {
    text-align  : center;
    padding     : 32px 20px;
    color       : var(--ink-muted);
    border      : 1.5px dashed var(--border);
    border-radius: 8px;
    margin      : 20px 0;
}

.no-more-news span {
    font-size   : 28px;
    display     : block;
    margin-bottom: 8px;
}

.no-more-news p {
    font-size   : 16px;
    font-weight : 600;
    color       : var(--ink);
    margin-bottom: 4px;
}

.no-more-news small {
    font-size   : 13px;
    color       : var(--ink-light);
}

.orig-excerpt {
    display            : -webkit-box;
    -webkit-line-clamp : 3;
    -webkit-box-orient : vertical;
    overflow           : hidden;
    line-height        : 1.6;
    font-size          : 14px;
}


/* ============================================================ */
/* ── NEWS DETAIL PAGE STYLES ───────────────────────────────── */
/* article detail / news-detail.html                            */
/* ============================================================ */

/* ── ARTICLE BREADCRUMB ─────────────────────────────────────── */
.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 0 0;
  font-size: 12.5px;
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.article-breadcrumb a { color: var(--blue); }
.article-breadcrumb span { opacity: .5; }

/* ── ARTICLE LAYOUT ─────────────────────────────────────────── */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
  padding-top: 24px;
}

/* ── ARTICLE HEADER ─────────────────────────────────────────── */
.article-category-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.article-headline {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.18;
  color: var(--ink);
  letter-spacing: -.3px;
  margin-bottom: 16px;
}
.article-dek {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.65;
  margin-bottom: 22px;
  border-left: 3px solid var(--blue);
  padding-left: 16px;
}

/* ── ARTICLE META ROW ───────────────────────────────────────── */
.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.source-badge       { display: flex; align-items: center; gap: 7px; }
.source-favicon-lg  {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  overflow: hidden;
  background: var(--bg-2);
}
.source-favicon-lg img { width: 100%; height: 100%; object-fit: cover; }
.source-name-lg {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--blue);
}
.meta-sep   { color: var(--border); font-size: 18px; line-height: 1; }
.meta-time,
.meta-read  {
  font-size: 12.5px;
  color: var(--ink-light);
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.meta-tags    { display: flex; gap: 6px; flex-wrap: wrap; }
.meta-actions { margin-left: auto; display: flex; gap: 10px; }
.action-btn {
  border: 1.5px solid var(--border);
  background: transparent;
  border-radius: var(--radius);
  padding: 5px 12px;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: border-color .15s, color .15s;
}
.action-btn:hover         { border-color: var(--blue); color: var(--blue); }
.action-btn.saved         { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }

/* ── ARTICLE HERO IMAGE ─────────────────────────────────────── */
.article-hero {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 32px;
  background: var(--bg-3);
}
.article-hero img   { width: 100%; height: 420px; object-fit: cover; display: block; }
.hero-caption {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink-light);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font-style: italic;
}

/* ── ARTICLE BODY PROSE ─────────────────────────────────────── */
.article-body             { font-size: 16.5px; line-height: 1.78; color: var(--ink-2); }
.article-body p           { margin-bottom: 22px; }
.article-body h2          {
  font-family: var(--font-head);
  font-size: 24px; font-weight: 800;
  color: var(--ink); margin: 36px 0 14px; line-height: 1.25;
}
.article-body h3          {
  font-family: var(--font-cond);
  font-size: 17px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); margin: 28px 0 10px;
}
.article-body blockquote  {
  border-left: 4px solid var(--blue);
  background: var(--blue-light);
  padding: 18px 22px; margin: 28px 0;
  border-radius: 0 6px 6px 0;
}
.article-body blockquote p {
  font-family: var(--font-head);
  font-size: 18px; font-style: italic;
  color: var(--ink); margin: 0; line-height: 1.55;
}
.article-body blockquote cite {
  display: block; margin-top: 10px;
  font-size: 12.5px; font-family: var(--font-cond);
  font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--blue); font-style: normal;
}
.article-body ul,
.article-body ol          { padding-left: 22px; margin-bottom: 22px; }
.article-body li          { margin-bottom: 8px; }
.article-body strong      { font-weight: 700; color: var(--ink); }
.article-body a           { color: var(--blue); border-bottom: 1px solid var(--blue-light); }
.article-body a:hover     { border-bottom-color: var(--blue); }

/* ── KEY NUMBERS ────────────────────────────────────────────── */
.key-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 32px 0;
}
.kn-item  { background: var(--bg); padding: 20px 18px; text-align: center; }
.kn-val   {
  font-family: var(--font-head);
  font-size: 34px; font-weight: 900;
  color: var(--blue); line-height: 1; margin-bottom: 6px;
}
.kn-label {
  font-size: 12px; font-family: var(--font-cond);
  font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* ── BREAKOUT BOX ───────────────────────────────────────────── */
.breakout-box      {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 22px 24px; margin: 32px 0;
}
.breakout-box-head {
  font-family: var(--font-cond); font-size: 11px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.breakout-box p             { margin-bottom: 10px; font-size: 15px; }
.breakout-box p:last-child  { margin-bottom: 0; }

/* ── SHARE BAR ──────────────────────────────────────────────── */
.share-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 36px 0; flex-wrap: wrap;
}
.share-label {
  font-family: var(--font-cond); font-weight: 800;
  font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); margin-right: 4px;
}
.share-btn {
  border: 1.5px solid var(--border); background: var(--bg);
  border-radius: var(--radius); padding: 7px 16px;
  font-family: var(--font-cond); font-weight: 700;
  font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; color: var(--ink);
  display: flex; align-items: center; gap: 6px; transition: all .15s;
}
.share-btn:hover    { background: var(--bg-3); }
.share-btn.x        { color: #000; }
.share-btn.li       { color: #0a66c2; border-color: #c9ddf0; background: #f0f7ff; }
.engagement         { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.eng-item {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-cond); font-size: 13px; font-weight: 700;
  color: var(--ink-muted); cursor: pointer; transition: color .15s;
}
.eng-item:hover     { color: var(--blue); }
.eng-item .count    { color: var(--ink); font-size: 14px; }

/* ── SOURCE CARD ────────────────────────────────────────────── */
.source-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 20px 22px;
  display: flex; align-items: center; gap: 18px; margin: 36px 0;
}
.source-card-logo {
  width: 48px; height: 48px; border-radius: 8px;
  border: 1.5px solid var(--border); overflow: hidden; flex-shrink: 0;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-cond); font-weight: 900; font-size: 16px; color: var(--blue);
}
.source-card-info       { flex: 1; }
.source-card-name       { font-family: var(--font-cond); font-weight: 800; font-size: 16px; color: var(--ink); margin-bottom: 3px; }
.source-card-desc       { font-size: 13px; color: var(--ink-muted); line-height: 1.45; }
.source-card-btn {
  background: var(--blue); color: #fff; border: none;
  padding: 8px 18px; border-radius: var(--radius);
  font-family: var(--font-cond); font-weight: 700; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; flex-shrink: 0;
}

/* ── RELATED COVERAGE ───────────────────────────────────────── */
.related-coverage   { margin: 36px 0; }
.rc-head {
  font-family: var(--font-cond); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.rc-head::after     { content: ''; flex: 1; height: 1px; background: var(--border); }
.rc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-2);
  cursor: pointer; transition: background .1s;
}
.rc-item:last-child { border-bottom: none; }
.rc-favicon {
  width: 20px; height: 20px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--bg-2);
}
.rc-source {
  font-family: var(--font-cond); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; min-width: 80px; color: var(--ink-muted);
}
.rc-title           { font-size: 14px; font-weight: 500; color: var(--ink); flex: 1; line-height: 1.4; }
.rc-title:hover     { color: var(--blue); }
.rc-time {
  font-size: 11.5px; font-family: var(--font-cond); font-weight: 600;
  color: var(--ink-light); white-space: nowrap; text-transform: uppercase; letter-spacing: .03em;
}

/* ── ARTICLE TAGS ROW ───────────────────────────────────────── */
.article-tags-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 28px 0; padding: 20px 0; border-top: 1px solid var(--border);
}
.article-tags-row .tag-pill {
  background: var(--bg-3); border: 1.5px solid var(--border);
  color: var(--ink-muted); border-radius: 20px; padding: 5px 14px;
  font-family: var(--font-cond); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: all .15s;
}
.article-tags-row .tag-pill:hover { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }

/* ── SIDEBAR STORIES (article page) ────────────────────────── */
.sidebar-story {
  display: flex; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer; align-items: flex-start;
}
.sidebar-story:last-child          { border-bottom: none; }
.sidebar-story:hover .ss-title     { color: var(--blue); }
.ss-thumb {
  width: 64px; height: 48px; border-radius: 4px;
  overflow: hidden; flex-shrink: 0; background: var(--bg-3);
}
.ss-thumb img   { width: 100%; height: 100%; object-fit: cover; }
.ss-body        { flex: 1; }
.ss-source {
  font-family: var(--font-cond); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 3px;
}
.ss-title       { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; transition: color .15s; }
.ss-time {
  font-family: var(--font-cond); font-size: 11px; font-weight: 600;
  color: var(--ink-light); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px;
}

/* ── WIDGET HEAD VARIANTS (article page) ───────────────────── */
.wh-ink { background: var(--bg-2); color: var(--ink-muted); }

/* ── NO MORE NEWS MESSAGE ───────────────────────────────────── */
.no-more-news {
  text-align: center; padding: 32px 20px;
  color: var(--ink-light);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg); margin: 20px 0;
}
.no-more-news span  { font-size: 28px; display: block; margin-bottom: 8px; }
.no-more-news p     { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.no-more-news small { font-size: 13px; color: var(--ink-light); }

/* ── ORIG EXCERPT (3 lines) ─────────────────────────────────── */
.orig-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
  font-size: 14px;
}

/* ── ARTICLE PAGE RESPONSIVE ───────────────────────────────── */
@media (max-width: 900px) {
  .article-layout         { grid-template-columns: 1fr; }
  .article-hero img       { height: 240px; }
  .article-headline       { font-size: 26px; }
  .key-numbers            { grid-template-columns: 1fr 1fr; }
  .share-bar              { flex-wrap: wrap; gap: 8px; }
  .source-card            { flex-direction: column; text-align: center; }
  .rc-item                { flex-wrap: wrap; }
}

/* TTS button states */
#play-pause-button.playing {
    background   : var(--blue);
    border-color : var(--blue);
    color        : white;
}

#play-pause-button.paused {
    background   : #f1b22b;
    border-color : #f1b22b;
    color        : white;
}

#play-pause-button:disabled {
    opacity      : 0.5;
    cursor       : not-allowed;
}
/* Sidebar story link hover */
a.sidebar-story {
    text-decoration : none;
    color           : inherit;
    transition      : background .15s;
}

a.sidebar-story:hover {
    background      : var(--off-white);
    border-radius   : var(--radius);
    margin          : 0 -14px;
    padding-left    : 14px;
    padding-right   : 14px;
}

a.sidebar-story:hover .ss-title {
    color           : var(--blue);
}
.author-profile-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}

.author-profile-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--blue) 0%, #003580 60%, #001a4d 100%);
  opacity: 0.96;
}

.author-profile-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 36px 32px;
}

.author-profile-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.author-profile-info {
  flex: 1;
}

.author-profile-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
  font-family: var(--font-cond);
}

.author-profile-name {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.2;
}

.author-profile-bio {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 16px;
  max-width: 560px;
}

.author-profile-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ap-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ap-stat-num {
  font-family: var(--font-cond);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.ap-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.ap-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.2);
}

@media (max-width: 600px) {
  .author-profile-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
    gap: 16px;
  }
  .author-profile-name { font-size: 20px; }
  .author-profile-avatar img { width: 72px; height: 72px; }
}

/* ============================================================ */
/* ── CONTACT US PAGE STYLES ─────────────────────────────────── */
/* ============================================================ */

/* ── CONTACT HERO ──────────────────────────────────────────── */
.contact-hero {
  position     : relative;
  border-radius: var(--radius-lg);
  overflow     : hidden;
  margin       : 24px 0 32px;
  min-height   : 200px;
  display      : flex;
  align-items  : center;
}
.contact-hero-bg {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, #0d0f1a 0%, #0057ff 100%);
}
.contact-hero-bg::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(255,255,255,.015) 40px,
    rgba(255,255,255,.015) 80px
  );
}
.contact-hero-inner {
  position: relative;
  z-index : 1;
  padding : 40px 40px;
}
.contact-hero-eyebrow {
  font-family   : var(--font-cond);
  font-size     : 11px;
  font-weight   : 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.5);
  margin-bottom : 8px;
}
.contact-hero-title {
  font-family   : var(--font-head);
  font-size     : clamp(26px, 3.5vw, 40px);
  font-weight   : 900;
  color         : #fff;
  line-height   : 1.15;
  letter-spacing: -.02em;
  margin-bottom : 10px;
}
.contact-hero-sub {
  font-size  : 14px;
  color      : rgba(255,255,255,.65);
  font-weight: 300;
  line-height: 1.6;
}

/* ── CONTACT LAYOUT ────────────────────────────────────────── */
.contact-layout {
  display              : grid;
  grid-template-columns: 1fr 360px;
  gap                  : 32px;
  align-items          : start;
  padding-bottom       : 48px;
}

/* ── CONTACT FORM CARD ─────────────────────────────────────── */
.contact-form-card {
  background   : var(--white);
  border       : 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding      : 32px 30px;
  box-shadow   : var(--shadow-sm);
}
.contact-form-title {
  font-family  : var(--font-head);
  font-size    : 20px;
  font-weight  : 800;
  color        : var(--ink);
  margin-bottom: 4px;
}
.contact-form-sub {
  font-size    : 13px;
  color        : var(--ink-light);
  font-weight  : 300;
  margin-bottom: 24px;
  line-height  : 1.55;
}

/* ── FORM FIELDS ───────────────────────────────────────────── */
.cf-row {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 16px;
  margin-bottom        : 16px;
}
.cf-row.full { grid-template-columns: 1fr; }

.cf-group {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
}
.cf-label {
  font-family   : var(--font-cond);
  font-size     : 11px;
  font-weight   : 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color         : var(--ink-mid);
}
.cf-label span {
  color      : var(--red);
  margin-left: 2px;
}
.cf-input,
.cf-select,
.cf-textarea {
  background   : var(--off-white);
  border       : 1.5px solid var(--border);
  border-radius: var(--radius);
  padding      : 10px 14px;
  font-family  : var(--font-body);
  font-size    : 13.5px;
  color        : var(--ink);
  outline      : none;
  transition   : border-color .2s, background .2s;
  width        : 100%;
}
.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
  border-color: var(--blue);
  background  : var(--white);
}
.cf-input::placeholder,
.cf-textarea::placeholder { color: var(--ink-ghost); }
.cf-textarea {
  resize    : vertical;
  min-height: 140px;
  line-height: 1.6;
}
.cf-select {
  cursor     : pointer;
  appearance : none;
  background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7f9a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat  : no-repeat;
  background-position: right 12px center;
  padding-right      : 36px;
}

/* ── FORM SUBMIT ───────────────────────────────────────────── */
.cf-submit-row {
  display    : flex;
  align-items: center;
  gap        : 16px;
  margin-top : 8px;
  flex-wrap  : wrap;
}
.cf-submit-btn {
  background    : var(--blue);
  color         : #fff;
  font-family   : var(--font-cond);
  font-weight   : 800;
  font-size     : 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding       : 12px 32px;
  border-radius : var(--radius);
  border        : none;
  cursor        : pointer;
  transition    : background .2s, transform .15s;
}
.cf-submit-btn:hover  { background: var(--blue-hover); transform: translateY(-1px); }
.cf-submit-btn:active { transform: translateY(0); }
.cf-note {
  font-size  : 11px;
  color      : var(--ink-ghost);
  line-height: 1.5;
  font-weight: 300;
}

/* ── FORM SUCCESS / ERROR MESSAGES ────────────────────────── */
.cf-success,
.cf-error {
  display      : none;
  align-items  : center;
  gap          : 10px;
  padding      : 14px 18px;
  border-radius: var(--radius);
  font-size    : 13px;
  font-weight  : 500;
  margin-bottom: 20px;
}
.cf-success.show,
.cf-error.show { display: flex; }
.cf-success {
  background: var(--green-light);
  border    : 1px solid var(--green);
  color     : var(--green);
}
.cf-error {
  background: var(--red-light);
  border    : 1px solid var(--red);
  color     : var(--red);
}

/* ── CONTACT INFO CARDS (sidebar) ──────────────────────────── */
.contact-info-cards {
  display       : flex;
  flex-direction: column;
  gap           : 16px;
}
.contact-info-card {
  background   : var(--white);
  border       : 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding      : 20px 18px;
  display      : flex;
  align-items  : flex-start;
  gap          : 14px;
  transition   : box-shadow .2s;
}
.contact-info-card:hover { box-shadow: var(--shadow-md); }
.cic-icon {
  width        : 40px;
  height       : 40px;
  border-radius: var(--radius);
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 18px;
  flex-shrink  : 0;
}
.cic-icon.blue   { background: var(--blue-light); }
.cic-icon.green  { background: var(--green-light); }
.cic-icon.yellow { background: var(--yellow-light); }
.cic-icon.red    { background: var(--red-light); }
.cic-body        {}
.cic-title {
  font-family  : var(--font-cond);
  font-weight  : 800;
  font-size    : 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color        : var(--ink);
  margin-bottom: 3px;
}
.cic-value {
  font-size  : 13.5px;
  color      : var(--blue);
  font-weight: 600;
  margin-bottom: 2px;
  word-break : break-all;
}
.cic-desc {
  font-size  : 11px;
  color      : var(--ink-light);
  font-weight: 300;
  line-height: 1.5;
}

/* ── RESPONSE TIME BADGE ───────────────────────────────────── */
.contact-response-badge {
  background   : var(--off-white);
  border       : 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding      : 16px 18px;
  display      : flex;
  align-items  : center;
  gap          : 12px;
}
.crb-icon  { font-size: 22px; flex-shrink: 0; }
.crb-title { font-family: var(--font-cond); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 2px; }
.crb-time  { font-size: 13px; color: var(--green); font-weight: 700; }

/* ── CONTACT FAQ ───────────────────────────────────────────── */
.contact-faq {
  margin-top: 28px;
}
.contact-faq-title {
  font-family   : var(--font-cond);
  font-weight   : 800;
  font-size     : 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color         : var(--ink-ghost);
  margin-bottom : 12px;
  display       : flex;
  align-items   : center;
  gap           : 8px;
}
.contact-faq-title::after {
  content   : '';
  flex      : 1;
  height    : 1px;
  background: var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding      : 10px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-size    : 12.5px;
  font-weight  : 600;
  color        : var(--ink);
  margin-bottom: 4px;
}
.faq-a {
  font-size  : 12px;
  color      : var(--ink-mid);
  line-height: 1.6;
  font-weight: 300;
}

/* ── CONTACT PAGE RESPONSIVE ───────────────────────────────── */
@media (max-width: 900px) {
  .contact-layout      { grid-template-columns: 1fr; }
  .contact-hero-inner  { padding: 32px 24px; }
  .cf-row              { grid-template-columns: 1fr; }
}

/* ── CONTACT BUTTON LOADER ─────────────────────────────────── */
.cf-submit-btn {
    position       : relative;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    min-width      : 160px;
    transition     : background .2s, transform .15s, opacity .2s;
}

.cf-submit-btn:disabled {
    opacity       : 0.75;
    cursor        : not-allowed;
    transform     : none !important;
    pointer-events: none;
}

/* Spinner animation */
.cf-spinner {
    display      : inline-block;
    width        : 14px;
    height       : 14px;
    border        : 2px solid rgba(255,255,255,.35);
    border-top   : 2px solid #fff;
    border-radius: 50%;
    animation    : cf-spin .7s linear infinite;
    flex-shrink  : 0;
}

@keyframes cf-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================ */
/* ── SEARCH PAGE STYLES ─────────────────────────────────────── */
/* ============================================================ */

/* ── SEARCH HERO BAR ───────────────────────────────────────── */
.search-hero {
  background   : var(--ink);
  border-radius: var(--radius-lg);
  padding      : 32px 36px;
  margin       : 24px 0 28px;
  position     : relative;
  overflow     : hidden;
}
.search-hero::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 30px,
    rgba(255,255,255,.015) 30px, rgba(255,255,255,.015) 60px
  );
}
.search-hero-inner  { position: relative; z-index: 1; }
.search-hero-label  {
  font-family   : var(--font-cond);
  font-size     : 11px;
  font-weight   : 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.45);
  margin-bottom : 12px;
}
.search-hero-form {
  display  : flex;
  gap      : 10px;
  max-width: 680px;
}
.search-hero-input {
  flex         : 1;
  background   : rgba(255,255,255,.08);
  border       : 1.5px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  padding      : 13px 18px;
  font-family  : var(--font-body);
  font-size    : 15px;
  color        : #fff;
  outline      : none;
  transition   : border-color .2s, background .2s;
}
.search-hero-input::placeholder { color: rgba(255,255,255,.35); }
.search-hero-input:focus {
  border-color: var(--blue);
  background  : rgba(255,255,255,.12);
}
.search-hero-btn {
  background    : var(--blue);
  color         : #fff;
  border        : none;
  border-radius : var(--radius);
  padding       : 13px 28px;
  font-family   : var(--font-cond);
  font-weight   : 800;
  font-size     : 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor        : pointer;
  flex-shrink   : 0;
  transition    : background .2s;
}
.search-hero-btn:hover { background: var(--blue-hover); }

/* ── SEARCH META ROW ───────────────────────────────────────── */
.search-meta-row {
  display      : flex;
  align-items  : center;
  gap          : 16px;
  padding      : 14px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  flex-wrap    : wrap;
}
.search-meta-count {
  font-family: var(--font-head);
  font-size  : 15px;
  font-weight: 700;
  color      : var(--ink);
}
.search-meta-count span { color: var(--blue); }
.search-meta-query {
  font-size  : 13px;
  color      : var(--ink-light);
  font-weight: 300;
}
.search-meta-query strong { color: var(--ink); font-weight: 700; }

/* ── SEARCH FILTER CHIPS ───────────────────────────────────── */
.search-filters {
  display   : flex;
  gap       : 6px;
  flex-wrap : wrap;
  margin-left: auto;
}
.sf-chip {
  font-family   : var(--font-cond);
  font-size     : 10px;
  font-weight   : 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding       : 4px 12px;
  border        : 1px solid var(--border-mid);
  border-radius : 20px;
  color         : var(--ink-mid);
  background    : transparent;
  cursor        : pointer;
  text-decoration: none;
  transition    : all .15s;
}
.sf-chip:hover,
.sf-chip.active {
  background  : var(--blue);
  border-color: var(--blue);
  color       : #fff;
}

/* ── SEARCH HIGHLIGHT ──────────────────────────────────────── */
.search-highlight {
  background   : var(--yellow-light);
  color        : var(--yellow-dark);
  font-weight  : 700;
  border-radius: 2px;
  padding      : 0 2px;
}

/* ── NO RESULTS ────────────────────────────────────────────── */
.search-no-results {
  text-align   : center;
  padding      : 60px 20px;
  color        : var(--ink-mid);
}
.snr-icon     { font-size: 48px; margin-bottom: 16px; }
.snr-title    { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.snr-sub      { font-size: 14px; color: var(--ink-light); line-height: 1.6; margin-bottom: 24px; }
.snr-suggests { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.snr-suggest  {
  font-family   : var(--font-cond);
  font-size     : 12px;
  font-weight   : 700;
  letter-spacing: .06em;
  padding       : 6px 16px;
  border        : 1.5px solid var(--border-mid);
  border-radius : 20px;
  color         : var(--ink-mid);
  text-decoration: none;
  transition    : all .15s;
}
.snr-suggest:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ── SEARCH RESULT CATEGORY TAG ────────────────────────────── */
.search-cat-tag {
  display       : inline-flex;
  align-items   : center;
  font-family   : var(--font-cond);
  font-size     : 9px;
  font-weight   : 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding       : 2px 8px;
  border-radius : 3px;
  background    : var(--blue-light);
  color         : var(--blue);
  margin-right  : 4px;
}

/* ── SEARCH SIDEBAR ────────────────────────────────────────── */
.search-sidebar-cats a {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  padding      : 9px 14px;
  font-size    : 13px;
  color        : var(--ink-mid);
  border-bottom: 1px solid var(--border);
  transition   : all .15s;
  text-decoration: none;
}
.search-sidebar-cats a:last-child  { border-bottom: none; }
.search-sidebar-cats a:hover       { background: var(--off-white); color: var(--blue); }
.search-sidebar-cats a .ssc-count  { margin-left: auto; font-size: 11px; color: var(--ink-ghost); font-family: var(--font-cond); }

/* ── SEARCH PAGINATION ─────────────────────────────────────── */
.search-pagination {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  padding        : 24px 0 8px;
}
.sp-btn {
  display       : flex;
  align-items   : center;
  justify-content: center;
  width         : 36px;
  height        : 36px;
  border        : 1.5px solid var(--border-mid);
  border-radius : var(--radius);
  font-family   : var(--font-cond);
  font-weight   : 700;
  font-size     : 13px;
  color         : var(--ink-mid);
  text-decoration: none;
  transition    : all .15s;
}
.sp-btn:hover,
.sp-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.sp-btn.disabled { opacity: .4; pointer-events: none; }
.sp-dots { font-size: 13px; color: var(--ink-ghost); padding: 0 4px; }

/* ── SEARCH RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
  .search-hero         { padding: 24px 20px; }
  .search-hero-form    { flex-direction: column; }
  .search-hero-btn     { width: 100%; }
  .search-meta-row     { flex-direction: column; align-items: flex-start; }
  .search-filters      { margin-left: 0; }
}


/* ============================================================ */
/* ── ABOUT US PAGE STYLES ───────────────────────────────────── */
/* ============================================================ */

.about-hero {
  position     : relative;
  border-radius: var(--radius-lg);
  overflow     : hidden;
  margin       : 24px 0 32px;
  min-height   : 280px;
  display      : flex;
  align-items  : center;
}
.about-hero-bg {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, #0057ff 0%, #003580 55%, #001433 100%);
}
.about-hero-bg::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 40px,
    rgba(255,255,255,.02) 40px, rgba(255,255,255,.02) 80px
  );
}
.about-hero-inner {
  position : relative;
  z-index  : 1;
  padding  : 48px 40px;
  max-width: 680px;
}
.about-hero-eyebrow {
  font-family   : var(--font-cond);
  font-size     : 11px;
  font-weight   : 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.55);
  margin-bottom : 10px;
}
.about-hero-title {
  font-family   : var(--font-head);
  font-size     : clamp(28px, 4vw, 46px);
  font-weight   : 900;
  color         : #fff;
  line-height   : 1.12;
  letter-spacing: -.02em;
  margin-bottom : 14px;
}
.about-hero-sub {
  font-size    : 15px;
  color        : rgba(255,255,255,.7);
  line-height  : 1.65;
  font-weight  : 300;
  margin-bottom: 28px;
  max-width    : 520px;
}
.about-hero-stats { display: flex; align-items: center; gap: 28px; }
.ahs-item         { display: flex; flex-direction: column; gap: 3px; }
.ahs-num          { font-family: var(--font-cond); font-size: 24px; font-weight: 900; color: #fff; line-height: 1; }
.ahs-label        { font-size: 10px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.ahs-divider      { width: 1px; height: 36px; background: rgba(255,255,255,.2); }

.about-main       { padding-top: 4px; }
.about-section    { padding: 32px 0; }
.about-section-label { margin-bottom: 10px; }

.about-tag {
  display       : inline-flex;
  align-items   : center;
  font-family   : var(--font-cond);
  font-weight   : 800;
  font-size     : 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding       : 4px 12px;
  border-radius : 20px;
  background    : var(--blue-light);
  color         : var(--blue);
}
.about-tag-green  { background: var(--green-light);  color: var(--green); }
.about-tag-yellow { background: var(--yellow-light); color: var(--yellow-dark); }
.about-tag-red    { background: var(--red-light);    color: var(--red); }

.about-section-title {
  font-family   : var(--font-head);
  font-size     : clamp(20px, 2.5vw, 28px);
  font-weight   : 800;
  color         : var(--ink);
  line-height   : 1.2;
  letter-spacing: -.02em;
  margin-bottom : 14px;
}
.about-section-body {
  font-size    : 14px;
  color        : var(--ink-mid);
  line-height  : 1.75;
  font-weight  : 400;
  margin-bottom: 14px;
  max-width    : 680px;
}
.about-divider { height: 1px; background: var(--border); margin: 8px 0; }

.about-features {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 16px;
  margin-top           : 24px;
}
.about-feature-card {
  background   : var(--off-white);
  border       : 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding      : 20px 18px;
  transition   : box-shadow .2s, transform .2s;
}
.about-feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.afc-icon  { font-size: 24px; margin-bottom: 10px; }
.afc-title { font-family: var(--font-cond); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.afc-body  { font-size: 12px; color: var(--ink-mid); line-height: 1.6; font-weight: 300; }

.about-ad-cards {
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  gap                  : 20px;
  margin-top           : 24px;
}
.about-ad-card {
  border       : 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding      : 24px 22px;
  background   : var(--white);
  transition   : box-shadow .2s;
}
.about-ad-card:hover  { box-shadow: var(--shadow-md); }
.aac-header   { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.aac-icon     { font-size: 22px; }
.aac-label    { font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--ink); }
.aac-body     { font-size: 13px; color: var(--ink-mid); line-height: 1.65; margin-bottom: 14px; font-weight: 300; }
.aac-list     { list-style: none; padding: 0; margin: 0 0 16px; }
.aac-list li  { font-size: 12px; color: var(--ink-mid); padding: 5px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.aac-list li::before    { content: '✓'; color: var(--green); font-weight: 700; font-size: 11px; flex-shrink: 0; }
.aac-list li:last-child { border-bottom: none; }
.aac-btn {
  display       : inline-block;
  background    : var(--blue);
  color         : #fff;
  font-family   : var(--font-cond);
  font-weight   : 700;
  font-size     : 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding       : 8px 18px;
  border-radius : var(--radius);
  transition    : background .2s;
}
.aac-btn:hover { background: var(--blue-hover); }

.about-disclaimer-box {
  background   : var(--off-white);
  border       : 1px solid var(--border);
  border-left  : 4px solid var(--yellow);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding      : 24px 28px;
}
.about-disclaimer-box p             { font-size: 13.5px; color: var(--ink-mid); line-height: 1.75; margin-bottom: 14px; font-weight: 300; }
.about-disclaimer-box p:last-child  { margin-bottom: 0; }

.about-privacy-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 16px;
  margin-top           : 20px;
}
.apg-card       { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 18px; text-align: center; transition: box-shadow .2s; }
.apg-card:hover { box-shadow: var(--shadow-md); }
.apg-icon       { font-size: 28px; margin-bottom: 10px; }
.apg-title      { font-family: var(--font-cond); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.apg-body       { font-size: 12px; color: var(--ink-mid); line-height: 1.6; font-weight: 300; margin: 0; }

.about-footer-note {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 20px 0 32px;
  font-family   : var(--font-cond);
  font-size     : 11px;
  font-weight   : 600;
  letter-spacing: .06em;
  color         : var(--ink-ghost);
  text-transform: uppercase;
  border-top    : 1px solid var(--border);
  margin-top    : 16px;
}
.afn-dot { color: var(--border-mid); }

.about-sidebar-link {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 11px 16px;
  font-size      : 13px;
  font-weight    : 500;
  color          : var(--ink-mid);
  border-bottom  : 1px solid var(--border);
  transition     : all .15s;
  text-decoration: none;
}
.about-sidebar-link:last-child        { border-bottom: none; }
.about-sidebar-link:hover,
.about-sidebar-link.active            { color: var(--blue); background: var(--blue-light); }
.about-sidebar-link.active            { font-weight: 700; }
.about-sidebar-link::before           { content: '→'; color: var(--blue); font-size: 12px; opacity: 0; transition: opacity .15s; }
.about-sidebar-link:hover::before,
.about-sidebar-link.active::before    { opacity: 1; }

.about-advertise-cta {
  background   : linear-gradient(135deg, var(--blue) 0%, #0040cc 100%);
  border-radius: var(--radius-lg);
  padding      : 22px 20px;
  margin-bottom: 20px;
}
.aac2-eyebrow { font-family: var(--font-cond); font-weight: 800; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.aac2-title   { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 8px; }
.aac2-body    { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.55; margin-bottom: 14px; font-weight: 300; }
.aac2-btn {
  display       : inline-block;
  background    : #fff;
  color         : var(--blue);
  font-family   : var(--font-cond);
  font-weight   : 800;
  font-size     : 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding       : 8px 18px;
  border-radius : var(--radius);
  transition    : opacity .2s;
}
.aac2-btn:hover { opacity: .88; }

@media (max-width: 900px) {
  .about-hero-inner   { padding: 32px 24px; }
  .about-hero-stats   { gap: 16px; flex-wrap: wrap; }
  .about-features     { grid-template-columns: 1fr; }
  .about-ad-cards     { grid-template-columns: 1fr; }
  .about-privacy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .about-hero-title   { font-size: 26px; }
  .ahs-divider        { display: none; }
  .ahs-num            { font-size: 20px; }
  .about-hero-inner   { padding: 28px 14px; }
  .about-disclaimer-box { padding: 18px 16px; }
}


/* ============================================================ */
/* ── SITEMAP PAGE STYLES ─────────────────────────────────────── */
/* ============================================================ */

.sitemap-hero {
  position     : relative;
  border-radius: var(--radius-lg);
  overflow     : hidden;
  margin       : 24px 0 32px;
  min-height   : 160px;
  display      : flex;
  align-items  : center;
}
.sitemap-hero-bg {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, #0d0f1a 0%, #1a2a6c 50%, #0057ff 100%);
}
.sitemap-hero-inner    { position: relative; z-index: 1; padding: 36px 40px; }
.sitemap-hero-eyebrow  { font-family: var(--font-cond); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 8px; }
.sitemap-hero-title    { font-family: var(--font-head); font-size: clamp(24px,3vw,36px); font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 8px; }
.sitemap-hero-sub      { font-size: 13px; color: rgba(255,255,255,.6); font-weight: 300; line-height: 1.6; }

.sitemap-stats {
  display              : grid;
  grid-template-columns: repeat(4,1fr);
  gap                  : 12px;
  margin-bottom        : 28px;
}
.sitemap-stat  { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 14px; text-align: center; }
.ss-num        { font-family: var(--font-head); font-size: 28px; font-weight: 900; color: var(--blue); line-height: 1; margin-bottom: 4px; }
.ss-label      { font-family: var(--font-cond); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-light); }

.sitemap-xml-note {
  background   : var(--off-white);
  border       : 1px solid var(--border);
  border-left  : 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding      : 16px 20px;
  display      : flex;
  align-items  : center;
  gap          : 14px;
  margin-bottom: 28px;
}
.sxn-icon  { font-size: 22px; flex-shrink: 0; }
.sxn-title { font-family: var(--font-cond); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
.sxn-desc  { font-size: 12px; color: var(--ink-mid); line-height: 1.5; }
.sxn-link  { margin-left: auto; font-family: var(--font-cond); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); white-space: nowrap; flex-shrink: 0; padding: 7px 14px; border: 1.5px solid var(--blue); border-radius: var(--radius); transition: all .15s; }
.sxn-link:hover { background: var(--blue); color: #fff; }

.sitemap-grid {
  display              : grid;
  grid-template-columns: repeat(3,1fr);
  gap                  : 20px;
  padding-bottom       : 48px;
}
.sitemap-card       { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .2s; }
.sitemap-card:hover { box-shadow: var(--shadow-md); }
.sitemap-card-head  { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sitemap-card-head.blue   { background: var(--blue);   color: #fff; }
.sitemap-card-head.ink    { background: var(--ink);    color: #fff; }
.sitemap-card-head.green  { background: var(--green);  color: #fff; }
.sitemap-card-head.yellow { background: var(--yellow); color: var(--ink); }
.sitemap-card-head.red    { background: var(--red);    color: #fff; }
.sitemap-card-head.purple { background: #7c3aed;       color: #fff; }
.sitemap-card-icon  { font-size: 16px; flex-shrink: 0; }
.sitemap-card-title { font-family: var(--font-cond); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

.sitemap-links { padding: 8px 0; }
.sitemap-link  { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13px; color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid var(--border); transition: all .15s; }
.sitemap-link:last-child                  { border-bottom: none; }
.sitemap-link:hover                       { background: var(--off-white); color: var(--blue); }
.sitemap-link:hover .sl-arrow            { opacity: 1; transform: translateX(2px); }
.sl-icon    { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.sl-label   { flex: 1; font-weight: 500; }
.sl-desc    { font-size: 11px; color: var(--ink-ghost); font-weight: 300; margin-left: auto; white-space: nowrap; }
.sl-arrow   { font-size: 11px; color: var(--blue); opacity: 0; transition: opacity .15s, transform .15s; flex-shrink: 0; }
.sl-badge   { font-family: var(--font-cond); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; }
.sl-badge.new  { background: var(--green-light); color: var(--green); }
.sl-badge.live { background: var(--blue-light);  color: var(--blue); }
.sl-badge.hot  { background: var(--red-light);   color: var(--red); }

@media (max-width: 900px) {
  .sitemap-grid       { grid-template-columns: 1fr; }
  .sitemap-stats      { grid-template-columns: repeat(2,1fr); }
  .sitemap-hero-inner { padding: 28px 20px; }
  .sxn-link           { display: none; }
}
@media (max-width: 480px) {
  .sitemap-stats      { grid-template-columns: 1fr 1fr; }
  .ss-num             { font-size: 22px; }
  .sitemap-hero-inner { padding: 24px 14px; }
}


/* ============================================================ */
/* ── MOBILE RESPONSIVE ───────────────────────────────────────── */
/* ============================================================ */

/* ── HAMBURGER BUTTON ──────────────────────────────────────── */
.hamburger-btn {
  display        : none;
  flex-direction : column;
  justify-content: space-between;
  width          : 26px;
  height         : 18px;
  background     : none;
  border         : none;
  cursor         : pointer;
  padding        : 0;
  flex-shrink    : 0;
  margin-left    : auto;
}
.hamburger-btn span {
  display      : block;
  width        : 100%;
  height       : 2px;
  background   : var(--ink);
  border-radius: 2px;
  transition   : all .3s;
}
.hamburger-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ── MOBILE NAV DRAWER ─────────────────────────────────────── */
.mobile-nav-drawer {
  display  : none;
  position : fixed;
  top      : 0; left: 0; right: 0; bottom: 0;
  z-index  : 999;
}
.mobile-nav-drawer.open { display: block; }
.mnd-overlay {
  position  : absolute;
  inset     : 0;
  background: rgba(0,0,0,.55);
}
.mnd-panel {
  position   : absolute;
  top        : 0; right: 0; bottom: 0;
  width      : 290px;
  background : var(--white);
  overflow-y : auto;
  box-shadow : -4px 0 24px rgba(0,0,0,.18);
  transform  : translateX(100%);
  transition : transform .3s ease;
}
.mobile-nav-drawer.open .mnd-panel { transform: translateX(0); }
.mnd-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 16px 20px;
  border-bottom  : 1px solid var(--border);
  background     : var(--ink);
  position       : sticky;
  top            : 0;
  z-index        : 1;
}
.mnd-logo     { font-family: var(--font-head); font-size: 20px; font-weight: 900; color: #fff; }
.mnd-logo em  { color: #6aa3ff; font-style: italic; }
.mnd-close    { background: none; border: none; color: rgba(255,255,255,.6); font-size: 22px; cursor: pointer; padding: 0; line-height: 1; }
.mnd-close:hover { color: #fff; }
.mnd-search   { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.mnd-search input { width: 100%; background: var(--off-white); border: 1px solid var(--border); border-radius: 20px; padding: 9px 16px; font-family: var(--font-body); font-size: 13px; color: var(--ink); outline: none; }
.mnd-search input:focus { border-color: var(--blue); }
.mnd-links    { padding: 8px 0 20px; }
.mnd-section-label { font-family: var(--font-cond); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-ghost); padding: 14px 20px 4px; }
.mnd-links a  { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-family: var(--font-cond); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--ink-mid); border-bottom: 1px solid var(--border); text-decoration: none; transition: all .15s; }
.mnd-links a:last-child  { border-bottom: none; }
.mnd-links a:hover       { background: var(--blue-light); color: var(--blue); }
.mnd-links a.active      { background: var(--blue-light); color: var(--blue); font-weight: 800; border-left: 3px solid var(--blue); }

/* ════════════════════════════════════════════════════════════ */
/* ≤ 900px — TABLET                                            */
/* ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .utility-bar          { padding: 0 16px; }
  .ub-links a:not(.ub-subscribe) { display: none; }
  .header-main          { padding: 0 16px; height: 56px; gap: 12px; }
  .logo                 { font-size: 22px; }
  .header-search        { display: none; }
  .header-actions       { display: none; }
  .hamburger-btn        { display: flex; }
  .nav-bar              { display: none; }
  .status-line          { padding: 6px 16px; gap: 12px; font-size: 11px; }
  .page                 { padding: 0 16px; }
  .content-layout       { grid-template-columns: 1fr; }
  .content-grid         { grid-template-columns: 1fr; }
  .side-col             { display: none; }
  .main-feed            { border-right: none; padding-right: 0; }
  .sidebar              { padding-left: 0; border-top: 2px solid var(--border); padding-top: 24px; position: static; }
  .hero-grid            { grid-template-columns: 1fr; margin: 16px 0 20px; }
  .hero-side            { display: none; }
  .hero-main            { min-height: 260px; }
  .hero-main-content    { padding: 20px; }
  .hero-main h1         { font-size: 20px; }
  .news-card-h          { grid-template-columns: 100px 1fr; gap: 12px; }
  .nc-img               { height: 80px; }
  .nc-title             { font-size: 14px; }
  .featured-story       { grid-template-columns: 1fr; }
  .featured-img         { width: 100%; height: 180px; }
  .featured-headline    { font-size: 18px; }
  .story-item           { grid-template-columns: 1fr 80px; }
  .story-thumb          { width: 80px; height: 58px; }
  .story-headline       { font-size: 14px; }
  .cards-grid-3         { grid-template-columns: repeat(2,1fr); }
  .orig-card            { grid-template-columns: 1fr; }
  .orig-img             { width: 100%; height: 180px; }
  .events-grid          { grid-template-columns: repeat(2,1fr); }
  .podcast-row          { grid-template-columns: repeat(2,1fr); }
  .event-card           { grid-template-columns: 48px 1fr; }
  .event-card > :last-child:not(.event-card-body) { display: none; }
  .section-banner       { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 0 10px; }
  .sb-right             { margin-left: 0; }
  .sb-title             { font-size: 22px; }
  .section-nav-bar      { margin: 32px -16px 0; padding: 16px; }
  .section-nav-grid     { grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 6px; }
  .newsletter-section   { flex-direction: column; gap: 16px; }
  .nl-form              { width: 100%; }
  .footer-top           { grid-template-columns: 1fr; gap: 24px; }
  .footer-links-grid    { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .footer-bottom        { flex-direction: column; align-items: flex-start; gap: 12px; }
  .advertise-section    { grid-template-columns: 1fr; }
  .original-band        { grid-template-columns: 1fr; }
  .article-layout       { grid-template-columns: 1fr; }
  .article-hero img     { height: 220px; }
  .article-headline     { font-size: 22px; }
  .meta-actions         { margin-left: 0; }
  .key-numbers          { grid-template-columns: 1fr 1fr; }
  .share-bar            { flex-wrap: wrap; gap: 8px; }
  .source-card          { flex-direction: column; text-align: center; }
  .contact-layout       { grid-template-columns: 1fr; }
  .cf-row               { grid-template-columns: 1fr; }
  .contact-hero-inner   { padding: 28px 16px; }
  .search-hero          { padding: 24px 16px; }
  .search-hero-form     { flex-direction: column; }
  .search-hero-btn      { width: 100%; }
  .search-meta-row      { flex-direction: column; align-items: flex-start; gap: 8px; }
  .search-filters       { margin-left: 0; flex-wrap: wrap; }
  .author-profile-inner { flex-direction: column; align-items: flex-start; padding: 24px 16px; gap: 16px; }
  .author-profile-name  { font-size: 20px; }
  .author-profile-avatar img { width: 72px; height: 72px; }
}

/* ════════════════════════════════════════════════════════════ */
/* ≤ 480px — PHONE                                             */
/* ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .utility-bar          { display: none; }
  .ticker-label         { font-size: 10px; padding: 0 10px; }
  .ticker-scroll span,
  .ticker-track span    { font-size: 11px; padding: 0 14px; }
  .header-main          { height: 52px; padding: 0 14px; }
  .logo                 { font-size: 18px; }
  .logo sup             { display: none; }
  .page                 { padding: 0 14px; }
  .status-line          { padding: 5px 14px; gap: 10px; font-size: 10.5px; }
  .status-item:not(:first-child):not(:nth-child(2)) { display: none; }
  .sb-title             { font-size: 19px; }
  .accent-pill          { display: none; }
  .sb-right             { display: none; }
  .hero-main            { min-height: 220px; }
  .hero-main h1         { font-size: 16px; }
  .hero-main p          { display: none; }
  .meta-reactions       { display: none; }
  .news-card-h          { grid-template-columns: 80px 1fr; gap: 10px; }
  .nc-img               { height: 68px; }
  .nc-title             { font-size: 13px; }
  .nc-desc              { display: none; }
  .story-headline       { font-size: 13px; line-height: 1.35; }
  .story-desc           { display: none; }
  .story-item           { grid-template-columns: 1fr 66px; gap: 10px; }
  .story-thumb          { width: 66px; height: 50px; }
  .cards-grid-3         { grid-template-columns: 1fr; }
  .podcast-row          { grid-template-columns: 1fr; }
  .events-grid          { grid-template-columns: 1fr; }
  .authors-row          { grid-template-columns: repeat(2,1fr); }
  .section-nav-grid     { grid-template-columns: repeat(2,1fr); }
  .sidebar              { display: none; }
  footer                { padding: 28px 14px 16px; }
  .footer-links-grid    { grid-template-columns: 1fr 1fr; }
  .fl-col:nth-child(3),
  .fl-col:nth-child(4)  { display: none; }
  .article-hero img     { height: 180px; }
  .article-headline     { font-size: 18px; }
  .article-dek          { font-size: 14px; }
  .key-numbers          { grid-template-columns: 1fr; }
  .contact-hero-title   { font-size: 22px; }
  .contact-form-card    { padding: 18px 14px; }
  .cf-submit-row        { flex-direction: column; }
  .cf-submit-btn        { width: 100%; }
  .load-more-btn        { width: 100%; padding: 12px; }
  .no-more-news         { padding: 24px 12px; }
}


/* ============================================================ */
/* ── IPHONE HEADER OVERLAP FIX ─────────────────────────────── */
/* Fixes: ticker text leaking into header, header overlapping   */
/* first story title, iOS z-index stacking issues               */
/* ============================================================ */

/* ── FIX 1: Ticker bar — contain animation on iOS ─────────── */
.ticker-bar {
  position         : relative;
  z-index          : 50;
  overflow         : hidden;
  contain          : layout paint;
  isolation        : isolate;
  -webkit-transform: translateZ(0);
  transform        : translateZ(0);
}
.ticker-track,
.ticker-scroll {
  will-change      : transform;
  -webkit-transform: translateZ(0);
  transform        : translateZ(0);
}

/* ── FIX 2: Header — proper stacking on iOS ────────────────── */
header {
  position         : -webkit-sticky;
  position         : sticky;
  top              : 0;
  z-index          : 200;
  -webkit-transform: translateZ(0);
  transform        : translateZ(0);
  isolation        : isolate;
}

/* ── FIX 3: Nav bar z-index ────────────────────────────────── */
.nav-bar {
  position         : -webkit-sticky;
  position         : sticky;
  z-index          : 199;
  -webkit-transform: translateZ(0);
  transform        : translateZ(0);
}

/* ── FIX 4: Mobile nav drawer above everything ─────────────── */
.mobile-nav-drawer {
  z-index          : 9999;
}

/* ════════════════════════════════════════════════════════════ */
/* ≤ 900px — Prevent overlap + add breathing room              */
/* ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Ticker: hard contain on mobile ── */
  .ticker-bar {
    height         : 28px;
    max-height     : 28px;
    overflow       : hidden;
    clip           : rect(0, auto, 28px, 0);
    -webkit-clip-path: inset(0);
    clip-path      : inset(0);
  }
  .ticker-label {
    height         : 28px;
    line-height    : 28px;
    font-size      : 10px;
    padding        : 0 10px;
    min-width      : 72px;
    flex-shrink    : 0;
    z-index        : 2;
    position       : relative;
  }
  .ticker-track,
  .ticker-scroll {
    overflow       : visible;
    height         : 28px;
    align-items    : center;
    position: relative; 
  z-index: 1;
  }
  .ticker-track span,
  .ticker-scroll span {
    font-size      : 11px;
    padding        : 0 16px;
    line-height    : 28px;
    display        : inline-flex;
    align-items    : center;
  }

  /* ── Header: ensure full background covers ticker ── */
  header {
    background     : var(--white);
    top            : 0;
    height         : auto;
    min-height     : 56px;
    border-bottom  : 3px solid var(--ink);
    box-shadow     : 0 2px 8px rgba(0,0,0,.12);
  }
  .header-main {
    height         : 56px;
    padding        : 0 16px;
    background     : var(--white);
    gap            : 12px;
    display        : flex;
    align-items    : center;
    max-width      : 100%;
  }

  /* ── Status line: prevent overlap with page ── */
  .status-line {
    position       : relative;
    z-index        : 10;
    background     : var(--off-white);
    padding        : 6px 16px;
    border-bottom  : 1px solid var(--border);
    overflow-x     : auto;
    white-space    : nowrap;
    scrollbar-width: none;
  }
  .status-line::-webkit-scrollbar { display: none; }

  /* ── Page: add top padding so first story clears header ── */
  .page {
    padding-top    : 8px;
  }

  /* ── Date label: first one needs top spacing ── */
  .date-label:first-child {
    padding-top    : 12px;
    border-top     : none;
  }

  /* ── Story item: no negative margin hover on mobile ── */
  .story-item:hover {
    margin         : 0 !important;
    padding        : 11px 0 !important;
    background     : transparent !important;
    border-radius  : 0 !important;
    border-bottom  : 1px solid var(--border) !important;
  }

  /* ── Logo: must not overflow ── */
  .logo {
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
    max-width      : calc(100vw - 100px);
    flex-shrink    : 0;
  }
}

/* ════════════════════════════════════════════════════════════ */
/* ≤ 480px — iPhone specific header overlap fixes              */
/* ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Header height consistent */
  .header-main {
    height         : 50px;
    min-height     : 50px;
    padding        : 0 14px;
  }
  header {
    min-height     : 50px;
  }

  /* Ticker tighter */
  .ticker-bar {
    height         : 26px;
    max-height     : 26px;
  }
  .ticker-label {
    height         : 26px;
    line-height    : 26px;
    font-size      : 9px;
    padding        : 0 8px;
  }
  .ticker-track span,
  .ticker-scroll span {
    line-height    : 26px;
    height         : 26px;
    font-size      : 10.5px;
  }

  /* First content always has enough gap from header */
  .section-banner {
    padding-top    : 14px;
  }
  .hero-grid {
    margin-top     : 12px;
  }
  .date-label:first-child {
    padding-top    : 10px;
  }

  /* Status line items: show Live + count only */
  .status-line {
    padding        : 5px 14px;
    font-size      : 11px;
    gap            : 12px;
  }
  .status-item:nth-child(n+3) {
    display        : none;
  }
}

/* ════════════════════════════════════════════════════════════ */
/* ≤ 390px — iPhone 14/15                                      */
/* ════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {

  .header-main {
    height         : 48px;
    min-height     : 48px;
    padding        : 0 12px;
  }
  .ticker-bar {
    height         : 24px;
    max-height     : 24px;
  }
  .ticker-label {
    height         : 24px;
    line-height    : 24px;
    font-size      : 9px;
    padding        : 0 8px;
  }
  .ticker-track span,
  .ticker-scroll span {
    height         : 24px;
    line-height    : 24px;
    font-size      : 10px;
  }
}

/* ════════════════════════════════════════════════════════════ */
/* ≤ 375px — iPhone SE                                         */
/* ════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  .header-main {
    height         : 46px;
    min-height     : 46px;
    padding        : 0 10px;
  }
  .logo {
    font-size      : 16px;
  }
  .ticker-bar {
    height         : 22px;
    max-height     : 22px;
  }
  .ticker-label {
    height         : 22px;
    line-height    : 22px;
    font-size      : 8.5px;
  }
  .ticker-track span,
  .ticker-scroll span {
    height         : 22px;
    line-height    : 22px;
    font-size      : 9.5px;
    padding        : 0 10px;
  }
}

/* ════════════════════════════════════════════════════════════ */
/* iOS Safari — extra containment fixes                         */
/* ════════════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {

  /* Force ticker to never leak outside its box */
  .ticker-bar {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path        : inset(0 0 0 0);
    overflow         : hidden !important;
  }

  /* Force header background to be solid white on iOS */
  header {
    background-color : #ffffff !important;
    -webkit-backface-visibility: hidden;
    backface-visibility        : hidden;
  }

  /* Fix iOS font-size zoom on inputs */
  .cf-input,
  .cf-select,
  .cf-textarea,
  .search-hero-input,
  .header-search input,
  .mnd-search input,
  .nl-input {
    font-size       : 16px !important;
  }

  /* Smooth scrolling */
  .mnd-panel,
  .nav-inner,
  .ticker-scroll,
  .filter-row,
  .status-line {
    -webkit-overflow-scrolling: touch;
  }
}


/* ============================================================ */
/* ── CREATIVE SKIN ADS with PRODUCT LOGOS ───────────────────── */
/* ============================================================ */

.skin-ad-wrap {
  position       : fixed; inset: 0; z-index: 80;
  pointer-events : none; display: flex;
  justify-content: center; align-items: flex-start;
}
.skin-ad-left, .skin-ad-right {
  width          : calc((100vw - 1320px) / 2 - 8px);
  max-width      : 155px; height: 460px; margin-top: 112px;
  flex-shrink    : 0; border-radius: 16px; overflow: visible;
  pointer-events : all; position: relative;
}
.skin-ad-center { width: 1320px; flex-shrink: 0; pointer-events: none; }

/* Inner */
.skin-ad-inner {
  width          : 100%; height: 100%; border-radius: 16px;
  overflow       : hidden; display: flex; flex-direction: column;
  align-items    : center; justify-content: center;
  gap            : 10px; padding: 36px 14px 22px;
  text-align     : center; color: #fff; text-decoration: none;
  position       : relative;
  transition     : transform .3s cubic-bezier(.34,1.4,.64,1);
}
.skin-ad-inner:hover { transform: scale(1.03); }

.skin-ls .skin-ad-inner {
  background     : linear-gradient(160deg,#020c1b 0%,#0a1f3a 20%,#0d3460 45%,#1a5276 70%,#0d3460 90%,#020c1b 100%);
  animation      : glowLS 3s ease-in-out infinite;
}
.skin-st .skin-ad-inner {
  background     : linear-gradient(160deg,#1a0500 0%,#5c1800 20%,#c0392b 45%,#e67e22 70%,#c0392b 90%,#1a0500 100%);
  animation      : glowST 3s ease-in-out infinite;
}
@keyframes glowLS{0%,100%{box-shadow:0 8px 40px rgba(0,100,200,.3),inset 0 0 0 1px rgba(100,180,255,.12)}50%{box-shadow:0 8px 60px rgba(0,150,255,.6),inset 0 0 0 1px rgba(100,200,255,.4)}}
@keyframes glowST{0%,100%{box-shadow:0 8px 40px rgba(180,50,10,.35),inset 0 0 0 1px rgba(255,160,50,.12)}50%{box-shadow:0 8px 60px rgba(220,80,20,.65),inset 0 0 0 1px rgba(255,190,80,.4)}}

/* texture + shimmer */
.skin-ad-inner::before {
  content:'' ; position:absolute; inset:0;
  background:radial-gradient(ellipse 80px 80px at 20% 20%,rgba(255,255,255,.07) 0%,transparent 70%),
    radial-gradient(ellipse 60px 60px at 80% 70%,rgba(255,255,255,.05) 0%,transparent 70%),
    repeating-linear-gradient(0deg,transparent,transparent 22px,rgba(255,255,255,.03) 22px,rgba(255,255,255,.03) 23px),
    repeating-linear-gradient(90deg,transparent,transparent 22px,rgba(255,255,255,.03) 22px,rgba(255,255,255,.03) 23px);
  pointer-events:none;
}
.skin-ad-inner::after {
  content:''; position:absolute; top:-100%; left:-60%; width:50%; height:300%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);
  animation:sweep 5s ease-in-out infinite; transform:skewX(-15deg); pointer-events:none;
}
@keyframes sweep{0%,55%{left:-60%}80%,100%{left:130%}}

/* ── LOGO CONTAINER ────────────────────────────────────────── */
.skin-logo-wrap {
  width          : 80px;
  height         : 54px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  position       : relative;
  z-index        : 2;
  background     : rgba(255,255,255,.12);
  border-radius  : 10px;
  padding        : 8px 10px;
  border         : 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  transition     : background .2s;
}
.skin-ad-inner:hover .skin-logo-wrap {
  background     : rgba(255,255,255,.2);
}
.skin-logo {
  max-width      : 100%;
  max-height     : 100%;
  width          : auto;
  height         : auto;
  object-fit     : contain;
  display        : block;
}
.skin-logo-fallback {
  font-size      : 32px;
  line-height    : 1;
}

/* rest of elements */
.skin-ad-label { font-family:var(--font-cond);font-size:7.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.3;font-weight:700;position:relative;z-index:2; }
.skin-pill     { display:inline-flex;align-items:center;gap:5px;font-family:var(--font-cond);font-size:8px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:4px 11px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);position:relative;z-index:2; }
.skin-blink    { width:6px;height:6px;border-radius:50%;animation:blinkDot 1.4s ease-in-out infinite; }
.skin-ls .skin-blink { background:#48cae4;box-shadow:0 0 8px #48cae4; }
.skin-st .skin-blink { background:#ffd166;box-shadow:0 0 8px #ffd166; }
@keyframes blinkDot{0%,100%{opacity:1;transform:scale(1)}45%{opacity:.05;transform:scale(.4)}60%{opacity:1;transform:scale(1.4)}}
.skin-brand    { font-family:var(--font-head);font-size:16px;font-weight:900;line-height:1.1;letter-spacing:-.01em;text-shadow:0 2px 16px rgba(0,0,0,.5);position:relative;z-index:2; }
.skin-accent-line { width:30px;height:2px;border-radius:2px;position:relative;z-index:2; }
.skin-ls .skin-accent-line { background:linear-gradient(90deg,#48cae4,#0096c7); }
.skin-st .skin-accent-line { background:linear-gradient(90deg,#ffd166,#ef9f27); }
.skin-tagline  { font-size:9px;font-weight:300;opacity:.7;line-height:1.55;padding:0 6px;position:relative;z-index:2; }
.skin-url      { font-family:var(--font-cond);font-size:8px;letter-spacing:.1em;text-transform:uppercase;opacity:.35;position:relative;z-index:2; }
.skin-cta      { font-family:var(--font-cond);font-weight:800;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border-radius:8px;width:90%;text-align:center;position:relative;z-index:2;animation:ctaPop 3.5s ease-in-out infinite;transition:all .2s;border:none;cursor:pointer;color:#fff; }
.skin-ls .skin-cta { background:linear-gradient(135deg,#0096c7,#0077b6);box-shadow:0 4px 16px rgba(0,150,200,.5); }
.skin-st .skin-cta { background:linear-gradient(135deg,#ef9f27,#e67e22);box-shadow:0 4px 16px rgba(230,130,30,.55); }
.skin-ad-inner:hover .skin-cta { transform:scale(1.06);animation:none; }
@keyframes ctaPop{0%,70%,100%{transform:scale(1)}76%{transform:scale(.95)}82%{transform:scale(1.06)}88%{transform:scale(.98)}}

/* Close button */
.skin-close-btn { position:absolute;top:-13px;z-index:200;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.12);color:#222;font-size:11px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 2px 12px rgba(0,0,0,.3);transition:all .2s cubic-bezier(.34,1.4,.64,1); }
.skin-close-btn:hover { background:#111;color:#fff;transform:scale(1.2) rotate(90deg); }
.skin-ad-left  .skin-close-btn { right:8px; }
.skin-ad-right .skin-close-btn { left:8px; }

/* Switcher */
.skin-switcher { position:fixed;top:116px;right:calc((100vw - 1320px)/2 - 4px);z-index:85;display:flex;flex-direction:column;gap:7px;pointer-events:all; }
.skin-switch-btn { width:8px;height:8px;border-radius:50%;border:none;background:rgba(0,0,0,.18);cursor:pointer;transition:all .2s;padding:0; }
.skin-switch-btn.active { background:var(--blue);transform:scale(1.4);box-shadow:0 0 6px rgba(0,87,255,.5); }

@media (max-width:1499px) { .skin-ad-wrap,.skin-switcher { display:none; } }


/* ============================================================ */
/* ── BLOOMBERG-STYLE BYLINE ROW ─────────────────────────────── */
/* ============================================================ */

/* ── BYLINE ROW (author + timestamp + actions) ─────────────── */
.article-byline-row {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  padding      : 16px 0;
  border-top   : 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin       : 16px 0 24px;
  flex-wrap    : wrap;
}

/* ── AVATAR — small circle ─────────────────────────────────── */
.byline-avatar-wrap { flex-shrink: 0; }
.byline-avatar {
  width        : 40px;
  height       : 40px;
  border-radius: 50%;
  object-fit   : cover;
  border       : 2px solid var(--border);
  display      : block;
}
.byline-avatar-init {
  width        : 40px;
  height       : 40px;
  border-radius: 50%;
  background   : var(--blue);
  color        : #fff;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-family  : var(--font-head);
  font-size    : 16px;
  font-weight  : 900;
  border       : 2px solid var(--border);
  flex-shrink  : 0;
}

/* ── AUTHOR INFO block ─────────────────────────────────────── */
.byline-info {
  display        : flex;
  flex-direction : column;
  gap            : 3px;
  flex           : 1;
  min-width      : 0;
}
.byline-name-row {
  display        : flex;
  align-items    : center;
  gap            : 4px;
}
.byline-label {
  font-size      : 12px;
  color          : var(--ink-light);
  font-weight    : 400;
}
.byline-name {
  font-family    : var(--font-cond);
  font-size      : 13px;
  font-weight    : 800;
  color          : var(--ink);
  text-decoration: none;
  letter-spacing : .02em;
  transition     : color .15s;
}
.byline-name:hover { color: var(--blue); }

/* ── TIMESTAMP row ─────────────────────────────────────────── */
.byline-time-row {
  display        : flex;
  align-items    : center;
  gap            : 6px;
  flex-wrap      : wrap;
}
.byline-rel-time {
  font-size      : 12px;
  font-weight    : 600;
  color          : var(--ink-mid);
}
.byline-dot {
  color          : var(--border-mid);
  font-size      : 12px;
}
.byline-abs-time {
  font-size      : 11px;
  color          : var(--ink-light);
  font-weight    : 300;
}

/* ── ACTION BUTTONS — pushed to right ──────────────────────── */
.byline-actions {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  margin-left    : auto;
  flex-shrink    : 0;
}

/* ============================================================ */
/* ── ARTICLE AUTHOR BOX (bottom of article) ─────────────────── */
/* ============================================================ */

.article-author-box {
  display        : flex;
  align-items    : flex-start;
  gap            : 18px;
  padding        : 24px;
  margin         : 32px 0 8px;
  background     : var(--off-white);
  border         : 1px solid var(--border);
  border-left    : 4px solid var(--blue);
  border-radius  : 0 var(--radius-lg) var(--radius-lg) 0;
}
.aab-avatar {
  width          : 68px;
  height         : 68px;
  border-radius  : 50%;
  object-fit     : cover;
  flex-shrink    : 0;
  border         : 3px solid var(--white);
  box-shadow     : 0 2px 10px rgba(0,0,0,.12);
}
.aab-avatar-fallback {
  width          : 68px;
  height         : 68px;
  border-radius  : 50%;
  background     : var(--blue);
  color          : #fff;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : var(--font-head);
  font-size      : 26px;
  font-weight    : 900;
  flex-shrink    : 0;
  border         : 3px solid var(--white);
  box-shadow     : 0 2px 10px rgba(0,0,0,.12);
}
.aab-right       { flex: 1; min-width: 0; }
.aab-label {
  font-family    : var(--font-cond);
  font-size      : 10px;
  font-weight    : 700;
  letter-spacing : .14em;
  text-transform : uppercase;
  color          : var(--ink-light);
  margin-bottom  : 4px;
}
.aab-name {
  font-family    : var(--font-head);
  font-size      : 18px;
  font-weight    : 800;
  color          : var(--ink);
  text-decoration: none;
  letter-spacing : -.01em;
  display        : block;
  margin-bottom  : 8px;
  transition     : color .15s;
}
.aab-name:hover  { color: var(--blue); }
.aab-bio {
  font-size      : 13px;
  color          : var(--ink-mid);
  line-height    : 1.65;
  font-weight    : 300;
  margin-bottom  : 12px;
}
.aab-link {
  font-family    : var(--font-cond);
  font-size      : 11px;
  font-weight    : 700;
  letter-spacing : .06em;
  color          : var(--blue);
  text-decoration: none;
  text-transform : uppercase;
  transition     : opacity .15s;
}
.aab-link:hover  { opacity: .75; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .article-byline-row { gap: 8px; }
  .byline-actions     { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
  .byline-abs-time    { display: none; }
  .byline-dot         { display: none; }
  .article-author-box { flex-direction: column; gap: 14px; padding: 18px 16px; }
  .aab-avatar,
  .aab-avatar-fallback{ width: 54px; height: 54px; }
  .aab-name           { font-size: 16px; }
}


/* ============================================================ */
/* ── LANGUAGE SELECTOR ───────────────────────────────────────── */
/* ============================================================ */

.lang-selector {
  position     : relative;
  flex-shrink  : 0;
}

/* ── Trigger button ─────────────────────────────────────────── */
.lang-btn {
  display      : flex;
  align-items  : center;
  gap          : 5px;
  padding      : 6px 10px;
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  background   : transparent;
  cursor       : pointer;
  font-family  : var(--font-cond);
  font-size    : 12px;
  font-weight  : 700;
  letter-spacing:.04em;
  color        : var(--ink);
  transition   : all .15s;
  white-space  : nowrap;
}
.lang-btn:hover {
  border-color : var(--blue);
  color        : var(--blue);
  background   : var(--blue-light);
}
.lang-globe  { font-size: 14px; line-height: 1; }
.lang-current{ font-size: 11px; }
.lang-arrow  { font-size: 9px; opacity: .6; transition: transform .15s; }
.lang-selector:has(.lang-dropdown.open) .lang-arrow { transform: rotate(180deg); }

/* ── Dropdown panel ─────────────────────────────────────────── */
.lang-dropdown {
  position     : absolute;
  top          : calc(100% + 6px);
  right        : 0;
  width        : 230px;
  background   : var(--white);
  border       : 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow   : 0 8px 32px rgba(0,0,0,.12);
  z-index      : 9999;
  overflow     : hidden;
  display      : none;
  animation    : langDrop .15s ease;
}
.lang-dropdown.open { display: block; }
@keyframes langDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Search box ─────────────────────────────────────────────── */
.lang-search-wrap {
  padding      : 10px 10px 6px;
  border-bottom: 1px solid var(--border);
}
.lang-search {
  width        : 100%;
  padding      : 6px 10px;
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  font-family  : var(--font-body);
  font-size    : 12px;
  color        : var(--ink);
  outline      : none;
  background   : var(--off-white);
  transition   : border-color .15s;
  box-sizing   : border-box;
}
.lang-search:focus { border-color: var(--blue); }

/* ── List ───────────────────────────────────────────────────── */
.lang-list {
  max-height   : 260px;
  overflow-y   : auto;
  padding      : 4px 0;
  scrollbar-width: thin;
}
.lang-list::-webkit-scrollbar       { width: 4px; }
.lang-list::-webkit-scrollbar-track { background: transparent; }
.lang-list::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 4px; }

/* ── Each language item ─────────────────────────────────────── */
.lang-item {
  display      : flex;
  align-items  : center;
  gap          : 9px;
  padding      : 8px 14px;
  cursor       : pointer;
  transition   : background .12s;
  font-size    : 12px;
  color        : var(--ink);
}
.lang-item:hover  { background: var(--off-white); }
.lang-item.active {
  background   : var(--blue-light);
  color        : var(--blue);
  font-weight  : 600;
}
.lang-flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
.lang-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Mobile: place lang selector in header ──────────────────── */
@media (max-width: 900px) {
  .lang-dropdown {
    right        : -10px;
    width        : 210px;
  }
}