/* Prose styles for legal + long-form pages */

.cs-prose-layout {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--cs-16) var(--cs-container-pad) var(--cs-24);
}

.cs-prose-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cs-font-mono);
  font-size: var(--cs-text-xs);
  color: var(--cs-gold);
  letter-spacing: var(--cs-tracking-mega);
  text-transform: uppercase;
  margin-bottom: var(--cs-4);
}

.cs-prose-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
}

.cs-prose-h1 {
  font-family: var(--cs-font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: var(--cs-tracking-tight);
  line-height: 1.06;
  margin-bottom: var(--cs-6);
  max-width: 18ch;
}

.cs-prose-lede {
  font-family: var(--cs-font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--cs-text-muted);
  font-style: italic;
  max-width: 60ch;
  margin-bottom: var(--cs-16);
  padding-bottom: var(--cs-8);
  border-bottom: 1px solid var(--cs-border-hair);
}

.cs-prose article {
  font-family: var(--cs-font-display);
  font-size: 17px;
  line-height: 1.75;
  color: var(--cs-text);
}

.cs-prose article h2 {
  font-family: var(--cs-font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: var(--cs-tracking-tight);
  line-height: 1.18;
  margin: var(--cs-12) 0 var(--cs-4);
  color: var(--cs-text);
}

.cs-prose article h3 {
  font-family: var(--cs-font-ui);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: var(--cs-tracking-snug);
  color: var(--cs-text);
  margin: var(--cs-8) 0 var(--cs-3);
}

.cs-prose article p {
  font-family: var(--cs-font-display);
  font-size: 17px;
  line-height: 1.75;
  color: var(--cs-text-muted);
  margin-bottom: var(--cs-4);
}

.cs-prose article ul,
.cs-prose article ol {
  margin: var(--cs-4) 0 var(--cs-6) 0;
  padding-left: 22px;
}
.cs-prose article li {
  font-family: var(--cs-font-display);
  font-size: 17px;
  line-height: 1.7;
  color: var(--cs-text-muted);
  margin-bottom: 8px;
}

.cs-prose article a {
  /* --cs-teal-hover (#0F766E) not --cs-teal: 5.5:1 on white, passes WCAG AA for body text */
  color: var(--cs-teal-hover);
  text-decoration: underline;
  text-decoration-color: rgba(15, 118, 110, 0.35);
  text-underline-offset: 3px;
}
.cs-prose article a:hover { color: var(--cs-teal-hover); text-decoration-color: var(--cs-teal-hover); }

.cs-prose article strong { color: var(--cs-text); font-weight: 600; }

.cs-prose article code,
.cs-prose article .cs-mono {
  font-family: var(--cs-font-mono);
  font-size: 0.92em;
  color: var(--cs-text-legal);
  background: var(--cs-surface-1);
  border: 1px solid var(--cs-border);
  padding: 2px 7px;
  border-radius: 4px;
}

.cs-prose article blockquote {
  border-left: 2px solid var(--cs-border-legal);
  padding: 8px 0 8px 22px;
  margin: var(--cs-6) 0;
  color: var(--cs-text-legal);
  background: var(--cs-surface-navy);
  border-radius: 0 var(--cs-r-sm) var(--cs-r-sm) 0;
}

.cs-prose-draft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--cs-8);
  padding: 8px 14px;
  background: var(--cs-gold-bg);
  border: 1px solid var(--cs-gold-border);
  border-radius: var(--cs-r-pill);
  font-family: var(--cs-font-mono);
  font-size: var(--cs-text-xs);
  color: var(--cs-gold);
  letter-spacing: var(--cs-tracking-mega);
  text-transform: uppercase;
}

.cs-prose-meta {
  margin-top: var(--cs-16);
  padding-top: var(--cs-6);
  border-top: 1px solid var(--cs-border-hair);
  font-family: var(--cs-font-mono);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-dim);
  letter-spacing: 0.02em;
}