/* ==========================================================
   ExplainItSimply public-page quality layer
   Shared typography, cards, spacing and readable contrast.
   ========================================================== */

:root {
  --eits-ink: #142b47;
  --eits-body: #334155;
  --eits-muted-readable: #526175;
  --eits-line: #dce4ec;
  --eits-orange: #e8640a;
  --eits-orange-dark: #bd4b00;
  --eits-soft-orange: #fff4ea;
  --eits-card-shadow: 0 12px 30px rgba(13, 39, 70, .09);
}

html { scroll-padding-top: calc(var(--header-h, 78px) + 22px); }

body {
  color: var(--eits-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.eits-article,
.deep-section,
.story-section,
.v2-deep-dive,
.v2-editorial-core {
  color: var(--eits-body);
}

.eits-article h1,
.eits-article h2,
.eits-article h3,
.eits-article h4,
.deep-section h1,
.deep-section h2,
.deep-section h3,
.eits-side-card h3,
.article-library-title {
  color: var(--eits-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.018em;
  line-height: 1.25 !important;
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.eits-article h2,
.deep-section h2,
.story-section h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: clamp(1.42rem, 2.4vw, 2rem) !important;
}

.eits-article h3,
.deep-section h3,
.story-card h3,
.eits-mini h3,
.eits-side-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: clamp(1rem, 1.55vw, 1.22rem) !important;
}

.eits-article p,
.deep-section p,
.story-section p,
.eits-card p,
.eits-side-card p,
.faq-answer,
.answer {
  color: var(--eits-body) !important;
  font-size: max(.94rem, 15px);
  line-height: 1.75;
}

.eits-article p + p,
.deep-section p + p,
.story-section p + p { margin-top: 13px; }

.eits-card,
.story-card,
.eits-mini,
.eits-side-card,
.article-library-card,
.related-guides-card {
  border-color: var(--eits-line) !important;
  box-shadow: var(--eits-card-shadow);
}

.eits-card,
.deep-section,
.story-section {
  margin-bottom: 24px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 20px;
}

.eits-card-grid,
.story-grid,
.eits-two-cards {
  gap: clamp(16px, 2.2vw, 24px) !important;
}

.story-card,
.eits-mini {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 24px) !important;
  border-radius: 16px !important;
}

.section-label,
.hero-badge,
.story-deck-kicker,
.example-label {
  color: var(--eits-orange-dark) !important;
  font-weight: 800 !important;
}

.eits-hero .hero-badge,
.hero .hero-badge,
.page-hero .hero-badge,
.author-showcase .hero-badge,
.eits-page-banner .hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid #ef6c18 !important;
  border-radius: 999px;
  background: #ef6c18 !important;
  color: #fff !important;
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eits-hero .section-label,
.eits-page-banner .section-label { color: #ffd2ad !important; }

/* One public hero system: same display face, scale and breadcrumb treatment. */
.eits-hero h1,
.hero h1,
.page-hero h1,
.author-showcase h1,
.dc-hero h1 {
  color: #fff !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: clamp(2.7rem, 4.7vw, 4.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  line-height: 1.06 !important;
  text-wrap: balance;
}

.eits-breadcrumb,
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px !important;
  color: rgba(255,255,255,.88) !important;
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  font-size: .86rem !important;
  line-height: 1.5;
}

.eits-breadcrumb a,
.breadcrumb a {
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.eits-breadcrumb a:hover,
.breadcrumb a:hover { color: #ffb477 !important; }

/* Dark editorial panels must retain high-contrast copy. */
.story-deck,
.story-deck h2,
.story-deck h3,
.story-deck p,
.season-answer,
.season-answer h2,
.season-answer h3,
.season-answer p,
.cinematic-close,
.cinematic-close h2,
.cinematic-close h3,
.cinematic-close p,
.featured-deep-card,
.featured-deep-card h2,
.featured-deep-card h3,
.featured-deep-card p,
.article-takeaway,
.article-takeaway h2,
.article-takeaway h3,
.article-takeaway p,
.article-takeaway li {
  color: #fff !important;
}

.eits-article a:not(.btn-primary):not(.btn-ghost):not(.article-library-image-link),
.deep-section a:not(.btn-primary):not(.btn-ghost),
.eits-side-card a {
  color: #a64000;
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.eits-article a:hover,
.deep-section a:hover,
.eits-side-card a:hover { color: #092a4d; }

.related-guides-nav,
.eits-toc { gap: 7px; }

.related-guides-nav a,
.eits-toc a {
  display: block;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #24415f !important;
  font-size: .82rem;
  line-height: 1.45;
  text-decoration: none !important;
}

.related-guides-nav a:hover,
.eits-toc a:hover {
  border-color: #f0a46f;
  background: var(--eits-soft-orange);
  color: #7f3300 !important;
}

.faq-item,
.faq-list details {
  overflow: hidden;
  border: 1px solid var(--eits-line) !important;
  border-radius: 14px !important;
  background: #fff;
}

.faq-item summary,
.faq-list summary {
  padding: 16px 18px !important;
  color: var(--eits-ink) !important;
  font-weight: 800 !important;
  line-height: 1.45;
}

.faq-answer,
.faq-list .answer {
  padding: 0 18px 18px !important;
}

.faq-answer p:last-child,
.faq-list .answer p:last-child { margin-bottom: 0; }

.article-library-body { padding: clamp(18px, 2.4vw, 24px) !important; }
.article-library-excerpt { color: var(--eits-body) !important; }

@media (max-width: 767px) {
  .eits-card,
  .deep-section,
  .story-section { padding: 18px; border-radius: 16px; }

  .eits-article h2,
  .deep-section h2,
  .story-section h2 { font-size: 1.35rem !important; }

  .eits-side-card { padding: 17px !important; }

  .eits-hero h1,
  .hero h1,
  .page-hero h1,
  .author-showcase h1,
  .dc-hero h1 { font-size: clamp(2.15rem, 10vw, 3.05rem) !important; }
}