:root {
      --hp-gold-1: #F4D87B;
      --hp-gold-2: #D6B14C;
    }

    body {
      font-family: 'Poppins', sans-serif
    }

    /* ===== ARTICLE CARD ===== */
    .hp-article-box {
      background: rgba(255, 255, 255, .88);
      backdrop-filter: blur(22px);
      border-radius: 32px;
      padding: 32px;
      border: 1px solid rgba(15, 23, 42, .08);
      box-shadow: 0 30px 80px rgba(0, 0, 0, .12);
    }

    /* ===== HERO ===== */
    .hp-sign-badge {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--hp-gold-1), var(--hp-gold-2));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 900;
      color: #111;
      box-shadow: 0 6px 10px rgba(251, 191, 36, .45);
      margin-bottom: 16px;
    }

    .hp-article-title {
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 900;
      line-height: 1.15;
      background: linear-gradient(90deg, var(--hp-gold-1), var(--hp-gold-2));
      -webkit-background-clip: text;
      color: transparent;
      margin-bottom: 16px;
    }

    .hp-article-desc {
      margin-top: 12px;
      font-size: 1.05rem;
      color: #475569;
      max-width: 720px;
    }

    /* ===== HIGHLIGHTS ===== */
    .hp-article-highlights {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }

    .hp-article-highlights div {
      background: rgba(255, 255, 255, .75);
      border-radius: 18px;
      padding: 18px;
      border: 1px solid rgba(15, 23, 42, .4);
    }

    .hp-article-highlights span {
      display: block;
      font-size: 12px;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .hp-article-highlights strong {
      font-size: 16px;
      color: #0f172a;
    }

    /* ===== CONTENT ===== */
    .hp-article-content {
      font-size: 1.05rem;
      line-height: 1.8;
      color: #1e293b;
    }

    /*.hp-article-content p {*/
    /*  margin-bottom: 1.4em*/
    /*}*/

    /* ===== TAGS ===== */
    .hp-article-tags {
      margin-top: 36px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .hp-article-tags span {
      background: rgba(251, 191, 36, .15);
      color: #92400e;
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
    }

    /* ===== CTA ===== */
    .hp-article-cta {
      margin-top: 56px;
      padding: 36px;
      border-radius: 28px;
      background: linear-gradient(135deg, rgba(251, 191, 36, .18), rgba(249, 115, 22, .14));
      border: 1px solid rgba(251, 191, 36, .35);
      text-align: center;
    }

    .hp-article-cta h3 {
      font-size: 1.7rem;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .hp-article-cta p {
      color: #475569;
      margin-bottom: 22px
    }

    .hp-cta-buttons {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .hp-cta-buttons a:first-child {
      background: linear-gradient(90deg, var(--hp-gold-1), var(--hp-gold-2));
      padding: 14px 26px;
      border-radius: 16px;
      font-weight: 800;
      color: #111;
    }

    .hp-cta-buttons a:last-child {
      border: 1px solid rgba(15, 23, 42, .25);
      padding: 14px 26px;
      border-radius: 16px;
      font-weight: 700;
    }


    a.bg-gradient-to-r {
      box-shadow: 0 8px 22px rgba(251, 191, 36, .35);
    }


    /* NEW TYPOGRAPHY */
    /* ======================================================
   PREMIUM HOROSCOPE ARTICLE TYPOGRAPHY
   ====================================================== */

    .hp-article {
      --text-main: #1e293b;
      --text-soft: #475569;
      --accent-gold: #d6b14c;
      --accent-light: rgba(214, 177, 76, 0.15);
      --border-soft: rgba(15, 23, 42, 0.08);
    }

    /* ---------- Paragraphs ---------- */
    .hp-article .hp-article-content p {
      font-size: 1.05rem;
      line-height: 1.9;
      color: var(--text-main);
      margin-bottom: 1.6em;
    }

    /* Slight emphasis for first paragraph */
    .hp-article .hp-article-content p:first-of-type {
      font-size: 1.12rem;
      color: #0f172a;
    }

    /* ---------- Headings ---------- */
    .hp-article .hp-article-content h2 {
      font-size: 1.7rem;
      font-weight: 800;
      margin-top: 3.2rem;
      margin-bottom: 1.2rem;
      line-height: 1.25;
      color: #0f172a;
      position: relative;
    }

    .hp-article .hp-article-content h2::before {
      content: '';
      position: absolute;
      left: -14px;
      top: 0.4em;
      width: 6px;
      height: 70%;
      background: linear-gradient(180deg, #f4d87b, #d6b14c);
      border-radius: 999px;
    }

    .hp-article .hp-article-content h3 {
      font-size: 1.35rem;
      font-weight: 700;
      margin-top: 2.5rem;
      margin-bottom: 0.8rem;
      color: #1e293b;
    }

    /* ---------- Lists ---------- */
    .hp-article .hp-article-content ul {
      margin: 1.8rem 0;
      padding-left: 1.4rem;
    }

    .hp-article .hp-article-content ul li {
      margin-bottom: 0.8rem;
      line-height: 1.7;
      color: var(--text-soft);
    }

    /* ---------- Strong & Emphasis ---------- */
    .hp-article .hp-article-content strong {
      color: #0f172a;
      font-weight: 700;
    }

    .hp-article .hp-article-content em {
      color: #334155;
    }

    /* ---------- Astrology Insight / Callouts ---------- */
    .hp-article .hp-article-content blockquote,
    .hp-article .hp-article-content .astro-callout {
      margin: 2.8rem 0;
      padding: 1.8rem 2rem;
      background: linear-gradient(135deg,
          rgba(251, 191, 36, 0.12),
          rgba(249, 115, 22, 0.08));
      border-left: 6px solid var(--accent-gold);
      border-radius: 1.5rem;
      font-size: 1.05rem;
      line-height: 1.8;
      color: #1e293b;
    }

    /* Optional label inside callout */
    .hp-article .hp-article-content blockquote::before {
      content: "Astrology Insight";
      display: block;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #92400e;
      margin-bottom: 0.6rem;
    }

    /* ---------- Horizontal Rules ---------- */
    .hp-article .hp-article-content hr {
      border: none;
      height: 1px;
      background: linear-gradient(to right,
          transparent,
          rgba(15, 23, 42, 0.15),
          transparent);
      margin: 3.5rem 0;
    }

    /* ---------- Links inside content ---------- */
    .hp-article .hp-article-content a {
      color: #b45309;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .hp-article .hp-article-content a:hover {
      color: #92400e;
    }

    /* ---------- Mobile refinement ---------- */
    @media (max-width: 768px) {
      .hp-article .hp-article-content p {
        font-size: 1rem;
      }

      .hp-article .hp-article-content h2 {
        font-size: 1.45rem;
      }
    }
    
    
    
    
    
    
    /* ======= Share Strip ======= */
    .share-strip-flat {
      display: flex;
      align-items: center;
      overflow: hidden;

      border-radius: 6px;
      width: 100%;
    }

    /* Share text */
    .share-text {
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      background: #1e293b;
      color: #fff;
    }

    /* Each block */
    .share-item {
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;

      padding: 10px 0;
      font-size: 13px;
      font-weight: 600;
      color: white;

      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .share-item svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }

    /* COLORS (flat like your image) */
    .share-item.wa { background: #25D366; }
    .share-item.fb { background: #3b5998; }
    .share-item.x  { background: #1DA1F2; }

    /* Hover effect (subtle) */
    .share-item:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    /* MOBILE */
    @media (max-width: 768px) {
      .share-item span {
        display: none;
      }

      .share-text {
        font-size: 12px;
        padding: 10px;
      }
    }