.newsletter-page .hero-band {
  margin-bottom: 16px;
}

.newsletter-page .hero-band > div {
  padding: 16px 18px 16px 10px;
}

.newsletter-page .hero-band h1 {
  margin-bottom: 8px;
}

.newsletter-page .hero-band p {
  color: rgba(246, 247, 255, 0.94);
  max-width: 72ch;
}

.newsletter-page .newsletter-substack-link {
  color: #9f86d4;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.newsletter-page .newsletter-substack-link:hover {
  color: #b29ae7;
}

.newsletter-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.newsletter-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
}

.newsletter-reader-shell {
  display: grid;
  gap: 14px;
}

.newsletter-reader-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.newsletter-reader-header h2 {
  margin: 0 0 6px;
  color: #ffffff;
}

.newsletter-reader-meta {
  font-size: 13px;
  color: rgba(231, 235, 255, 0.8);
}

.newsletter-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(231, 235, 255, 0.78);
}

.newsletter-breadcrumb a {
  color: #c8d5ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.newsletter-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.newsletter-action-row .btn {
  border-color: rgba(255, 255, 255, 0.28);
}

.newsletter-action-row .btn.primary {
  background: linear-gradient(180deg, #6be0d3, #39b8aa);
  color: #052d2a;
  border-color: rgba(255, 255, 255, 0.34);
}

.newsletter-action-row .btn.soft,
.newsletter-action-row .btn.ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.newsletter-reader-body {
  max-height: 64vh;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 9, 44, 0.88);
  padding: 18px;
  line-height: 1.68;
  color: #f4f4ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.newsletter-reader-body h1,
.newsletter-reader-body h2,
.newsletter-reader-body h3,
.newsletter-reader-body h4 {
  margin-top: 1.25em;
  margin-bottom: 0.55em;
  color: #ffffff;
}

.newsletter-reader-body p {
  margin: 0 0 1em;
}

.newsletter-reader-body a {
  color: #8fc3ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.newsletter-reader-body ul,
.newsletter-reader-body ol {
  padding-left: 1.25rem;
}

.newsletter-reader-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 10px 0;
}

.newsletter-subscribe-banner {
  display: grid;
  gap: 10px;
  background: rgba(0, 168, 150, 0.14);
  border-left: 4px solid var(--nf-teal, #00a896);
}

.newsletter-archive-list {
  display: grid;
  gap: 10px;
}

.newsletter-archive-item {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(18, 14, 58, 0.86);
  color: #f4f4ff;
  padding: 12px;
}

.newsletter-archive-item h2,
.newsletter-archive-item h3 {
  margin: 0 0 8px;
  color: #ffffff;
}

.newsletter-archive-item a {
  color: #d8e3ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.newsletter-archive-item p {
  margin: 0;
  color: rgba(234, 238, 255, 0.9);
}

@media (max-width: 768px) {
  .newsletter-reader-body {
    max-height: 58vh;
    padding: 14px;
  }
}

/* Kicker line above the Substack embed — "From The National Friends
   Post · <date>". Indented one tab from the H2 so it reads as an
   attribution caption, not a subtitle. */
.newsletter-page .section-head .newsletter-kicker {
  margin: 4px 0 12px;
  padding-left: 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(223, 233, 255, 0.78);
  font-style: italic;
}
.newsletter-page .section-head .newsletter-kicker span {
  display: inline-block;
  margin: 0 8px;
  color: rgba(223, 233, 255, 0.45);
  font-style: normal;
}

/* ---------------------------------------------------------------- */
/* Substack post embed (rendered into #latest-post when the DB-driven
   newsletter reader has no post to show — see newsletter/index.php
   else branch). Substack's embed.js replaces the inner contents of
   .substack-post-embed with an iframe pointed at substack.com. We
   constrain the wrapper to Substack's canonical 550px width, center
   it inside the card, and keep the iframe edge-to-edge of the wrapper
   while embed.js handles its own height auto-resize via postMessage. */
/* ---------------------------------------------------------------- */

.newsletter-page .substack-post-embed {
  display: block;
  max-width: 550px;
  margin: 8px auto 4px;
  padding: 18px;
  background: #ffffff;
  color: #1a2033;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}

/* Pre-iframe state: while embed.js is still loading, the two
   placeholder <p> elements and the "Read on Substack" link should
   look like a clean fallback card, not raw text inside a wrapper. */
.newsletter-page .substack-post-embed > p:first-child {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #14181f;
}
.newsletter-page .substack-post-embed > p:nth-child(2) {
  margin: 0 0 14px;
  font-size: 15px;
  color: #5a6478;
}
.newsletter-page .substack-post-embed > a[data-post-link] {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  background: #ff6719; /* Substack orange */
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.newsletter-page .substack-post-embed > a[data-post-link]:hover,
.newsletter-page .substack-post-embed > a[data-post-link]:focus-visible {
  background: #e0560f;
  color: #ffffff;
  text-decoration: none;
}

/* Once embed.js replaces the inner contents with an iframe, the
   styles above no longer apply (the children are gone). The iframe
   inherits its width from the wrapper's max-width: 550px and centers
   automatically via the wrapper's margin: auto. Reset padding so the
   iframe sits flush, and remove the inner-card chrome (Substack's
   iframe already brings its own border + shadow). */
.newsletter-page .substack-post-embed:has(iframe) {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.newsletter-page .substack-post-embed iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}

/* Mobile: edge-to-edge within the card padding. */
@media (max-width: 640px) {
  .newsletter-page .substack-post-embed {
    max-width: 100%;
    margin: 8px 0 4px;
  }
}