/* ============================================
   ELEVATED THOUGHTS — Newsletter Issue Page
   Extends the site's design system with
   newsletter-specific components only.
   ============================================ */

/* --- Page Header: radial glow (matches about.css) --- */
.page-header {
  padding-top: calc(var(--nav-height) + var(--space-20));
  padding-bottom: var(--space-16);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 120%;
  background: radial-gradient(
    ellipse 50% 60% at 50% 20%,
    var(--accent-glow) 0%,
    rgba(217, 123, 0, 0.05) 40%,
    transparent 70%
  );
  opacity: 0.4;
  pointer-events: none;
}

.page-header h1 {
  font-size: var(--text-3xl);
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.65) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Intro paragraph — bigger, editorial --- */
.nl-intro {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 100%;
}

/* --- Takes grid (Cooper vs Mike) --- */
.nl-takes {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .nl-takes {
    grid-template-columns: 1fr 1fr;
  }
}

.nl-take {
  border-top: 3px solid var(--border);
}

.nl-take--conservative {
  border-top-color: #dc2626;
}

.nl-take--liberal {
  border-top-color: #3b82f6;
}

.nl-take .badge {
  margin-bottom: var(--space-4);
}

.nl-take__text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  font-style: italic;
  max-width: 100%;
}

/* --- Story cards — link style --- */
.nl-story {
  display: block;
  text-decoration: none;
}

.nl-story h4 {
  font-size: var(--text-lg);
}

/* --- Responsive --- */
@media (max-width: 479px) {
  .nl-takes {
    grid-template-columns: 1fr;
  }
}