/* Newsletter archive: the issue pages (/newsletter/<slug>) and the issue list on /newsletter.
   Issue pages load it after /styles.css and /guide.css and use their tokens. */

/* The issue text */
.issue-body { margin-top: 36px; }
.guide article .issue-body > :first-child { margin-top: 0; }
.guide article .issue-body p.ps { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 16px; line-height: 28px; }

/* A card inside an issue (the job description in issue 1) */
.job-card { margin-top: 24px; border: 1px solid var(--border); border-inline-start: 5px solid var(--amber); border-radius: 16px; overflow: hidden; background: #fff; }
.guide article .job-card-title { margin: 0; padding: 14px 20px; background: var(--navy); color: var(--off-white); font-size: 17px; line-height: 26px; font-weight: 800; }
.job-card dl { margin: 0; }
.job-card dl > div { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 16px; padding: 12px 20px; border-top: 1px solid var(--border); }
.job-card dl > div:first-child { border-top: 0; }
.job-card dt { font-size: 15px; line-height: 26px; font-weight: 800; color: var(--ink); }
.job-card dd { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* Previous and next issue */
.issue-nav { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guide article .issue-nav a { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--border); background: #fff; text-decoration: none; font-weight: 400; transition: border-color .15s ease, transform .15s ease; }
.guide article .issue-nav a:hover { border-color: var(--amber); transform: translateY(-1px); color: var(--ink); }
.issue-nav-next { grid-column: 2; text-align: end; }
.issue-nav-label { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-muted); }
.issue-nav-title { font-size: 16px; line-height: 24px; font-weight: 800; color: var(--ink); }
.guide article p.issue-all { margin-top: 20px; font-size: 16px; line-height: 24px; text-align: center; }

/* End of the issue: newsletter signup, then the discovery call */
.guide-cta.issue-end .wrap { padding-block: 64px 104px; }
.issue-signup { padding: 40px; border-radius: 24px; border: 1px solid var(--border); background: #fff; }
.issue-signup h2 { margin-top: 10px; font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -0.4px; }
.issue-signup .lead-form { max-width: 480px; margin-inline: auto; }
.issue-end .team-cta-card { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) { .guide article .issue-nav a { transition: none; } }

/* Phone */
@media (max-width: 720px) {
  .job-card dl > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; }
  .guide article .job-card-title { padding: 12px 16px; }
  .issue-nav { grid-template-columns: 1fr; }
  .issue-nav-next { grid-column: auto; }
  .guide-cta.issue-end .wrap { padding-block: 48px 56px; }
  .issue-signup { padding: 28px 18px; }
  .issue-signup h2 { font-size: 26px; line-height: 34px; }
  .issue-signup .lead-form { padding: 20px; }
}

/* The issue list on /newsletter (pasted in from _archive-snippet.html) */
.nl-archive { margin-top: 72px; text-align: start; }
.nl-archive h2 { font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -0.3px; }
.nl-archive-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.nl-archive-list a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border); background: #fff; text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.nl-archive-list a:hover { border-color: var(--amber); transform: translateY(-1px); color: var(--ink); }
.nl-archive-list time { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.nl-archive-title { font-size: 18px; line-height: 27px; font-weight: 800; }
.nl-archive-sum { font-size: 16px; line-height: 26px; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .nl-archive-list a { transition: none; } }
@media (max-width: 720px) { .nl-archive { margin-top: 56px; } .nl-archive h2 { font-size: 24px; line-height: 32px; } }