/* ============================================================
   Newsletter page redesign — same visual language as the finished
   homepage pass (redesign.css, body.home-refined).
   Scoped to .newsletter-refined. Loaded AFTER styles.css.
   Constraints: fonts unchanged (Mukta body / Source Serif display),
   copy + images + links unchanged; PDF iframe, search/year filters,
   and cover read/download links stay fully functional.
   ============================================================ */

/* ---- Design tokens (identical to redesign.css) ---- */
.newsletter-refined {
  --ink-900: #0c2143;
  --accent: #12457e;
  --rule: #e7ecf2;
  --rule-strong: #d3dbe6;
  --paper: #f5f8fc;
  --shadow-card: 0 18px 40px -24px rgba(12,33,67,0.45);
  accent-color: var(--accent);
}

/* ---- Themed browser surfaces ---- */
.newsletter-refined ::selection { background: #cfe0f4; color: var(--ink-900); }
.newsletter-refined :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---- Section kickers: refined tracked accent label ---- */
.newsletter-refined .eyebrow {
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.14em;
  font-size: 0.72rem; color: var(--accent); margin: 0 0 12px;
}

/* ---- Content headings: serif, tightened tracking, deep navy.
   Scoped to page content — never the dark footer (headings stay white). ---- */
.newsletter-refined main h2,
.newsletter-refined main h3 {
  font-family: var(--serif); color: var(--ink-900); letter-spacing: -0.018em;
}

/* ============================================================
   PAGE BANNER — keep height; lighter blue-hue overlay, serif display
   ============================================================ */
.newsletter-refined .page-banner .hero-overlay {
  background: linear-gradient(90deg, rgba(16,42,82,0.77) 0%, rgba(16,42,82,0.37) 100%);
}
.newsletter-refined .page-banner h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.018em; color: #fff;
}
.newsletter-refined .breadcrumb { color: #b9d2ea; }
.newsletter-refined .breadcrumb a { color: #d7e3ef; }
.newsletter-refined .breadcrumb a:hover { color: #fff; }
.newsletter-refined .page-banner p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   FEATURED ISSUE — buttons + PDF reader frame
   ============================================================ */
/* Primary (Open Full Screen) = solid accent; secondary (Download) = hairline ghost */
.newsletter-refined .btn {
  border-radius: 8px; font-weight: 600; padding: 13px 24px;
}
.newsletter-refined .btn-navy { background: var(--accent); color: #fff; border: none; }
.newsletter-refined .btn-navy:hover { background: var(--ink-900); color: #fff; transform: translateY(-1px); }
.newsletter-refined .btn-ghost {
  background: #fff; color: var(--accent); border: 1px solid var(--rule-strong);
}
.newsletter-refined .btn-ghost:hover { background: var(--paper); color: var(--ink-900); border-color: var(--accent); transform: translateY(-1px); }

/* Reader: calmer hairline frame + refined shadow; dark viewer chrome kept */
.newsletter-refined .newsletter-reader {
  border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: var(--shadow-card);
}

/* ============================================================
   ARCHIVE — filter controls
   ============================================================ */
.newsletter-refined .newsletter-tools label span { color: var(--ink-900); letter-spacing: 0.1em; }
.newsletter-refined .newsletter-tools input,
.newsletter-refined .newsletter-tools select {
  border: 1px solid var(--rule-strong); border-radius: 8px;
}
.newsletter-refined .newsletter-tools input:focus-visible,
.newsletter-refined .newsletter-tools select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
  border-color: var(--accent); box-shadow: none;
}
/* keep a calm focus ring even in browsers that fire :focus without :focus-visible */
.newsletter-refined .newsletter-tools input:focus,
.newsletter-refined .newsletter-tools select:focus {
  border-color: var(--accent); box-shadow: none;
}

/* ============================================================
   COVER CARDS — hairline, soft radius, quiet rest, hover lift
   ============================================================ */
.newsletter-refined .newsletter-card {
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.newsletter-refined .newsletter-card:hover,
.newsletter-refined .newsletter-card:focus-within {
  transform: translateY(-4px); border-color: var(--rule-strong); box-shadow: var(--shadow-card);
}
/* current issue: calm 1px accent border instead of the thick 2px ring */
.newsletter-refined .newsletter-card.is-current {
  border-color: var(--accent); box-shadow: none;
}
.newsletter-refined .newsletter-card.is-current:hover,
.newsletter-refined .newsletter-card.is-current:focus-within {
  box-shadow: var(--shadow-card);
}
.newsletter-refined .newsletter-card__cover:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.newsletter-refined .newsletter-card__year { color: var(--accent); }
.newsletter-refined .newsletter-card h3 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900);
}
.newsletter-refined .newsletter-card__body > a { color: var(--accent); }
.newsletter-refined .newsletter-card__body > a:hover { color: var(--ink-900); }
.newsletter-refined .newsletter-empty-state { border-color: var(--rule-strong); border-radius: 12px; }

/* ============================================================
   Respect reduced motion — no lift/slide transforms
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .newsletter-refined .newsletter-card,
  .newsletter-refined .btn { transition: none; }
  .newsletter-refined .newsletter-card:hover,
  .newsletter-refined .newsletter-card:focus-within,
  .newsletter-refined .btn:hover { transform: none; }
}

/* Banner height reduced ~20% (owner request) */
.newsletter-refined .page-banner { padding: 40px 0; }