/*
 * DJC Article -- DJC Skin
 *
 * Brand skin for DJC (Turning Point / David Jeremiah).
 * Apply class="djc" to the .djc-article element or any ancestor.
 *
 * Load AFTER DJC_Article.css (structure).
 *
 * Usage:
 *   <article class="djc-article djc">                            -- class on the article
 *   <div class="djc"><article class="djc-article">               -- class on a wrapper
 *   DJC_Article.mount('#el', { skin: 'djc' });                   -- via JS (default)
 */


/* fonts (DJC skin only -- remove/replace for other skins) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


.djc.djc-article,
.djc .djc-article {
  /* colors */
  --article-bg: transparent;
  --article-text: #2a2a2a;
  --article-heading: #1a2744;
  --article-byline: #6b6b6b;
  --article-link: #c4501f;
  --article-link-hover: #a3411a;
  --article-rule: rgba(26, 39, 68, 0.12);
  --article-share-icon: #1a2744;
  --article-share-icon-hover: #c4501f;

  /* typography */
  --article-font: 'Archivo', system-ui, sans-serif;
  --article-body-size: 18px;
  --article-body-leading: 1.7;
  --article-title-size: clamp(32px, 4.5vw, 52px);
  --article-byline-size: 18px;
  --article-byline-weight: 400;

  /* spacing */
  --article-max-width: 760px;
  --article-section-gap: 36px;
  --article-image-radius: 8px;
}


/* DJC heading uses Playfair Display */
.djc.djc-article .djc-article__title,
.djc .djc-article .djc-article__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}