/* ─────────────────────────────────────────────────────────────────────────────
   Newsletter content typography — ONE stylesheet for both places a newsletter is
   read: the staff editor (.nle-content) and the member portal reader. The server
   renderer (NewsletterHtmlRenderer) and the editor's node views emit the same
   elements and classes, so what staff see while writing is what members get.

   Editorial, not app-like: Fraunces for headings, Inter for reading text, a
   ~68-character measure, generous leading.
   ───────────────────────────────────────────────────────────────────────────── */

.nl-content {
  --nl-ink: #14213d;
  --nl-ink-soft: #3c4a63;
  --nl-muted: #6b7a92;
  --nl-rule: #dfe6f0;
  --nl-accent: var(--nl-publication-accent, #0f6ab4);
  --nl-mark: #fff1a8;
  --nl-measure: 68ch;

  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--nl-ink);
  font-feature-settings: 'kern', 'liga', 'calt';
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  hyphens: manual;
}

.nl-content > * { max-width: var(--nl-measure); margin-left: auto; margin-right: auto; }
.nl-content > :first-child { margin-top: 0; }
.nl-content > :last-child { margin-bottom: 0; }

.nl-content p { margin: 0 auto 1.1em; }

.nl-content h2, .nl-content h3, .nl-content h4 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  color: var(--nl-ink);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  text-wrap: balance;
  scroll-margin-top: 5rem;
}
.nl-content h2 { font-size: 1.75rem; line-height: 1.22; font-weight: 600; margin: 2.1em auto 0.6em; }
.nl-content h3 { font-size: 1.32rem; line-height: 1.3; font-weight: 600; margin: 1.8em auto 0.5em; }
.nl-content h4 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem; line-height: 1.4; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--nl-ink-soft);
  margin: 1.8em auto 0.5em;
}

.nl-content a {
  color: var(--nl-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--nl-accent) 45%, transparent);
  transition: text-decoration-color 0.15s;
}
.nl-content a:hover { text-decoration-color: currentColor; }

.nl-content strong { font-weight: 650; }
.nl-content mark { background: var(--nl-mark); color: inherit; padding: 0.05em 0.15em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.nl-content sub, .nl-content sup { font-size: 0.72em; line-height: 0; }

.nl-content ul, .nl-content ol { padding-left: 1.4em; margin: 0 auto 1.1em; }
.nl-content li { margin: 0.3em 0; padding-left: 0.2em; }
.nl-content li > p { margin: 0; }
.nl-content li::marker { color: var(--nl-accent); }
.nl-content ol > li::marker { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }

.nl-content blockquote {
  margin: 1.6em auto;
  padding: 0.15em 0 0.15em 1.2em;
  border-left: 3px solid var(--nl-accent);
  color: var(--nl-ink-soft);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.12em;
  font-style: italic;
  line-height: 1.6;
}
.nl-content blockquote > :last-child { margin-bottom: 0; }

.nl-content hr {
  border: 0;
  height: 1px;
  margin: 2.6em auto;
  background: var(--nl-rule);
  opacity: 1;
}

/* Images: same classes as NewsletterHtmlRenderer — nl-image--center|left|right|wide */
.nl-content figure.nl-image { margin: 1.8em auto; }
.nl-content figure.nl-image img { display: block; width: 100%; height: auto; border-radius: 6px; }
.nl-content figure.nl-image figcaption { margin-top: 0.6em; font-size: 0.85rem; line-height: 1.5; color: var(--nl-muted); text-align: center; }
.nl-content figure.nl-image--left { float: left; margin: 0.3em 1.6em 1em 0; max-width: 50%; }
.nl-content figure.nl-image--right { float: right; margin: 0.3em 0 1em 1.6em; max-width: 50%; }
.nl-content figure.nl-image--left figcaption, .nl-content figure.nl-image--right figcaption { text-align: left; }
.nl-content figure.nl-image--wide { max-width: min(100%, calc(var(--nl-measure) + 12rem)); }
.nl-content h2, .nl-content h3, .nl-content hr, .nl-content .nl-table { clear: both; }

/* Tables */
.nl-content .nl-table, .nl-content .tableWrapper { margin: 1.6em auto; overflow-x: auto; }
.nl-content table { width: 100%; border-collapse: collapse; font-size: 0.94em; line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
.nl-content th, .nl-content td { border-bottom: 1px solid var(--nl-rule); padding: 0.55em 0.7em; vertical-align: top; text-align: left; }
.nl-content th { font-weight: 650; color: var(--nl-ink); border-bottom: 2px solid var(--nl-ink); background: transparent; }
.nl-content th > p, .nl-content td > p { margin: 0; }

.nl-content .nl-align-center { text-align: center; }
.nl-content .nl-align-right { text-align: right; }
.nl-content .nl-align-justify { text-align: justify; }

/* ── Newsletter blocks (schema v2) ──────────────────────────────────────── */

/* Callout */
.nl-content .nl-callout {
  --tone: #0f6ab4; --tone-bg: #eef5fc;
  position: relative;
  margin: 1.6em auto;
  padding: 1em 1.2em 1em 3.1em;
  border-radius: 10px;
  background: var(--tone-bg);
  border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
}
.nl-content .nl-callout::before {
  content: '';
  position: absolute; left: 1.05em; top: 1.15em;
  width: 1.2em; height: 1.2em;
  background: var(--tone);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.nl-content .nl-callout > :last-child, .nl-content .nl-callout__body > :last-child { margin-bottom: 0; }
.nl-content .nl-callout p, .nl-content .nl-callout li { max-width: none; }
.nl-content .nl-callout--info { --tone: #0f6ab4; --tone-bg: #eef5fc; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.9 12H7.1V6.6h1.8zm-.9-6.8a1.1 1.1 0 1 1 0-2.2 1.1 1.1 0 0 1 0 2.2z'/%3E%3C/svg%3E"); }
.nl-content .nl-callout--note { --tone: #6d5bd0; --tone-bg: #f3f1fd; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1h12v10l-4 4H2zm8 13 3-3h-3z'/%3E%3C/svg%3E"); }
.nl-content .nl-callout--success { --tone: #0f7a52; --tone-bg: #ebf8f2; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM6.9 11.4 3.6 8.1l1.3-1.3 2 2 4.2-4.2 1.3 1.3z'/%3E%3C/svg%3E"); }
.nl-content .nl-callout--warning { --tone: #b45309; --tone-bg: #fff6e6; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 0 15h16zm.9 11.5H7.1v-1.8h1.8zm0-3H7.1V5.5h1.8z'/%3E%3C/svg%3E"); }

/* Pull quote */
.nl-content .nl-pullquote { margin: 2.2em auto; padding: 0.4em 0; text-align: center; border-top: 1px solid var(--nl-rule); border-bottom: 1px solid var(--nl-rule); }
.nl-content .nl-pullquote blockquote { margin: 0; padding: 0.8em 0 0.2em; border: 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.55rem; line-height: 1.35; font-style: italic; font-weight: 500; color: var(--nl-ink); text-wrap: balance; }
.nl-content .nl-pullquote blockquote p { margin: 0; max-width: none; }
.nl-content .nl-pullquote figcaption { padding-bottom: 0.9em; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nl-muted); }

/* Columns */
.nl-content .nl-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1.6em auto; }
.nl-content .nl-column > :first-child { margin-top: 0; }
.nl-content .nl-column > :last-child { margin-bottom: 0; }
.nl-content .nl-column > * { max-width: none; }

/* Call-to-action button */
.nl-content .nl-cta { margin: 1.8em auto; text-align: center; }
.nl-content .nl-cta--left { text-align: left; }
.nl-content .nl-button {
  display: inline-block;
  padding: 0.75em 1.6em;
  border-radius: 999px;
  border: 2px solid var(--nl-accent);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 650; font-size: 0.95rem; line-height: 1.2; letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.nl-content .nl-button--primary { background: var(--nl-accent); color: #fff; }
.nl-content .nl-button--secondary { background: transparent; color: var(--nl-accent); }
.nl-content a.nl-button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--nl-accent) 30%, transparent); text-decoration: none; }

/* Story card */
.nl-content .nl-story {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin: 1.4em auto;
  padding: 1rem;
  border: 1px solid var(--nl-rule);
  border-radius: 12px;
  background: #fff;
}
.nl-content .nl-story--text { grid-template-columns: minmax(0, 1fr); }
.nl-content .nl-story__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.nl-content .nl-story__kicker { margin: 0 0 0.3em; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--nl-accent); }
.nl-content .nl-story__headline { margin: 0 0 0.35em; font-family: 'Fraunces', Georgia, serif; font-size: 1.22rem; line-height: 1.3; font-weight: 600; }
.nl-content .nl-story__headline a { color: var(--nl-ink); text-decoration: none; }
.nl-content .nl-story__headline a:hover { color: var(--nl-accent); }
.nl-content .nl-story__summary { margin: 0 0 0.6em; font-size: 0.95rem; line-height: 1.55; color: var(--nl-ink-soft); }
.nl-content .nl-story__more { margin: 0; font-size: 0.88rem; font-weight: 600; }
.nl-content .nl-story__more a::after { content: ' →'; }
.nl-content .nl-story__body > * { max-width: none; }

/* Toggle (details) */
.nl-content .nl-details { margin: 1.2em auto; border: 1px solid var(--nl-rule); border-radius: 10px; padding: 0.2em 1em; }
.nl-content .nl-details > summary { cursor: pointer; padding: 0.6em 0; font-weight: 650; list-style: none; display: flex; align-items: center; gap: 0.5em; }
.nl-content .nl-details > summary::-webkit-details-marker { display: none; }
.nl-content .nl-details > summary::before { content: ''; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; flex: 0 0 auto; }
.nl-content .nl-details[open] > summary::before { transform: rotate(45deg); }
.nl-content .nl-details__body { padding-bottom: 0.8em; }
.nl-content .nl-details__body > * { max-width: none; }

@media (max-width: 640px) {
  .nl-content .nl-columns { grid-template-columns: 1fr; gap: 0; }
  .nl-content .nl-story { grid-template-columns: 1fr; }
  .nl-content .nl-pullquote blockquote { font-size: 1.3rem; }
}

@media (max-width: 640px) {
  .nl-content { font-size: 1rem; }
  .nl-content h2 { font-size: 1.45rem; }
  .nl-content figure.nl-image--left, .nl-content figure.nl-image--right { float: none; max-width: 100%; margin: 1.4em auto; }
}

@media print {
  .nl-content { font-size: 11pt; color: #000; }
  .nl-content a { color: inherit; }
  .nl-content figure, .nl-content table, .nl-content blockquote { break-inside: avoid; }
}