*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

   
    /* ── WELCOME BANNER ─────────────────────────────── */
    div#full-col {
        width: 100%;
    }
    .welcome-banner {
      width:100%;
      background: var(--black); color: var(--white);
      padding: 32px 36px;
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 0;
      animation: fadeUp .4s ease both;
    }
    .welcome-text h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.3px;
    }
    .welcome-text p {
      font-family: 'EB Garamond', serif; font-style: italic;
      font-size: 16px; color: #a8a29e; margin-top: 5px;
    }
    .welcome-meta { display: flex; gap: 32px; }
    .welcome-stat { text-align: center; }
    .welcome-stat-num {
      font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700;
      display: block; line-height: 1;
    }
    .welcome-stat-label {
      font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
      text-transform: uppercase; color: #78716c; margin-top: 4px; display: block;
    }
    .welcome-divider { width: 1px; background: #2d2d2d; align-self: stretch; }

    /* ── GRID ───────────────────────────────────────── */
    .dash-grid {
      display: grid;
      grid-template-columns: 1fr 1fr  300px;
      grid-template-rows: auto;
      gap: 24px;
      margin-bottom: -48px;
  
    }

    /* ── CARD BASE ──────────────────────────────────── */
    .card {
      background: var(--white); border: 1px solid var(--rule);
      animation: fadeUp .4s ease both;
    }
    .card:nth-child(1) { animation-delay:.04s; }
    .card:nth-child(2) { animation-delay:.08s; }
    .card:nth-child(3) { animation-delay:.12s; }
    .card:nth-child(4) { animation-delay:.16s; }
    .card:nth-child(5) { animation-delay:.20s; }
    .card:nth-child(6) { animation-delay:.24s; }

    .card-header {
      padding: 16px 22px; border-bottom: 1px solid var(--rule);
      display: flex; align-items: center; justify-content: space-between;
    }
    .card-label {
      font-size: 10px; font-weight: 600;
      letter-spacing: 2px; text-transform: uppercase; color: var(--black);
    }
    .card-action {
      font-size: 11px; color: var(--muted); text-decoration: none;
      letter-spacing: 0.3px; transition: color .2s;
      cursor: pointer; border: none; background: none;
    }
    .card-action:hover { color: var(--black); }
    .card-body { padding: 22px; }

    /* ── STAT CARDS (span 1 col each) ───────────────── */
  
    .stat-num {
      font-family: 'Playfair Display', serif;
      font-size: 38px; font-weight: 700; letter-spacing: -1px; line-height: 1;
    }
    .stat-label {
      font-size: 11px; color: var(--muted); letter-spacing: 0.4px; margin-top: 5px;
    }
    .stat-delta {
      display: inline-flex; align-items: center; gap: 4px;
      margin-top: 10px; font-size: 11.5px; font-weight: 600;
      padding: 3px 8px;
    }
    .stat-delta.up { background: var(--green-bg); color: var(--green); }
    .stat-delta.neutral { background: var(--bg); color: var(--muted); }
    .stat-delta svg { width: 10px; height: 10px; }
    .stat-bar {
      height: 3px; background: var(--rule-lt); margin-top: 16px; overflow: hidden;
    }
    .stat-bar-fill { height: 100%; background: var(--black); transition: width .8s ease; }

    /* ── SAVED ARTICLES (spans 3 cols) ──────────────── */
    .span-3 { grid-column: span 3; }
    .span-4 { grid-column: span 4; }
    .span-1-right { grid-column: 4; }

    .articles-list { display: flex; flex-direction: column; }
    .article-row {
      display: flex; align-items: flex-start; gap: 16px;
      padding: 16px 0; border-bottom: 1px solid var(--rule-lt);
      transition: background .15s; cursor: pointer;
    }
    .article-row:last-child { border-bottom: none; padding-bottom: 0; }
    .article-row:hover .article-title { color: var(--accent); }
    .article-num {
      font-family: 'Playfair Display', serif;
      font-size: 28px; font-weight: 700; color: var(--rule);
      line-height: 1; flex-shrink: 0; width: 28px; text-align: right;
      margin-top: 2px;
    }
    .article-content { flex: 1; }
    .article-category {
      font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
      text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
    }
    .article-title {
      font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600;
      line-height: 1.35; letter-spacing: -0.2px; transition: color .2s;
    }
    .article-meta {
      font-size: 11px; color: var(--muted); margin-top: 5px; letter-spacing: 0.2px;
    }
    .article-save {
      border: none; background: none; cursor: pointer; padding: 4px;
      color: var(--muted); transition: color .2s; flex-shrink: 0;
    }
    .article-save:hover { color: var(--black); }
    .article-save svg { width: 14px; height: 14px; }

    /* ── READING PROGRESS (sidebar top) ─────────────── */
    .sidebar-stack { display: flex; flex-direction: column; gap: 0; grid-row: span 3; }

    .progress-item {
      padding: 14px 0; border-bottom: 1px solid var(--rule-lt);
    }
    .progress-item:last-child { border-bottom: none; }
    .progress-label {
      font-size: 12px; font-weight: 500; color: var(--off-black);
      line-height: 1.4; margin-bottom: 8px; cursor: pointer;
    }
    .progress-label:hover { color: var(--accent); }
    .progress-bar { height: 2px; background: var(--rule-lt); overflow: hidden; }
    .progress-fill { height: 100%; background: var(--black); }
    .progress-pct {
      font-size: 10px; color: var(--muted); margin-top: 4px;
      display: flex; justify-content: space-between; align-items: center;
    }

    /* ── RECOMMENDED ─────────────────────────────────── */
    .rec-list { display: flex; flex-direction: column; gap: 0; }
    .rec-item {
      padding: 13px 0; border-bottom: 1px solid var(--rule-lt);
      cursor: pointer; transition: background .15s;
    }
    .rec-item:last-child { border-bottom: none; padding-bottom: 0; }
    .rec-item:hover .rec-title { color: var(--accent); }
    .rec-cat {
      font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
      text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
    }
    .rec-title {
      font-family: 'Playfair Display', serif; font-size: 13.5px;
      font-weight: 600; line-height: 1.4; transition: color .2s;
    }
    .rec-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }

    /* ── SUBSCRIPTION BANNER ─────────────────────────── */
    .sub-banner {
      background: var(--black); color: var(--white); padding: 22px;
    }
    .sub-banner-label {
      font-size: 9px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: #78716c; margin-bottom: 8px;
    }
    .sub-banner-plan {
      font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700;
    }
    .sub-banner-until { font-size: 12px; color: #a8a29e; margin-top: 3px; }
    .sub-banner-bar { height: 2px; background: #2d2d2d; margin: 16px 0; overflow: hidden; }
    .sub-banner-fill { height: 100%; background: var(--white); width: 33%; }
    .sub-banner-note { font-size: 11.5px; color: #a8a29e; line-height: 1.5; }
    .sub-banner-link {
      display: inline-block; margin-top: 14px;
      font-size: 10px; font-weight: 600; letter-spacing: 1.8px;
      text-transform: uppercase; color: var(--white);
      border-bottom: 1px solid #444; padding-bottom: 2px;
      text-decoration: none; transition: border-color .2s;
    }
    .sub-banner-link:hover { border-color: var(--white); }

    /* ── QUICK LINKS ─────────────────────────────────── */
    .quick-links { display: flex; flex-direction: column; gap: 0; }
    .quick-link {
      display: flex; align-items: center; justify-content: space-between;
      padding: 13px 0; border-bottom: 1px solid var(--rule-lt);
      font-size: 12.5px; color: var(--off-black); text-decoration: none;
      cursor: pointer; transition: color .2s;
    }
    .quick-link:last-child { border-bottom: none; }
    .quick-link:hover { color: var(--accent); }
    .quick-link-icon { display: flex; align-items: center; gap: 10px; }
    .quick-link-icon svg { width: 14px; height: 14px; color: var(--muted); }

    /* ── TOPICS ──────────────────────────────────────── */
    .topics-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
    .topic-tag {
      border: 1px solid var(--rule); padding: 5px 12px;
      font-size: 11px; font-weight: 500; color: var(--off-black);
      cursor: pointer; transition: background .15s, border-color .15s, color .15s;
      letter-spacing: 0.3px;
    }
    .topic-tag:hover, .topic-tag.active { background: var(--black); border-color: var(--black); color: #fff; }

    /* ── LATEST NEWS (full width) ────────────────────── */
    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }
    .news-item {
      padding: 18px 20px; border-right: 1px solid var(--rule-lt);
      cursor: pointer; transition: background .15s;
    }
    .news-item:last-child { border-right: none; }
    .news-item:hover { background: #faf9f7; }
    .news-item:hover .news-title { color: var(--accent); }
    .news-breaking {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
    }
    .news-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
    .news-cat {
      font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
      text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
    }
    .news-title {
      font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600;
      line-height: 1.4; letter-spacing: -0.2px; transition: color .2s;
    }
    .news-meta { font-size: 11px; color: var(--muted); margin-top: 8px; }

    /* ── FOOTER ──────────────────────────────────────── */
    footer {
      border-top: 1.5px solid var(--rule); background: var(--white);
      padding: 22px 48px; display: flex; justify-content: space-between; align-items: center;
    }
    footer p { font-size: 11px; color: var(--muted); }
    footer nav { display: flex; gap: 20px; }
    footer nav a { font-size: 11px; color: var(--muted); text-decoration: none; transition: color .2s; }
    footer nav a:hover { color: var(--black); }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 960px) {
      .dash-grid { grid-template-columns: 1fr 1fr; }
      .span-3 { grid-column: span 2; }
      .span-4 { grid-column: span 2; }
      .span-1-right { grid-column: span 2; }
      .sidebar-stack { grid-row: auto; }
      .news-grid { grid-template-columns: 1fr; }
      .news-item { border-right: none; border-bottom: 1px solid var(--rule-lt); }
      main { padding: 28px 20px 60px; }
      .header-top { padding: 0 20px; }
      .header-nav { padding: 0 20px; }
      footer { flex-direction: column; gap: 14px; padding: 18px 20px; text-align: center; }
      .welcome-banner { flex-direction: column; gap: 24px; align-items: flex-start; }
      .welcome-meta { width: 100%; justify-content: space-around; }
    }