/* ─── RESET & BASE ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --cream:   #F7F4EF;
      --ink:     #0D0D0D;
      --ink-mid: #555550;
      --ink-faint:#999993;
      --rust:    #ff6a00;
      --rust-lt: #C8651A;
      --rule:    rgba(0,0,0,0.1);
      --card-bg: #FFFFFF;
      --page-bg: #F7F4EF;
      --radius:  12px;
      --serif:   'Sora',sans-serif;
      --sans:    "Sora",sans-serif;
    }

    body {
      font-family: var(--sans);
      
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    /* ─── NAV (MOBILE TOGGLE) ──────────────────────────────── */
    .menu-toggle { display: none; }

    @media (max-width: 768px) {
      .menu-toggle { display: block; }
      .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px; left: 0;
        width: 100%;
        background: #000000;
        padding: 20px;
      }
      .nav-menu.active { display: flex; }
    }

    /* ─── PAGE WRAPPER ─────────────────────────────────────── */
    .insights-page {
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 24px 100px;
    }

    @media (max-width: 600px) {
      .insights-page { padding: 40px 16px 80px; }
    }

    /* ─── MASTHEAD ─────────────────────────────────────────── */
    .masthead {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 2.5rem;
    }

    .masthead-eyebrow {
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: 12px;
    }

    .masthead-title {
      /* font-family: var(--serif); */
      font-size: clamp(42px, 6vw, 68px);
      font-weight: 400;
      line-height: 1.02;
      color: var(--ink);
    }

    .masthead-title em {
      font-style: normal !important;
      color: var(--rust);
      font-family:var(--serif) ;
    }

    .masthead-right {
      flex-shrink: 0;
      text-align: right;
      max-width: 260px;
    }

    .masthead-right p {
      font-size: 13px;
      color: var(--ink-mid);
      line-height: 1.7;
    }

    @media (max-width: 640px) {
      .masthead { flex-direction: column; align-items: flex-start; }
      .masthead-right { text-align: left; max-width: 100%; }
    }

    /* ─── TABS ─────────────────────────────────────────────── */
    .tabs {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 2.5rem;
    }

    .tab-btn {
      padding: 12px 24px;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 400;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--ink-faint);
      cursor: pointer;
      transition: color .18s, border-color .18s;
      margin-bottom: -1px;
      letter-spacing: .02em;
    }

    .tab-btn.active {
      color: var(--ink);
      font-weight: 500;
      border-bottom-color: #C6A15B;
    }

    /* ─── TAB PANELS ───────────────────────────────────────── */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ─── SKELETON ─────────────────────────────────────────── */
    .skeleton { animation: shimmer 1.6s ease-in-out infinite; }
    @keyframes shimmer { 0%,100%{opacity:.35} 50%{opacity:.75} }

    .sk-block {
      background: rgba(0,0,0,0.07);
      border-radius: 6px;
    }

    /* ─── HERO LAYOUT ──────────────────────────────────────── */
    .hero-grid {
      display: grid;
      grid-template-columns: 1.45fr 1fr;
      grid-template-rows: auto auto;
      gap: 1px;
      background: var(--rule);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 1px;
    }

    /* Featured card spans 2 rows on the left */
    .hero-featured {
      grid-row: span 2;
      background: var(--card-bg);
      cursor: pointer;
      transition: background .2s;
      display: flex;
      flex-direction: column;
    }
    .hero-featured:hover { background: #FDFAF6; }

    .hero-secondary {
      background: var(--card-bg);
      cursor: pointer;
      transition: background .2s;
      display: flex;
      flex-direction: column;
    }
    .hero-secondary:hover { background: #FDFAF6; }

    @media (max-width: 768px) {
      .hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
      }
      .hero-featured { grid-row: span 1; }
    }

    /* ─── CARD IMAGE ───────────────────────────────────────── */
    .card-image {
      width: 100%;
      object-fit: cover;
      display: block;
      flex-shrink: 0;
    }

    .card-image-placeholder {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      flex-shrink: 0;
    }

    /* ─── CARD BODY ────────────────────────────────────────── */
    .card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
    .card-body-sm { padding: 18px; flex: 1; display: flex; flex-direction: column; }

    .cat-pill {
      display: inline-block;
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 40px;
      border: 1px solid var(--rule);
      color: var(--ink-mid);
      background: #C6A15B !important;
      margin-bottom: 12px;
      width: fit-content;
    }

    .card-title-lg {
      /* font-family: var(--serif); */
      font-size: clamp(22px, 2.5vw, 30px);
      font-weight: 400;
      line-height: 1.18;
      color: var(--ink);
      margin-bottom: 12px;
    }

    .card-title-md {
      /* font-family: var(--serif); */
      font-size: 19px;
      font-weight: 400;
      line-height: 1.25;
      color: var(--ink);
      margin-bottom: 8px;
    }

    .card-excerpt {
      font-size: 13px;
      color: var(--ink-mid);
      line-height: 1.75;
      margin-bottom: 16px;
      flex: 1;
    }

    .card-excerpt-sm {
      font-size: 12px;
      color: var(--ink-mid);
      line-height: 1.65;
      margin-bottom: 12px;
      flex: 1;
    }

    .byline {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
    }

    .avatar {
      width: 30px; height: 30px;
      border-radius: 50%;
      background: #DDD8CF;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 500;
      color: #5a4a38;
      flex-shrink: 0;
      letter-spacing: .03em;
    }

    .avatar-sm {
      width: 24px; height: 24px;
      font-size: 9px;
    }

    .byline-info { font-size: 12px; color: var(--ink-faint); }
    .byline-name { font-weight: 500; color: var(--ink-mid); }

    .read-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      color: #C6A15B;
      font-weight: 500;
      margin-top: 14px;
      letter-spacing: .02em;
    }

    .read-arrow {
      display: inline-block;
      transition: transform .18s;
    }

    *:hover > .read-link .read-arrow { transform: translateX(3px); }

    /* ─── LOWER CARD GRID ──────────────────────────────────── */
    .lower-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1px;
      background: var(--rule);
      border: 1px solid var(--rule);
      border-top: none;
      border-radius: 0 0 var(--radius) var(--radius);
      overflow: hidden;
    }

    .lower-card {
      background: var(--card-bg);
      padding: 22px;
      cursor: pointer;
      transition: background .2s;
    }
    .lower-card:hover { background: #FDFAF6; }

    .lower-num {
      /* font-family: var(--serif); */
      font-style: italic;
      font-size: 13px;
      color: var(--ink-faint);
      margin-bottom: 10px;
    }

    .lower-title {
      /* font-family: var(--serif); */
      font-size: 17px;
      font-weight: 400;
      line-height: 1.3;
      color: var(--ink);
      margin-bottom: 10px;
    }

    .lower-meta {
      font-size: 11px;
      color: var(--ink-faint);
      line-height: 1.5;
    }

    /* ─── SENTIMENT BADGE ──────────────────────────────────── */
    .badge {
      display: inline-block;
      font-size: 10px;
      padding: 2px 9px;
      border-radius: 40px;
      margin-top: 10px;
    }
    .badge-pos { background: #EAF3DE; color: #3B6D11; }
    .badge-neg { background: #FCEBEB; color: #A32D2D; }
    .badge-neu { background: #F1EFE8; color: #5F5E5A; }

    /* ─── NEWS LIST ────────────────────────────────────────── */
    .news-list {
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--card-bg);
    }

    .news-list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 24px;
      border-bottom: 1px solid var(--rule);
      background: #C6A15B !important;
    }

    .news-list-header span {
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #fff;
    }

    .live-dot {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #3B6D11;
    }

    .live-dot::before {
      content: '';
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #639922;
      display: inline-block;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%,100% { opacity: 1; }
      50% { opacity: .4; }
    }

    .news-row {
      display: grid;
      grid-template-columns: 36px 1fr auto;
      gap: 20px;
      padding: 22px 24px;
      border-bottom: 1px solid var(--rule);
      align-items: start;
      cursor: pointer;
      transition: background .18s;
      text-decoration: none;
    }

    .news-row:last-child { border-bottom: none; }
    .news-row:hover { background: #FDFAF6; }

    .news-index {
      /* font-family: var(--serif); */
      font-style: italic;
      font-size: 15px;
      color: var(--ink-faint);
      padding-top: 3px;
    }

    .news-source {
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: 6px;
    }

    .news-headline {
      /* font-family: var(--serif); */
      font-size: 19px;
      font-weight: 400;
      line-height: 1.28;
      color: var(--ink);
      margin-bottom: 7px;
    }

    .news-summary {
      font-size: 12px;
      color: var(--ink-mid);
      line-height: 1.7;
    }

    .news-right {
      text-align: right;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }

    .news-time {
      font-size: 11px;
      color: var(--ink-faint);
      white-space: nowrap;
    }

    .ext-icon {
      font-size: 15px;
      color: var(--ink-faint);
      transition: color .18s;
    }

    .news-row:hover .ext-icon { color: var(--rust); }

    @media (max-width: 600px) {
      .news-row { grid-template-columns: 28px 1fr; }
      .news-right { display: none; }
      .card-body { padding: 18px; }
      .lower-card { padding: 16px; }
    }

    /* ─── EMPTY / ERROR ────────────────────────────────────── */
    .feed-message {
      text-align: center;
      padding: 4rem 2rem;
      color: var(--ink-faint);
      font-size: 14px;
      /* font-family: var(--serif); */
      font-style: italic;
    }