/*
 * CCS Article Stylesheet — ccs-article.css
 * Design system: White background, CCS blue accent (#03349B), editorial serif typography
 * Fonts: Playfair Display + IBM Plex Mono + Libre Baskerville
 *
 * Enqueued globally via Snippet #58.
 * Feedzy auto-rewrites (Snippet #42) output HTML using these class names.
 */

/* ── TOKENS ─────────────────────────────────────────────────────────────────── */
.ccs-article {
  --ccs-blue:       #03349B;
  --ccs-blue-mid:   #1a4db8;
  --ccs-blue-light: #e8edf8;
  --ccs-blue-dim:   rgba(3, 52, 155, 0.08);
  --ccs-white:      #ffffff;
  --ccs-off-white:  #f7f8fc;
  --ccs-card:       #f0f3fb;
  --ccs-border:     #dde3f0;
  --ccs-border-mid: #c8d0e8;
  --ccs-text:       #0d1117;
  --ccs-text-body:  #2d3340;
  --ccs-text-muted: #6b7280;
  --ccs-serif:      'Source Serif 4', Georgia, serif;
  --ccs-display:    'DM Serif Display', Georgia, serif;
  --ccs-mono:       'IBM Plex Mono', 'Courier New', monospace;
  --ccs-ease:       0.2s ease;
}

/* ── WRAPPER ────────────────────────────────────────────────────────────────── */
.ccs-article {
  background:   var(--ccs-white);
  color:        var(--ccs-text);
  font-family:  var(--ccs-serif);
  font-size:    18px;
  line-height:  1.75;
  max-width:    860px;
  margin:       0 auto;
  padding:      0 0 64px;
  -webkit-font-smoothing: antialiased;
  overflow-x:   hidden;
}

/* ── HERO ───────────────────────────────────────────────────────────────────── */
.ccs-article .ccs-hero {
  background:    var(--ccs-blue);
  border-bottom: 3px solid var(--ccs-blue-mid);
  padding:       56px 32px 48px;
  position:      relative;
  overflow:      hidden;
  animation:     ccs-fade-up 0.7s ease both;
}

.ccs-hero::before {
  content:       '₿';
  position:      absolute;
  right:         -40px;
  top:           -40px;
  font-size:     340px;
  color:         rgba(255, 255, 255, 0.04);
  font-family:   var(--ccs-display);
  font-weight:   900;
  user-select:   none;
  pointer-events: none;
  line-height:   1;
}

.ccs-article .ccs-kicker {
  font-family:    var(--ccs-mono);
  font-size:      0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.75);
  margin-bottom:  18px;
  display:        flex;
  align-items:    center;
  gap:            12px;
}

.ccs-kicker::before {
  content:    '';
  width:      28px;
  height:     2px;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.ccs-article h1,
.ccs-headline {
  font-family:    var(--ccs-display);
  font-size:      clamp(1.9rem, 4.5vw, 3rem);
  font-weight:    900;
  line-height:    1.15;
  color:          #ffffff;
  margin-bottom:  20px;
  letter-spacing: -0.01em;
}

.ccs-article .ccs-deck {
  font-size:     1.05rem;
  color:         rgba(255, 255, 255, 0.8);
  line-height:   1.65;
  max-width:     720px;
  margin-bottom: 32px;
  font-style:    italic;
}

.ccs-article .ccs-byline {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   wrap;
  border-top:  1px solid rgba(255, 255, 255, 0.15);
  padding-top: 22px;
}

.ccs-article .ccs-byline__avatar {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--ccs-display);
  font-weight:     900;
  font-size:       1rem;
  color:           #ffffff;
  flex-shrink:     0;
  border:          1px solid rgba(255,255,255,0.3);
}

.ccs-article .ccs-byline__name {
  font-family: var(--ccs-mono);
  font-size:   0.8rem;
  color:       #ffffff;
  font-weight: 500;
}

.ccs-article .ccs-byline__meta {
  font-family:    var(--ccs-mono);
  font-size:      0.68rem;
  color:          rgba(255, 255, 255, 0.6);
  letter-spacing: 0.06em;
  margin-top:     2px;
}

/* ── ARTICLE BODY ───────────────────────────────────────────────────────────── */
.ccs-body {
  padding:   48px 32px 0;
  animation: ccs-fade-up 0.7s ease 0.15s both;
}

.ccs-body p,
.ccs-article p {
  margin-bottom: 1.5em;
  color:         var(--ccs-text-body);
  font-size:     18px;
  line-height:   1.8;
}

/* Drop cap */
.ccs-body > p:first-of-type::first-letter,
.ccs-drop-cap::first-letter {
  font-family:  var(--ccs-display);
  font-size:    4.2rem;
  font-weight:  900;
  float:        left;
  line-height:  0.78;
  margin-right: 10px;
  margin-top:   6px;
  color:        var(--ccs-blue);
}

.ccs-body a,
.ccs-article a {
  color:                 var(--ccs-blue);
  text-decoration:       underline;
  text-decoration-color: rgba(3, 52, 155, 0.3);
  text-underline-offset: 3px;
  transition:            text-decoration-color var(--ccs-ease);
}

.ccs-body a:hover,
.ccs-article a:hover { text-decoration-color: var(--ccs-blue); }

.ccs-body strong,
.ccs-article strong {
  color:       var(--ccs-text);
  font-weight: 700;
}

.ccs-body h2,
.ccs-article h2 {
  font-family:    var(--ccs-display);
  font-size:      1.55rem;
  font-weight:    700;
  color:          var(--ccs-text);
  margin:         2.2em 0 0.7em;
  padding-bottom: 10px;
  border-bottom:  2px solid var(--ccs-border);
}

.ccs-body h3,
.ccs-article h3 {
  font-family:    var(--ccs-mono);
  font-size:      0.72rem;
  font-weight:    600;
  color:          var(--ccs-blue);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin:         1.8em 0 0.6em;
}

.ccs-body ul,
.ccs-article ul {
  list-style:    none;
  padding:       0;
  margin-bottom: 1.5em;
}

.ccs-body ul li,
.ccs-article ul li {
  font-size:     0.97rem;
  color:         var(--ccs-text-body);
  padding:       8px 0 8px 22px;
  border-bottom: 1px solid var(--ccs-border);
  position:      relative;
}

.ccs-body ul li:last-child,
.ccs-article ul li:last-child { border-bottom: none; }

.ccs-body ul li::before,
.ccs-article ul li::before {
  content:    '→';
  color:      var(--ccs-blue);
  font-family: var(--ccs-mono);
  position:   absolute;
  left:       0;
  top:        9px;
  font-size:  0.85rem;
}

/* ── PULL QUOTE ─────────────────────────────────────────────────────────────── */
.ccs-quote,
.ccs-body blockquote,
.ccs-article blockquote {
  border-top:    3px solid var(--ccs-blue);
  border-bottom: 1px solid var(--ccs-border);
  padding:       24px 0;
  margin:        2.4em 0;
  background:    transparent;
}

.ccs-quote p,
.ccs-body blockquote p,
.ccs-article blockquote p {
  font-family:   var(--ccs-display) !important;
  font-size:     1.3rem !important;
  font-style:    italic;
  color:         var(--ccs-text) !important;
  line-height:   1.55;
  margin-bottom: 0 !important;
}

.ccs-quote__attr,
.ccs-body blockquote cite,
.ccs-article blockquote cite {
  font-family:    var(--ccs-mono);
  font-size:      0.68rem;
  letter-spacing: 0.1em;
  color:          var(--ccs-blue);
  text-transform: uppercase;
  display:        block;
  margin-top:     14px;
  font-style:     normal;
}

/* ── CALLOUT BOX ────────────────────────────────────────────────────────────── */
.ccs-callout {
  background:    var(--ccs-card);
  border-left:   4px solid var(--ccs-blue);
  padding:       22px 24px 22px 28px;
  margin:        2.2em 0;
  border-radius: 0 4px 4px 0;
}

.ccs-callout__label {
  font-family:    var(--ccs-mono);
  font-size:      0.65rem;
  font-weight:    600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--ccs-blue);
  margin-bottom:  10px;
  display:        block;
}

.ccs-callout p {
  font-size:     0.95rem !important;
  color:         var(--ccs-text-body) !important;
  margin-bottom: 0 !important;
}

.ccs-callout ul { margin-bottom: 0; }

/* ── QUICK FACTS GRID ───────────────────────────────────────────────────────── */
.ccs-facts {
  background:  var(--ccs-card);
  border:      1px solid var(--ccs-border);
  border-left: 4px solid var(--ccs-blue);
  padding:     24px 28px;
  margin:      2.4em 0;
}

.ccs-facts__title {
  font-family:    var(--ccs-mono);
  font-size:      0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--ccs-blue);
  margin-bottom:  18px;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--ccs-border);
  display:        block;
}

.ccs-facts__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   18px 28px;
}

.ccs-facts__label {
  font-family:    var(--ccs-mono);
  font-size:      0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--ccs-text-muted);
  margin-bottom:  4px;
  display:        block;
}

.ccs-facts__value {
  font-family: var(--ccs-display);
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--ccs-text);
  line-height: 1.3;
  display:     block;
}

/* ── STAT CALLOUT ───────────────────────────────────────────────────────────── */
.ccs-stat {
  background: var(--ccs-blue);
  color:      #ffffff;
  padding:    28px 32px;
  margin:     2.2em 0;
}

.ccs-stat__number {
  font-family:   var(--ccs-display);
  font-size:     3.4rem;
  font-weight:   900;
  line-height:   1;
  display:       block;
  margin-bottom: 6px;
  color:         #ffffff;
}

.ccs-stat__label {
  font-family:    var(--ccs-mono);
  font-size:      0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight:    500;
  display:        block;
  color:          rgba(255, 255, 255, 0.85);
}

/* ── SECTION DIVIDER ────────────────────────────────────────────────────────── */
.ccs-divider {
  display:        flex;
  align-items:    center;
  gap:            16px;
  margin:         2.2em 0;
  color:          var(--ccs-text-muted);
  font-family:    var(--ccs-mono);
  font-size:      0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ccs-divider::before,
.ccs-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--ccs-border);
}

/* ── CTA STRIP ──────────────────────────────────────────────────────────────── */
.ccs-cta {
  background:  var(--ccs-blue);
  padding:     28px 32px;
  margin:      2.4em 0;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         24px;
  flex-wrap:   wrap;
}

.ccs-cta p {
  font-family:    var(--ccs-mono) !important;
  font-size:      0.82rem !important;
  letter-spacing: 0.06em;
  color:          rgba(255, 255, 255, 0.9) !important;
  font-weight:    400;
  margin-bottom:  0 !important;
  line-height:    1.5;
}

.ccs-cta__btn {
  background:      #ffffff;
  color:           var(--ccs-blue);
  font-family:     var(--ccs-mono);
  font-size:       0.68rem;
  letter-spacing:  0.16em;
  text-transform:  uppercase;
  padding:         12px 24px;
  text-decoration: none;
  font-weight:     600;
  white-space:     nowrap;
  flex-shrink:     0;
  display:         inline-block;
  transition:      background var(--ccs-ease);
  border-bottom:   none !important;
}

.ccs-cta__btn:hover { background: var(--ccs-blue-light); }

/* ── TAGS ───────────────────────────────────────────────────────────────────── */
.ccs-tags {
  display:     flex;
  flex-wrap:   wrap;
  gap:         8px;
  margin-top:  2.5em;
  padding-top: 20px;
  border-top:  1px solid var(--ccs-border);
}

.ccs-tag {
  font-family:     var(--ccs-mono);
  font-size:       0.65rem;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  padding:         5px 12px;
  border:          1px solid var(--ccs-border-mid);
  color:           var(--ccs-text-muted);
  text-decoration: none;
  display:         inline-block;
  transition:      border-color var(--ccs-ease), color var(--ccs-ease);
  border-radius:   2px;
}

.ccs-tag:hover { border-color: var(--ccs-blue); color: var(--ccs-blue); }

/* ── FOOTER ─────────────────────────────────────────────────────────────────── */
.ccs-footer {
  background:  var(--ccs-blue);
  padding:     36px 32px;
  margin-top:  48px;
  text-align:  center;
}

.ccs-footer__logo {
  font-family:   var(--ccs-display);
  font-size:     1.3rem;
  font-weight:   900;
  color:         #ffffff;
  margin-bottom: 8px;
}

.ccs-footer__logo span { color: rgba(255,255,255,0.7); }

.ccs-footer__tagline {
  font-family:    var(--ccs-mono);
  font-size:      0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.6);
  margin-bottom:  20px;
}

.ccs-footer__links {
  display:         flex;
  justify-content: center;
  gap:             24px;
  flex-wrap:       wrap;
  margin-bottom:   16px;
}

.ccs-footer__links a {
  font-family:     var(--ccs-mono);
  font-size:       0.65rem;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.65);
  text-decoration: none;
  border-bottom:   none !important;
  transition:      color var(--ccs-ease);
}

.ccs-footer__links a:hover { color: #ffffff; }

.ccs-footer__copy {
  font-family:    var(--ccs-mono);
  font-size:      0.62rem;
  color:          rgba(255, 255, 255, 0.35);
  letter-spacing: 0.08em;
}

/* ── ANIMATIONS ─────────────────────────────────────────────────────────────── */
@keyframes ccs-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .ccs-article .ccs-hero   { padding: 36px 20px 32px; }
  .ccs-article .ccs-body   { padding: 32px 20px 0; }
  .ccs-article h1 { font-size: 1.75rem; }
  .ccs-facts__grid { grid-template-columns: 1fr; }
  .ccs-cta    { flex-direction: column; align-items: flex-start; }
  .ccs-stat__number { font-size: 2.6rem; }
  .ccs-footer { padding: 28px 20px; }
  .ccs-body > p:first-of-type::first-letter { font-size: 3rem; }
}