/* ============================================================
   newsletter.css — WEB / ARCHIVE build for moirée newsletter
   ------------------------------------------------------------
   Scoped under .nl-issue. Reuses the site design tokens from
   style.css (var(--bg), var(--text), var(--primary-text) …) so
   the newsletter automatically follows the page's light/dark
   theme and self-hosted fonts.
   This is the WEB build only — the email build is rendered
   server-side as table-based inline HTML (no CSS file).
   ============================================================ */

.nl-issue {
  /* category colours (site .type-* dark values) — theme-stable */
  --nl-up: #5DCAA5;
  --nl-c-harass: #F0997B;
  --nl-c-invis: #7BBBF0;
  --nl-c-pay: #5DCAA5;
  --nl-c-gate: #D4BCFF;
  --nl-c-gender: #E8B55A;
  --nl-c-token: #B8B0A8;
  --nl-c-neutral: var(--border2, rgb(128 128 128 / 35%));
  --nl-font-headline: 'Playfair Display', georgia, serif;
  --nl-font-body: 'Source Serif 4', georgia, serif;
  --nl-font-mono: 'IBM Plex Mono', monospace;

  max-width: 660px;
  margin: 0 auto;
  font-family: var(--nl-font-body);
  line-height: 1.65;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.nl-issue *,
.nl-issue *::before,
.nl-issue *::after { box-sizing: border-box; }

/* -- Masthead -- */
.nl-masthead {
  position: relative;
  border: 0.5px solid var(--border);
  padding: 26px 28px 30px;
  overflow: hidden;
  background: var(--bg2);
  border-radius: 8px;
}

.nl-masthead::before,
.nl-masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
}
.nl-masthead::before { background: repeating-linear-gradient(115deg, currentcolor 0 1px, transparent 1px 7px); }
.nl-masthead::after  { background: repeating-linear-gradient(119deg, currentcolor 0 1px, transparent 1px 7px); }

.nl-eyebrow {
  position: relative;
  font-family: var(--nl-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.nl-brand {
  position: relative;
  font-family: var(--nl-font-headline);
  font-weight: 700;
  letter-spacing: -0.5px;
  font-size: clamp(48px, 13vw, 84px);
  line-height: 0.95;
  margin: 14px 0 0; /* reset UA <h1> margins — .nl-brand is an <h1> */
}
.nl-brand span { color: var(--primary-text); }
.nl-brand-link { color: inherit; text-decoration: none; }
.nl-brand-link:hover { text-decoration: none; }

.nl-tagline {
  position: relative;
  font-family: var(--nl-font-body);
  font-size: 14px;
  color: var(--text2);
  margin-top: 14px;
  max-width: 50ch;
}

/* -- Intro -- */
.nl-greet {
  font-family: var(--nl-font-headline);
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 700;
  margin: 44px 0 12px;
}

.nl-intro {
  font-family: var(--nl-font-body);
  font-size: 16px;
  max-width: 64ch;
  color: var(--text2);
  margin: 0 0 14px;
}
.nl-intro b { font-weight: 400; color: var(--text); }

/* Editable-intro markdown: **bold** / *italic* / [links]. Real bold weight here
   (distinct from the de-emphasised <b> used by the auto-generated copy above). */
.nl-intro strong { font-weight: 700; color: var(--text); }
.nl-intro em { font-style: italic; }
.nl-intro a { color: var(--primary); text-decoration: underline; }
.nl-intro:last-of-type { margin-bottom: 0; }

/* Lead/intro accent — the editable intro gets a primary left rule (the closing
   paragraph stays plain). */
.nl-lead {
  border-left: 2px solid var(--primary);
  padding-left: 14px;
  margin-bottom: 14px;
}
.nl-lead .nl-intro { margin-bottom: 8px; }
.nl-lead .nl-intro:last-child { margin-bottom: 0; }

.nl-delta {
  color: var(--nl-up);
  font-weight: 500;
  font-family: var(--nl-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  margin: 26px 0 14px;
}

/* -- Stat cards (reuse .stat-cell tokens) -- */
.nl-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0 8px;
}

.nl-stat {
  padding: 18px 16px;
  border-right: 0.5px solid var(--border);
}
.nl-stat:last-child { border-right: none; }

.nl-stat .n {
  font-family: var(--nl-font-mono);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--primary-text);
}
.nl-stat .d { font-size: 11px; margin-left: 4px; }
.nl-stat .d.up { color: var(--nl-up); }
.nl-stat .d.flat { color: var(--text3); }
.nl-stat .l { font-size: 11px; color: var(--text3); margin-top: 6px; line-height: 1.4; }

/* -- Charts -- */
.nl-chart { margin: 34px 0; }

.nl-chart h2 {
  font-family: var(--nl-font-headline);
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 3px;
}

.nl-chart .sub {
  font-family: var(--nl-font-mono);
  font-size: 10.5px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.nl-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 9px 0;
}
.nl-row .k { font-size: 13px; text-align: left; line-height: 1.25; color: var(--text2); }

.nl-track {
  height: 10px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.nl-fill { height: 100%; border-radius: 2px; }
.nl-row .v { font-family: var(--nl-font-mono); font-size: 12px; color: var(--text3); white-space: nowrap; }
.nl-row .v b { color: var(--text); font-weight: 500; }
.nl-row .v .up { color: var(--nl-up); margin-left: 5px; }
.nl-row .v .flat { color: var(--text3); margin-left: 5px; }

/* -- Sparkline (year trend) -- */
.nl-spark {
  display: grid;
  gap: 8px;
  align-items: end;
  height: 90px;
  border-bottom: 0.5px solid var(--border);
  margin-top: 10px;
}
.nl-spark .b { background: var(--primary); opacity: 0.45; position: relative; border-radius: 2px 2px 0 0; }
.nl-spark .b.lead { opacity: 0.95; }

.nl-spark .b span {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--nl-font-mono);
  font-size: 10px;
  color: var(--text3);
}
.nl-spark-x { display: grid; gap: 8px; margin-top: 6px; }
.nl-spark-x span { font-family: var(--nl-font-mono); font-size: 9.5px; color: var(--text3); text-align: center; }

/* -- "Most present right now" box -- */
.nl-now {
  border: 0.5px solid var(--primary);
  background: var(--bg2);
  padding: 22px 22px 8px;
  margin: 34px 0;
  border-radius: 8px;
}

.nl-now .cap {
  font-family: var(--nl-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-text);
  margin-bottom: 12px;
}
.nl-now ul { list-style: none; margin: 0; padding: 0; }

.nl-now li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-top: 0.5px solid var(--border);
  font-size: 14px;
  align-items: baseline;
}
.nl-now li:first-child { border-top: none; }
.nl-now-main { flex: 1; min-width: 0; color: var(--text2); }
.nl-now li b { font-weight: 400; color: var(--text); }
.nl-now li .tag { font-family: var(--nl-font-mono); font-size: 11px; color: var(--text3); flex-shrink: 0; white-space: nowrap; }

/* -- CTA -- */
.nl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

.nl-btn {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 6px;
  border: 0.5px solid var(--border2, var(--border));
  color: var(--text);
}
.nl-btn.solid { background: var(--primary); color: #fff; border-color: var(--primary); }

/* -- Footer -- */
.nl-rule { height: 0.5px; background: var(--border); margin: 46px 0 0; }
.nl-foot { font-family: var(--nl-font-mono); font-size: 10.5px; color: var(--text3); line-height: 1.8; margin-top: 18px; }
.nl-foot a { color: var(--text3); }

@media (width <= 520px) {
  .nl-stats { grid-template-columns: repeat(2, 1fr); }
  .nl-stat:nth-child(2) { border-right: none; }
  .nl-row { grid-template-columns: 96px 1fr auto; gap: 9px; }
  .nl-row .k { font-size: 11.5px; }
}

/* ============================================================
   Archive list (public /newsletter page) + permalink page
   ============================================================ */
.nl-archive { margin: 8px 0 0; }
.nl-archive-status { color: var(--text3); font-size: 14px; }

.nl-archive-item {
  border: var(--border-width, 0.5px) solid var(--border);
  border-radius: var(--radius-card, 8px);
  margin-bottom: 12px;
  background: var(--bg2);
  overflow: hidden;
}

.nl-archive-summary {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}
.nl-archive-summary::-webkit-details-marker { display: none; }

.nl-archive-summary::before {
  content: "+";
  font-family: 'IBM Plex Mono', monospace;
  color: var(--primary-text);
  font-size: 18px;
  line-height: 1;
  order: 3;
  margin-left: auto;
}
.nl-archive-item[open] .nl-archive-summary::before { content: "–"; }

.nl-archive-no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--primary-text);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.nl-archive-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nl-archive-subject { font-family: 'Source Serif 4', Georgia, serif; font-weight: 400; font-size: 16px; color: var(--text); }
.nl-archive-date { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--text3); }
.nl-archive-body { padding: 0 20px 20px; }
.nl-archive-teaser { color: var(--text2); font-size: 14px; margin: 0 0 12px; }

.nl-archive-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--primary-text);
  text-decoration: none;
}
.nl-archive-link:hover { text-decoration: underline; }
.nl-archive-full .nl-issue { max-width: none; margin: 8px 0 0; }
.nl-archive-full .nl-masthead { display: none; } /* number/date already in the summary */

/* On the archive accordion and the permalink page the site footer is already
   present, so suppress the newsletter's own footer there (it still shows in the
   admin preview, which has no site chrome). */
.nl-archive-full .nl-rule,
.nl-archive-full .nl-foot,
#nl-issue-root .nl-rule,
#nl-issue-root .nl-foot { display: none; }

/* The newsletter web build is intentionally motion-free; this is a guard so any
   future transition/animation added here still honours the user's preference. */
@media (prefers-reduced-motion: reduce) {
  .nl-issue *,
  .nl-archive * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* permalink page */
.nl-issue-back {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--text3);
  text-decoration: none;
  margin-bottom: 18px;
}
.nl-issue-back:hover { color: var(--primary-text); }