.sci-article-page {
  padding-top: var(--sci-space-12);
}

.sci-article-header {
  max-width: 980px;
  margin-inline: auto;
  padding-bottom: var(--sci-space-10);
  border-bottom: 1px solid var(--sci-border-strong);
}

.sci-article-header h1 {
  margin: 0;
  font-family: var(--sci-font-serif);
  font-size: clamp(46px, 5.7vw, 72px);
  letter-spacing: -0.048em;
  line-height: 1.08;
}

.sci-article-deck {
  max-width: 820px;
  margin: var(--sci-space-6) 0 0;
  color: var(--sci-text-secondary);
  font-size: 20px;
  line-height: 1.65;
}

.sci-article-byline {
  display: flex;
  margin-top: var(--sci-space-6);
  flex-wrap: wrap;
  gap: var(--sci-space-4);
  color: var(--sci-text-muted);
  font-size: 12px;
}

.sci-article-byline span:first-child {
  color: var(--sci-text);
  font-weight: 700;
}

.sci-article-source {
  margin: var(--sci-space-3) 0 0;
  color: var(--sci-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.sci-article-source a {
  color: var(--sci-blue);
}

.sci-article-hero {
  overflow: hidden;
  margin: var(--sci-space-8) 0 0;
  aspect-ratio: 16 / 8;
  background: var(--sci-surface-subtle);
}

.sci-article-hero[hidden] {
  display: none;
}

.sci-article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sci-article-layout {
  padding-top: var(--sci-space-10);
}

.sci-article-reading {
  max-width: 820px;
  margin-inline: auto;
}

.sci-article-ask {
  margin-top: var(--sci-space-12);
  border-top: 2px solid var(--sci-blue);
  background: var(--sci-blue-soft);
}

.sci-article-ask a {
  display: grid;
  padding: var(--sci-space-7);
  gap: var(--sci-space-3);
  color: var(--sci-text);
  text-decoration: none;
}

.sci-article-ask__eyebrow {
  color: var(--sci-blue);
  font-size: 12px;
  font-weight: 760;
}

.sci-article-ask strong {
  font-family: var(--sci-font-serif);
  font-size: 26px;
  line-height: 1.4;
}

.sci-article-ask__description {
  color: var(--sci-text-secondary);
  font-size: 15px;
  line-height: 1.65;
}

.sci-article-ask__action {
  margin-top: var(--sci-space-2);
  color: var(--sci-blue);
  font-size: 13px;
  font-weight: 760;
}

.sci-article-ask__action span {
  display: inline-block;
  margin-left: var(--sci-space-1);
  font-size: 18px;
  transition: transform 180ms ease;
}

.sci-article-ask a:hover .sci-article-ask__action span,
.sci-article-ask a:focus-visible .sci-article-ask__action span {
  transform: translateX(4px);
}

.sci-article-insights {
  display: grid;
  margin-bottom: var(--sci-space-8);
  gap: var(--sci-space-4);
}

.sci-article-insight {
  padding: var(--sci-space-6);
  border-top: 2px solid var(--sci-blue);
  background: var(--sci-surface-subtle);
}

.sci-article-insight h2 {
  margin: var(--sci-space-3) 0 0;
  font-family: var(--sci-font-serif);
  font-size: 25px;
}

.sci-article-insight div > p:not(.sci-section-label) {
  margin: var(--sci-space-3) 0 0;
  color: var(--sci-text-secondary);
  line-height: 1.65;
}

.sci-article-insight footer {
  display: flex;
  margin-top: var(--sci-space-5);
  padding-top: var(--sci-space-4);
  justify-content: space-between;
  gap: var(--sci-space-4);
  border-top: 1px solid var(--sci-border);
  color: var(--sci-text-muted);
  font-size: 12px;
}

.sci-article-insight footer a {
  color: var(--sci-blue);
}

.sci-article-reading .sci-article-content {
  max-width: 780px;
  margin-inline: auto;
  font-size: 19px;
  line-height: 1.9;
}

.sci-article-reading .sci-article-content > *:first-child {
  margin-top: 0;
}

.sci-article-related {
  margin-top: var(--sci-space-16);
  padding-top: var(--sci-space-8);
  border-top: 1px solid var(--sci-border-strong);
}

.sci-article-related .sci-section-heading {
  margin-bottom: var(--sci-space-2);
}

@media (max-width: 767px) {
  .sci-article-page {
    padding-top: var(--sci-space-10);
  }

  .sci-article-header h1 {
    font-size: clamp(36px, 10.5vw, 44px);
    line-height: 1.17;
  }

  .sci-article-deck {
    font-size: 18px;
  }

  .sci-article-reading .sci-article-content {
    font-size: 18px;
    line-height: 1.8;
  }

  .sci-article-insight {
    padding: var(--sci-space-5);
  }

  .sci-article-insight footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .sci-article-ask a {
    padding: var(--sci-space-5);
  }

  .sci-article-ask strong {
    font-size: 23px;
  }

  .sci-article-related .sci-story-list {
    grid-template-columns: 1fr;
  }
}