.breadcrumb{
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 12px;
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      align-items:center;
    }
    .breadcrumb a{ color: var(--brand-primary); }
    .breadcrumb .sep{ opacity:.55; }

    .article-meta{
      margin: 10px 0 18px;
      color: var(--muted);
      font-size: 13px;
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      align-items:center;
    }
	    .article-meta .pill{
	      display:inline-flex;
	      align-items:center;
	      gap:8px;
	      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(43,122,120,.22);
      background: rgba(222,242,241,.60);
      color: var(--brand-primary);
	      font-weight: 650;
	      font-size: 12px;
	    }
	    .article-hero{
	      margin: 8px 0 18px;
	      border: 1px solid var(--line);
	      border-radius: 16px;
	      overflow: hidden;
	      background: rgba(255,255,255,.9);
	      box-shadow: 0 10px 24px rgba(26,26,26,.10);
	    }
	    .article-hero img{
	      display: block;
	      width: 100%;
	      height: auto;
	    }

	    .toc{
	      margin: 18px 0 20px;
	      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(244,246,246,.80), rgba(244,246,246,.55));
    }
    .toc h2{
      margin: 0 0 10px;
      font-size: 16px;
      color: var(--brand-primary);
    }
    .toc ol{
      margin: 0;
      padding-left: 18px;
    }
    .toc li{ margin: 6px 0; }
    .toc a{ color: var(--brand-primary); }

    .callout{
      margin: 18px 0;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(254,168,47,.35);
      background: rgba(254,168,47,.12);
    }
    .callout strong{ color:#8a5200; }

    .cta-box{
      margin: 22px 0 6px;
      padding: 16px;
      border: 1px solid rgba(43,122,120,.22);
      border-radius: 16px;
      background: rgba(222,242,241,.55);
    }
    .cta-box h2{
      margin: 0 0 8px;
      font-size: 18px;
      color: var(--brand-primary);
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:18px;
      margin-top: 10px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid transparent;
      background: var(--brand-primary);
      color: white;
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(26,26,26,.10);
      text-decoration:none;
      transition: transform .06s ease, opacity .2s ease;
    }
    .btn:hover{ transform: translateY(-1px); opacity: .95; }
    .btn.secondary{
      background: rgba(255,255,255,.85);
      border-color: rgba(43,122,120,.22);
      color: var(--brand-primary);
      box-shadow: none;
    }

    .author-box{
      margin-top: 22px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(244,246,246,.55);
      color: var(--muted);
      font-size: 13px;
    }
    .author-box .name{
      color: var(--text);
      font-weight: 800;
      margin-bottom: 6px;
    }

    h2[id], h3[id]{ scroll-margin-top: 90px; }