/* ============================================================
   pulse.css — Human-First AI Pulse, research hub + editions
   Pulse-specific layout only. The pages ALSO link the site's
   main /styles.css, so they inherit design tokens (--cream,
   --ink, --teal, --yellow, type scale, spacing), nav, and
   footer. Keep everything here on those same tokens so the
   research section stays native to doctorjohnna.com.
   ============================================================ */

/* ---- Shared page frame ---- */
.pulse-main {
  background: var(--cream);
  color: var(--ink);
}

.pulse-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--section-pad-y) var(--section-pad-x);
}

/* ---- Masthead (title + tagline + opener) ---- */
.pulse-masthead {
  border-bottom: var(--hairline) solid color-mix(in oklch, var(--ink) 15%, transparent);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
}

/* Kicker: small uppercase cadence cue above the title ("New research every week"). */
.pulse-kicker {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 var(--space-3);
}

.pulse-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: var(--type-hero);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
}
/* Title styling: "Human-First" in ink, "AI Pulse" in teal. */
.pulse-title .hf { color: var(--ink); }
.pulse-title .ai { color: var(--teal); }

.pulse-tagline {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: var(--type-subhead);
  color: color-mix(in oklch, var(--ink) 75%, transparent);
  margin: 0 0 var(--space-4);
}

.pulse-meta {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--type-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink) 60%, transparent);
  margin: 0 0 var(--space-4);
}

.pulse-opener {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--type-lead);
  line-height: 1.6;
  margin: 0;
}

/* ---- Findings ---- */
.pulse-finding {
  padding: var(--space-6) 0;
  border-bottom: var(--hairline) solid color-mix(in oklch, var(--ink) 12%, transparent);
}
.pulse-finding:last-of-type { border-bottom: none; }

.pulse-finding-headline {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: var(--type-section);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}
/* Teal highlight for the key word(s) only, ~10-15% of text. */
.pulse-finding-headline .accent { color: var(--teal); }

/* Psychology label: one of The Identity Angle / The Energy Cost / The Alignment Check */
.pulse-label {
  display: inline-block;
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal);
  border: var(--hairline) solid var(--teal);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
  margin: 0 0 var(--space-3);
}

.pulse-finding-body {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--type-body);
  line-height: 1.7;
}
.pulse-finding-body p { margin: 0 0 var(--space-3); }

.pulse-citation {
  font-style: italic;
  color: color-mix(in oklch, var(--ink) 65%, transparent);
}

.pulse-read {
  display: inline-block;
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--type-small);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--teal);
  padding-bottom: 2px;
  transition: color var(--transition-fast);
}
.pulse-read:hover { color: var(--teal); }

/* ============================================================
   FOOTER NAV (at the foot of every edition + category page)
   "Read more by category" buttons, then a "past editions" dropdown.
   ============================================================ */
.pulse-more {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--hairline) solid color-mix(in oklch, var(--ink) 15%, transparent);
}

.pulse-more-heading {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink) 60%, transparent);
  margin: 0 0 var(--space-3);
}

/* Category buttons row */
.pulse-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.pulse-category-button {
  text-decoration: none;
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--type-small);
  font-weight: 700;
  color: var(--ink);
  border: var(--hairline) solid var(--teal);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pulse-category-button:hover {
  background: var(--teal);
  color: var(--cream);
}

/* Past-editions dropdown (native <details>, no JS) */
.pulse-archive {
  border: var(--hairline) solid color-mix(in oklch, var(--ink) 20%, transparent);
  border-radius: 12px;
  padding: 0 var(--space-4);
}
.pulse-archive summary {
  list-style: none;
  cursor: pointer;
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--type-body);
  padding: var(--space-4) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pulse-archive summary::-webkit-details-marker { display: none; }
.pulse-archive summary::after {
  content: "+";
  color: var(--teal);
  font-weight: 700;
  transition: transform var(--transition-fast);
}
.pulse-archive[open] summary::after { content: "\2212"; } /* minus when open */

.pulse-archive-list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.pulse-archive-list a {
  text-decoration: none;
  color: var(--ink);
  font-family: 'Switzer', system-ui, sans-serif;
  border-bottom: var(--hairline) solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.pulse-archive-list a:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

/* ============================================================
   CATEGORY PAGE — all findings under one label
   ============================================================ */
/* Category label: same teal pill as the edition's .pulse-label, used as the page
   heading so readers always see which category they are in. Slightly larger, own line. */
.pulse-category-label {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--type-small);
  padding: 0.4rem 1rem;
}
.pulse-category-intro {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--type-body);
  color: color-mix(in oklch, var(--ink) 70%, transparent);
  margin: 0 0 var(--space-4);
}
.pulse-category-source {
  display: block;
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: var(--type-small);
  color: color-mix(in oklch, var(--ink) 55%, transparent);
  margin-top: var(--space-2);
}