/* Elvis Onunwa Public Design System v1.0
   Canonical runtime design contract for elvisonunwa.com and the publisher.
   Public pages should consume these semantic tokens and primitives instead of
   defining independent palettes, buttons, hero scales, or card treatments. */

:root {
  --eo-paper: #ffffff;
  --eo-ink: #032630;
  --eo-ink-soft: #093a49;
  --eo-ink-faint: rgba(3, 38, 48, 0.58);
  --eo-accent: #be4417;
  --eo-accent-hover: #8f300d;
  /* Accessibility variant for small accent text on --eo-dark only.
     This is not a second primary orange; CTAs and light-surface accents keep --eo-accent. */
  --eo-accent-on-dark: #e4673d;
  --eo-dark: #032630;
  --eo-line: rgba(3, 38, 48, 0.14);
  --eo-line-strong: rgba(3, 38, 48, 0.22);
  --eo-soft: #f7f9f8;
  --eo-font-display: "Segoe UI Variable Display", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --eo-font-text: "Segoe UI Variable Text", Inter, ui-sans-serif, system-ui, sans-serif;
  --eo-container: 1320px;
  --eo-header-height: 5rem;
  --eo-radius-button: 0.625rem;
  --eo-radius-card: 0.875rem;
  --eo-shadow-soft: 0 14px 36px rgba(3, 38, 48, 0.07);
  --eo-shadow-raised: 0 22px 58px rgba(3, 38, 48, 0.11);
  --eo-section-space: clamp(4.5rem, 7vw, 7rem);
  --eo-page-title: clamp(2.75rem, 5.3vw, 4.9rem);
  --eo-section-title: clamp(2rem, 3.6vw, 3.35rem);
}

.eo-public {
  background: var(--eo-paper);
  color: var(--eo-ink);
  font-family: var(--eo-font-text);
  font-feature-settings: "ss01", "cv11";
}

.eo-public h1,
.eo-public h2,
.eo-public h3,
.eo-public h4 {
  font-family: var(--eo-font-display);
  letter-spacing: -0.035em;
}

.eo-container {
  width: 100%;
  max-width: var(--eo-container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.eo-eyebrow {
  margin: 0;
  color: var(--eo-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.eo-accent-on-dark {
  color: var(--eo-accent-on-dark);
}

.eo-page-hero {
  position: relative;
  overflow: hidden;
  background: var(--eo-paper);
  border-bottom: 1px solid var(--eo-line);
}

.eo-page-hero__inner {
  max-width: 68rem;
  margin-inline: auto;
  padding-block: clamp(3.5rem, 7vw, 6.25rem);
  text-align: center;
}

.eo-page-hero__inner--compact {
  max-width: 58rem;
  padding-block: clamp(3rem, 5.5vw, 5rem);
}

.eo-page-hero__title {
  max-width: 64rem;
  margin: 1.1rem auto 0;
  color: var(--eo-ink);
  font-family: var(--eo-font-display);
  font-size: var(--eo-page-title);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.eo-page-hero__body {
  max-width: 49rem;
  margin: 1.5rem auto 0;
  color: var(--eo-ink-soft);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.eo-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

.eo-page-hero__proofs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 56rem;
  margin: 2.25rem auto 0;
  text-align: left;
}

.eo-page-hero__proof {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.eo-page-hero__proof-icon {
  flex: 0 0 auto;
  color: var(--eo-ink);
}

.eo-page-hero__proof-label {
  display: block;
  color: var(--eo-ink);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
}

.eo-page-hero__proof-value {
  display: block;
  margin-top: 0.2rem;
  color: var(--eo-ink-faint);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eo-button {
  display: inline-flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border-radius: var(--eo-radius-button);
  padding: 0.85rem 1.75rem;
  font-family: var(--eo-font-text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.eo-button:hover {
  transform: translateY(-2px);
}

.eo-button--primary {
  border: 1px solid var(--eo-accent);
  background: var(--eo-accent);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(190, 68, 23, 0.16);
}

.eo-button--primary:hover {
  border-color: var(--eo-accent-hover);
  background: var(--eo-accent-hover);
  color: #ffffff;
}

.eo-button--secondary {
  border: 1px solid var(--eo-line-strong);
  background: #ffffff;
  color: var(--eo-ink);
}

.eo-button--secondary:hover {
  border-color: rgba(190, 68, 23, 0.5);
  color: var(--eo-accent);
}

.eo-section {
  background: var(--eo-paper);
  padding-block: var(--eo-section-space);
}

.eo-section--dark {
  background: var(--eo-dark);
  color: #ffffff;
}

.eo-section__header {
  display: grid;
  gap: 1.2rem;
  max-width: 62rem;
  margin-bottom: clamp(2.4rem, 4vw, 4rem);
}

.eo-section__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  color: var(--eo-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.eo-section__chapter {
  color: var(--eo-ink-faint);
}

.eo-section__title {
  max-width: 56rem;
  margin: 0;
  color: var(--eo-ink);
  font-family: var(--eo-font-display);
  font-size: var(--eo-section-title);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.eo-section__body {
  max-width: 43rem;
  margin: 0;
  color: var(--eo-ink-soft);
  font-size: 0.96rem;
  line-height: 1.75;
}

.eo-section--dark .eo-section__title,
.eo-section--dark .eo-section__chapter {
  color: #ffffff;
}

.eo-section--dark .eo-section__body {
  color: rgba(255, 255, 255, 0.74);
}

.eo-section__action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  color: var(--eo-accent);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.eo-card {
  overflow: hidden;
  border: 1px solid var(--eo-line);
  border-radius: var(--eo-radius-card);
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(3, 38, 48, 0.045);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.eo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(190, 68, 23, 0.42);
  box-shadow: var(--eo-shadow-soft);
}

.eo-media {
  overflow: hidden;
  border: 1px solid var(--eo-line);
  background: #ffffff;
}

.eo-soft-panel {
  border-radius: var(--eo-radius-card);
  background: var(--eo-soft);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.eo-topic-pill {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--eo-line);
  border-radius: 999px;
  background: #ffffff;
  padding: 0.55rem 1rem;
  color: var(--eo-ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.eo-topic-pill:hover,
.eo-topic-pill[aria-current="page"] {
  border-color: var(--eo-ink);
  background: var(--eo-ink);
  color: #ffffff;
}

.eo-article-hero {
  background: #ffffff;
  border-bottom: 1px solid var(--eo-line);
}

.eo-article-hero__inner {
  max-width: 62rem;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.eo-article-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--eo-ink-faint);
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
}

.eo-article-hero__back:hover {
  color: var(--eo-accent);
}

.eo-article-hero__title {
  max-width: 58rem;
  margin: 1rem 0 0;
  color: var(--eo-ink);
  font-family: var(--eo-font-display);
  font-size: clamp(2.35rem, 5vw, 4.5rem);
  font-weight: 650;
  line-height: 0.99;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.eo-article-hero__excerpt {
  max-width: 48rem;
  margin: 1.35rem 0 0;
  color: var(--eo-ink-soft);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.7;
}

.eo-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
  color: var(--eo-ink-faint);
  font-size: 0.8rem;
}

.eo-article-meta strong {
  color: var(--eo-ink);
}

@media (max-width: 639px) {
  .eo-page-hero__inner {
    padding-block: 3.25rem 3.5rem;
  }

  .eo-page-hero__proofs {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    max-width: 28rem;
  }

  .eo-page-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .eo-page-hero__actions .eo-button {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .eo-container {
    padding-inline: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eo-button,
  .eo-card {
    transition: none;
  }
}