/* Peptide Price Lab — components.css
   ──────────────────────────────────────────────────────────────────────────
   Listing + article-component styles for the editorial design system.

   WHY THIS FILE EXISTS
   The Eleventy templates (index pages, news, sources, the homepage, and the
   news article) use component classes that were defined in the OLD
   style.css but never ported into content.css during the design migration.
   That's why those pages render half-styled. This file fills every gap, in
   the parchment / Instrument Serif editorial language, and is loaded by
   base.njk immediately AFTER content.css.

   It reuses the tokens declared in content.css (:root). Nothing here
   redefines a token or a class already styled in content.css.

   SECTIONS
   1.  Homepage          (.home-hero, .content-section, .steps-grid, .faq-list)
   2.  Section headings   (.section-heading, .section-label, .peptide-section-heading)
   3.  Guide listings     (.start-page, .guide-grid, .guide-card, .intro-note)
   4.  Peptide index      (.peptides-page, .peptide-cards, .microcopy)
   5.  News index         (.news-page, .article-list, .article-card)
   6.  News article       (.news-article, .timeline, .peptide-list-card, .sources-section)
   7.  Sources directory  (.sources-page, .vendor-meta, .price-cta)
   8.  Related reading     (.related-reading)
   9.  Dispatch           (.dispatch-page, .dispatch-lead)
   10. Responsive overrides
   ────────────────────────────────────────────────────────────────────────── */


/* ============================================================
   1. HOMEPAGE
   ============================================================ */
.home-hero {
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  max-width: 880px;
}
.home-hero h1 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(54px, 8vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 24px;
}
.home-hero .lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 640px;
  margin: 0 0 32px;
  font-weight: var(--display-weight);
}
.home-hero .btn-cta { font-size: 13px; padding: 14px 24px; }
.home-hero .microcopy { margin-top: 16px; }

.content-section {
  padding: var(--section-y) 0;
  border-bottom: 1px solid var(--rule);
}
.content-section > p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 680px;
  margin: 0 0 18px;
}
.content-section > .btn-card,
.content-section > .btn-cta { margin-top: 12px; }
.content-section > h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}

/* Steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 32px;
  border-top: 2px solid var(--ink);
}
.step-card {
  padding: 28px 28px 28px 0;
  border-right: 1px solid var(--rule);
}
.step-card:last-child { border-right: none; padding-right: 0; }
.step-card:not(:first-child) { padding-left: 28px; }
.step-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
  font-weight: var(--display-weight);
  margin-bottom: 16px;
}
.step-card h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.step-card p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* Homepage peptide chips */
.peptide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 28px 0 28px;
}
.peptide-cards .peptide-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 22px;
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.peptide-cards .peptide-card:hover {
  border-color: var(--accent);
  background: var(--paper-2);
  color: var(--accent);
}

/* FAQ */
.faq-list { margin-top: 24px; border-top: 2px solid var(--ink); }
.faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.faq-item h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.faq-item p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
  max-width: 680px;
}
.faq-item a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================
   2. SECTION HEADINGS
   ============================================================ */
.section-heading {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}

.section-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 48px 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.section-label:first-of-type { margin-top: 24px; }

.section-see-all {
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: 13px;
}
.section-see-all a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.peptide-section-heading {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 48px 0 20px;
}
.peptide-section-heading:first-of-type { margin-top: 36px; }


/* ============================================================
   3. GUIDE LISTINGS  (start-here / plain-language / notes)
   ============================================================ */
.start-page { padding-bottom: 32px; }

.intro-note {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 20px 24px;
  margin: 28px 0 8px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}
.intro-note strong { color: var(--ink); font-weight: 600; }

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0;
  margin: 8px 0 24px;
  border-top: 1px solid var(--rule);
}
.guide-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
/* two-up rhythm with a vertical rule */
@container app (min-width: 761px) {
  .guide-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}
.guide-card h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  transition: color var(--t-fast);
}
.guide-card:hover h2 { color: var(--accent); }
.guide-card p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}
.guide-card .article-meta { margin: 0; }
.reading-time {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.read-more {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}


/* ============================================================
   4. PEPTIDE INDEX
   ============================================================ */
.peptides-page { padding-bottom: 32px; }
.microcopy {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-top: 32px;
}
.microcopy a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================
   5. NEWS INDEX
   ============================================================ */
.news-page { padding-bottom: 32px; }

.article-list {
  display: grid;
  gap: 0;
  margin-top: 24px;
  border-top: 2px solid var(--ink);
}
.article-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.article-card-with-image {
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start;
}
.article-card-image {
  overflow: hidden;
  border: 1px solid var(--rule);
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
}
.article-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-base);
}
.article-card:hover .article-card-image img { transform: scale(1.03); }
.article-card-content { display: flex; flex-direction: column; gap: 10px; }
.article-card h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  transition: color var(--t-fast);
}
.article-card:hover h2 { color: var(--accent); }
.article-card p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  max-width: 640px;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.card-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.18em;
}


/* ============================================================
   6. NEWS ARTICLE
   ============================================================ */
.news-article .article-header .article-meta { align-items: center; }

.article-hero-image {
  margin: 0 0 40px;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.article-hero-image img { width: 100%; height: auto; display: block; }

/* News article body: drop the narrow 680px column from the base .article-body
   rule (which makes the article feel skinny with big empty side margins) and
   let it fill the page like the other editorial articles. The content here is
   flat HTML (not sectionized), so we cap direct children at a comfortable
   reading width — wider than 680, matching the visual scale of sectioned and
   research-note pages. */
.news-article .article-body {
  max-width: none;
  padding: 48px var(--pad-h) 64px;
}
.news-article .article-body > * {
  max-width: 880px;
}
.news-article .article-body > .article-hero-image,
.news-article .article-body > .timeline,
.news-article .article-body > .peptide-list-card,
.news-article .article-body > .sources-section,
.news-article .article-body > .related-section,
.news-article .article-body > .callout {
  max-width: 960px;
}

@container app (max-width: 760px) {
  .news-article .article-body > * { max-width: none; }
}

/* "Peptides under review" list card */
.peptide-list-card {
  margin: 32px 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.plc-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  padding: 12px 20px;
}
.peptide-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 24px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
}
.peptide-row:last-child { border-bottom: none; }
.peptide-name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: var(--display-weight);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.peptide-use {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Regulatory timeline */
.timeline { margin: 32px 0; border-top: 2px solid var(--ink); }
.timeline-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 16px 0 4px;
}
.timeline-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.timeline-date {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.timeline-event {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}

/* Sources / footnotes */
.sources-section { margin: 48px 0 0; padding-top: 32px; border-top: 2px solid var(--ink); }
.sources-section h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}
.sources-list { list-style: none; padding: 0; margin: 0; counter-reset: src; }
/* Hanging indent via padding + absolute number — NOT grid/flex. Citations
   contain inline <em>/<a>, and grid/flex would each turn those into separate
   items and scatter them into the number column. Block flow keeps the whole
   citation as normal inline text with the number hanging in the left gutter. */
.sources-list li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.sources-list .src-num {
  position: absolute;
  left: 0;
  top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}
.sources-list a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.sources-list em { font-style: italic; }

.related-section { margin: 48px 0 0; padding-top: 32px; border-top: 2px solid var(--ink); }
.related-section h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}


/* ============================================================
   7. SOURCES DIRECTORY
   ============================================================ */
.sources-page { padding-bottom: 32px; }

.vendor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0;
  margin: 28px 0;
  border-top: 2px solid var(--ink);
}
/* Render as a two-up editorial ledger with dividing rules */
@container app (min-width: 761px) {
  .vendor-grid { grid-template-columns: 1fr 1fr; }
  .vendor-grid > .vendor-card:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 32px; }
  .vendor-grid > .vendor-card:nth-child(even) { padding-left: 32px; }
}
.vendor-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  border-left: none;
  border-top: none;
  border-right: none;
}
.vendor-card:hover { background: transparent; border-color: var(--rule); }
.vendor-name {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 30px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.vendor-desc {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.vendor-meta {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.vendor-meta-row {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.vendor-meta-row strong {
  color: var(--ink);
  font-weight: 600;
  display: inline-block;
  min-width: 56px;
}
.vendor-link {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: auto;
}

/* "Next step" price CTA band */
.price-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  margin: 40px 0;
  padding: 32px;
  background: var(--accent-soft);
  border: 1px solid var(--rule);
}
.price-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.price-heading {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 10px;
}
.price-note {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 520px;
}
.price-cta .btn-cta { white-space: nowrap; }


/* ============================================================
   8. RELATED READING  (research-note / plain-language / editor-note)
   ============================================================ */
.related-reading {
  margin: 48px 0 0;
  padding-top: 32px;
  border-top: 2px solid var(--ink);
}
.related-reading h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}
.related-reading ul { list-style: none; padding: 0; margin: 0; }
.related-reading li { border-bottom: 1px solid var(--rule); }
.related-reading li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.related-reading li a::after { content: "\203A"; color: var(--accent); font-size: 24px; }
.related-reading li a:hover { color: var(--accent); padding-left: 6px; transition: padding var(--t-fast), color var(--t-fast); }


/* ============================================================
   9. DISPATCH
   ============================================================ */
.dispatch-page { padding-bottom: 32px; }

.dispatch-lead {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: start;
  padding: 8px 0 var(--section-y);
  border-bottom: 1px solid var(--rule);
}
.dispatch-lead-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.dispatch-issue-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.dispatch-lead h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}
.dispatch-lead .dispatch-blurb {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 24px;
  font-weight: var(--display-weight);
}
.dispatch-archive-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--section-y) 0 8px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.dispatch-archive-heading .eyebrow { margin: 0; color: var(--ink-2); }
.dispatch-archive-heading .count { font-family: var(--mono); font-size: 11px; color: var(--ink-2); letter-spacing: 0.12em; }

/* "Also from PPL" companion resource — sits below the subscribe CTA */
.dispatch-companion {
  margin: var(--section-y) 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
}
.dispatch-companion-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.dispatch-companion p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 620px;
}
.dispatch-companion a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.dispatch-companion a:hover { color: var(--accent); }


/* ============================================================
   9b. RESEARCH-NOTE BODY  (the {{content}} of research-note.njk)
   The peptide-note markdown emits <section class="content-section">
   blocks inside .article-body, plus .research-list, a .price-cta with
   .price-range, and a .bibliography / .ref-list. Style them as one
   continuous editorial article rather than detached homepage sections.
   ============================================================ */

/* Tame the homepage-scale .content-section when it sits inside an article */
.article-body .content-section {
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.article-body .content-section:first-child { padding-top: 0; }
.article-body .content-section:last-child { border-bottom: none; }
.article-body .content-section > h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
}
.article-body .content-section > p { max-width: none; }

/* Plain prose bullet/numbered lists (unclassed <ul>/<ol>) should match the
   body paragraph color (--ink-2), not the darker inherited --ink. Classed
   lists (.research-list, .ref-list, .sources-list, etc.) keep their own. */
.article-body .content-section ul:not([class]) li,
.article-body .content-section ol:not([class]) li { color: var(--ink-2); }

/* Plain (unclassed) prose tables should match the body paragraph color
   (--ink-2), not the darker inherited --ink. Classed tables (.params-table,
   .price-table, etc.) keep their own styling. */
.article-body table:not([class]) th,
.article-body table:not([class]) td { color: var(--ink-2); }

/* Research areas list — term + explanation per row. Top margin/padding are
   zeroed so the first term aligns with the top of the body column, matching
   the first paragraph of every other section. */
.research-list,
.article-body ul.research-list { list-style: none; padding-left: 0; margin: 0; }
.research-list li,
.article-body .research-list li {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  margin-bottom: 0;
}
.research-list li:first-child,
.article-body .research-list li:first-child { padding-top: 0; }

/* When .related-links is the body of a sectioned column ("Related research
   notes"), drop its standalone top margin so its top rule aligns with the
   section heading — matching every other section. Elsewhere (blog/news/notes
   prose) the 28px margin still applies. */
.research-note .article-body .content-section > .related-links,
.sectioned-article .article-body .content-section > .related-links { margin-top: 0; }
.research-list strong {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.research-list span {
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* Big per-mg price figure inside the price CTA */
.price-range {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-weight: var(--display-weight);
  margin: 6px 0 10px;
}

/* Bibliography / references */
.bibliography { margin: 36px 0 0; padding-top: 32px; border-top: 2px solid var(--ink); }
.bibliography h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}
.ref-list { list-style: none; padding: 0; margin: 0; }
.ref-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.ref-num { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; }
.ref-text em { font-style: italic; color: var(--ink); }
.ref-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Citation superscripts inside body prose (also defined in content.css;
   harmless re-assertion to guarantee styling) */
.article-body a.cite {
  font-family: var(--mono);
  font-size: 0.7em;
  font-weight: 600;
  color: var(--accent);
  vertical-align: super;
  text-decoration: none;
  margin-left: 1px;
}

/* Research-note column + vertical rhythm fix.
   Without these, the homepage .content-section rule (72px padding) leaves a
   huge gap above the first section ("What it is") and the stats-bar/body
   margins stack. Widen the reading column and close the gap. */
/* Research-note — wide editorial layout: a left-rail heading beside a body
   column, matching the canvas peptide page so the article integrates with the
   rest of the site instead of floating as a narrow centered column.
   CSS-only — the markdown keeps its <section class="content-section"><h2>… */
.research-note .article-body { max-width: none; padding: 0 0 56px; counter-reset: ppl-sec; }
.research-note .stats-bar { margin: 28px 0 0; }

/* Each section: a sans-serif §-numbered marker in the left rail + body column,
   exactly like the canvas SectionMark. */
.research-note .article-body .content-section {
  display: grid;
  grid-template-columns: 200px minmax(0, 680px);
  column-gap: 56px;
  row-gap: 0;
  padding: 52px 0;
  align-items: start;
  border: none;
  counter-increment: ppl-sec;
}
.research-note .article-body .content-section > h2 {
  grid-column: 1;
  grid-row: 1 / 99;
  position: sticky;
  top: 88px;
  align-self: start;
  margin: 0;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.research-note .article-body .content-section > h2::before {
  content: "\00a7 " counter(ppl-sec, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}
.research-note .article-body .content-section > :not(h2) { grid-column: 2; }

/* Intro section — serif lead with a stylized drop cap, on a lighter panel */
.research-note .article-body .content-section:first-child {
  background: var(--paper);
  margin: 0 calc(var(--pad-h) * -1);
  padding: 48px var(--pad-h);
}
.research-note .article-body .content-section:first-child > p {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
}
.research-note .article-body .content-section:first-child > p:first-of-type::first-letter {
  font-family: var(--display);
  font-style: italic;
  font-size: 86px;
  line-height: 0.78;
  float: left;
  padding: 8px 14px 0 0;
  color: var(--accent);
}

/* Non-section blocks (price band, disclaimer, references) align to
   the body column so they read as part of the article, not detached banners */
.research-note .article-body > .price-cta,
.research-note .article-body > .disclaimer,
.research-note .article-body > .bibliography {
  margin-left: 256px;
  max-width: 680px;
}

/* FDA-approved pharmaceutical versions card (semaglutide / tirzepatide).
   Spans the full hero/tags width so it reads as part of the page masthead
   (title + tags + lede) rather than the indented article body below it.
   A contained editorial panel: oxblood-topped paper card, a sans label, and
   brand rows styled like the .research-list term + explanation pattern. */
.approval-callout {
  margin: 4px 0 8px;
  padding: 24px 28px 26px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
}
.approval-callout-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.approval-list { list-style: none; margin: 0; padding: 0; }
.approval-list li {
  display: grid;
  gap: 3px;
  padding: 16px 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.approval-list li:last-child { padding-bottom: 0; }
.approval-list strong {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.approval-list span {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.approval-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

@container app (max-width: 760px) {
  .research-note .article-body .content-section { grid-template-columns: 1fr; gap: 8px; padding: 32px 0; }
  .research-note .article-body .content-section > h2,
  .research-note .article-body .content-section > :not(h2) { grid-column: 1; }
  .research-note .article-body .content-section > h2 { position: static; grid-row: auto; margin-bottom: 14px; }
  .research-note .article-body .content-section:first-child { margin: 0 -20px; padding: 32px 20px; }
  .research-note .article-body .content-section:first-child > p { font-size: 19px; }
  .research-note .article-body .content-section:first-child > p:first-of-type::first-letter { font-size: 64px; }
  .research-note .article-body > .price-cta,
  .research-note .article-body > .disclaimer,
  .research-note .article-body > .bibliography { margin-left: 0; max-width: none; }
  /* Pull the card out of the article-body's 20px mobile padding so it stays
     flush with the tags / hero above it. */
  .research-note .article-body > .approval-callout { margin: 4px -20px 8px; }
  .approval-callout { padding: 20px 20px 22px; }
}

/* ============================================================
   9c. SECTIONED EDITORIAL ARTICLES  (guides, editor's notes,
   plain-language posts). These bodies are authored as a flat run of
   <h2>/<p>/<ul>; the `sectionize` filter wraps each <h2> block in
   <section class="content-section"> (and any lead paragraphs in a
   ".is-intro" section) so they pick up the same left-rail §-marker
   editorial layout the peptide research-notes use. Kept separate from
   the .research-note rules above because these have no price/stats rail.
   ============================================================ */
.sectioned-article .article-body {
  max-width: none;
  margin: 0;
  padding: 16px var(--pad-h) 72px;
  counter-reset: ppl-sec;
}

/* Each H2 section: a sans-serif §-numbered marker in a sticky left rail,
   prose in the body column. */
.sectioned-article .article-body .content-section {
  display: grid;
  grid-template-columns: 200px minmax(0, 680px);
  column-gap: 56px;
  row-gap: 0;
  padding: 48px 0;
  align-items: start;
  border: none;
  border-top: 1px solid var(--rule);
  counter-increment: ppl-sec;
}
.sectioned-article .article-body .content-section:first-child { border-top: none; }
.sectioned-article .article-body .content-section > h2 {
  grid-column: 1;
  grid-row: 1 / 99;
  position: sticky;
  top: 88px;
  align-self: start;
  margin: 0;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.sectioned-article .article-body .content-section > h2::before {
  content: "\00a7 " counter(ppl-sec, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}
.sectioned-article .article-body .content-section > :not(h2) { grid-column: 2; }
.sectioned-article .article-body .content-section > :not(h2):first-of-type { margin-top: 0; }

/* Intro — the lead paragraphs before the first H2: a full-width serif
   standfirst with a stylized drop cap. Not numbered. */
.sectioned-article .article-body .content-section.is-intro {
  display: block;
  counter-increment: none;
  border-top: none;
  padding: 8px 0 12px;
}
.sectioned-article .article-body .content-section.is-intro > * { grid-column: auto; }
.sectioned-article .article-body .content-section.is-intro > p {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 760px;
}
.sectioned-article .article-body .content-section.is-intro > p:first-of-type::first-letter {
  font-family: var(--display);
  font-style: italic;
  font-size: 86px;
  line-height: 0.78;
  float: left;
  padding: 8px 14px 0 0;
  color: var(--accent);
}

@container app (max-width: 760px) {
  .sectioned-article .article-body { padding: 8px var(--pad-h) 56px; }
  .sectioned-article .article-body .content-section {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 32px 0;
  }
  .sectioned-article .article-body .content-section > h2,
  .sectioned-article .article-body .content-section > :not(h2) { grid-column: 1; }
  .sectioned-article .article-body .content-section > h2 {
    position: static;
    grid-row: auto;
    margin-bottom: 14px;
  }
  .sectioned-article .article-body .content-section.is-intro > p { font-size: 19px; }
  .sectioned-article .article-body .content-section.is-intro > p:first-of-type::first-letter { font-size: 64px; }
}

/* ============================================================
   11b. RESEARCH-NOTE HERO + PER-MG PRICE CARD + QUICK REFERENCE
   ============================================================ */
.research-note .breadcrumb { padding-left: 0; padding-right: 0; }
.rn-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: end;
  padding: 36px 0 28px;
}
.rn-hero-main .eyebrow { margin-bottom: 14px; }
.rn-title {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(56px, 8vw, 116px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
}
.rn-lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: var(--display-weight);
  margin: 22px 0 0;
  max-width: 640px;
}
.rn-price-card { background: var(--accent); color: var(--paper); padding: 26px 30px; border-radius: 2px; }
.rn-price-label, .rn-price-sub {
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85;
}
.rn-price-label { font-size: 10px; margin-bottom: 12px; }
.rn-price-median {
  font-family: var(--display); font-style: italic; font-size: 76px; line-height: 0.9;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.rn-price-sub { font-size: 10.5px; }
.rn-price-range {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.25);
}
.rn-price-range span {
  display: block; font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7;
}
.rn-price-range b { font-family: var(--mono); font-size: 19px; font-weight: 400; }
.rn-price-cta {
  display: inline-block; margin-top: 20px; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 2px;
}
.rn-price-cta:hover { color: var(--paper); border-color: var(--paper); }

.rn-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 22px; border-bottom: 1px solid var(--rule); }
.rn-tag {
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--rule);
  border-radius: 999px; color: var(--ink-2);
}
.rn-tag:hover { border-color: var(--accent); color: var(--accent); }
.rn-tag.is-fda { background: var(--positive); color: var(--paper); border-color: var(--positive); }

.rn-quickref { display: grid; grid-template-columns: 200px minmax(0, 680px); column-gap: 56px; padding: 52px 0; }
.rn-quickref-mark {
  grid-column: 1; padding-top: 16px; border-top: 2px solid var(--ink);
  font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink); align-self: start;
}
.rn-quickref-num { color: var(--accent); }
.rn-quickref-grid { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); }
.rn-fact { padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.rn-fact:nth-child(odd) { border-right: 1px solid var(--rule); }
.rn-fact-label { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.rn-fact-value { font-family: var(--display); font-size: 22px; letter-spacing: -0.01em; color: var(--ink); }
.rn-fact-note { font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-top: 4px; }

@container app (max-width: 760px) {
  .rn-hero { grid-template-columns: 1fr; gap: 28px; padding: 24px 0; }
  .rn-title { font-size: clamp(44px, 13vw, 64px); }
  .rn-price-median { font-size: 60px; }
  .rn-quickref { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
  .rn-quickref-grid { grid-template-columns: 1fr; }
  .rn-fact:nth-child(odd) { border-right: none; }
}

/* ============================================================
   12. TAG PAGES
   /tags/ (category index) and /tags/<slug>/ (per-category list).
   Without these the card name renders identically to the body text.
   ============================================================ */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border-top: 2px solid var(--ink);
  margin: 28px 0;
}
@container app (min-width: 761px) {
  .tag-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}
.tag-card,
.tag-note-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 24px 0;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  transition: padding-left var(--t-fast);
}
.tag-card:hover,
.tag-note-card:hover { background: transparent; padding-left: 8px; }

.tag-card-name,
.tag-note-card-name {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color var(--t-fast);
}
.tag-card:hover .tag-card-name,
.tag-note-card:hover .tag-note-card-name { color: var(--accent); }

.tag-card-desc,
.tag-note-card-desc {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 680px;
}
.tag-card-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tag-note-card-arrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.tag-note-list { display: grid; gap: 0; border-top: 2px solid var(--ink); margin: 20px 0 0; }
.back-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin: 8px 0 24px;
}
.back-link:hover { color: var(--accent); }

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@container app (max-width: 760px) {
  .home-hero { padding: 48px 0 40px; }
  .article-body .content-section > h2 { font-size: 26px !important; }
  .home-hero h1 { font-size: clamp(38px, 11vw, 56px) !important; }
  .home-hero .lede { font-size: 18px !important; }

  .content-section { padding: 40px 0; }

  .steps-grid { grid-template-columns: 1fr; border-top: 2px solid var(--ink); }
  .step-card,
  .step-card:not(:first-child) {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 22px 0;
  }
  .step-card:last-child { border-bottom: none; }

  .peptide-cards { grid-template-columns: 1fr 1fr; }

  .article-card-with-image { grid-template-columns: 1fr; gap: 16px; }
  .article-card-image { aspect-ratio: 16 / 9; }

  .peptide-row { grid-template-columns: 1fr; gap: 4px; }
  .timeline-item { grid-template-columns: 1fr; gap: 4px; }

  .vendor-grid { grid-template-columns: 1fr; }

  .price-cta { grid-template-columns: 1fr; gap: 20px; padding: 24px; }

  .dispatch-lead { grid-template-columns: 1fr; gap: 36px; }

  .related-reading li a { font-size: 19px; gap: 12px; }
}

/* ============================================================
   11. MASTHEAD LOGO — the bead monogram (P·P·L)
   Overrides the placeholder .logo-mark in content.css. Renders the
   monogram inline so it uses the real Instrument Serif + bead dots,
   matching the app icon / favicon. No image dependency.
   ============================================================ */
.site-header .logo { gap: 14px; }
.site-header .logo img { display: none; } /* retire the old logo image if present */

.site-header .logo-mark {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-style: normal;
  font-weight: var(--display-weight);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.site-header .logo-mark .bead {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  display: inline-block;
  margin: 0 5px;
  font-style: normal;
}
.site-header .logo-mark .bead--accent { background: var(--accent); }

.site-header .logo-word {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-left: 14px;
  border-left: 1px solid var(--rule);
  white-space: nowrap;
}

@container app (max-width: 760px) {
  .site-header .logo-word { font-size: 18px; padding-left: 11px; }
  .site-header .logo-mark { font-size: 26px; }
}

/* ============================================================
   13. HOMEPAGE (editorial) — hp-* classes, matches the canvas home
   ============================================================ */
.hp-hero { display: grid; grid-template-columns: 2.3fr 1fr; gap: 48px; align-items: end; padding: 56px 0 44px; border-bottom: 1px solid var(--rule); }
.hp-hero-title { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(56px, 8vw, 104px); line-height: 0.95; letter-spacing: -0.025em; color: var(--ink); margin: 18px 0 0; }
.hp-hero-title .italic, .hp-section-title .italic, .hp-dispatch-title .italic { font-style: italic; color: var(--accent); }
.hp-hero-lede { font-family: var(--display); font-style: italic; font-size: clamp(19px, 2vw, 22px); line-height: 1.45; color: var(--ink-2); max-width: 620px; margin: 28px 0 32px; font-weight: var(--display-weight); }
.hp-hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hp-hero-cta .btn-cta { font-size: 13px; padding: 15px 26px; }
.hp-hero-link { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Hero receipt card */
.hp-receipt { background: var(--paper); border: 1px solid var(--rule); padding: 22px; font-family: var(--mono); font-size: 11px; color: var(--ink); line-height: 1.7; transform: rotate(1.2deg); box-shadow: 0 16px 30px -20px rgba(60,30,10,0.25); }
.hp-receipt-head { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; border-bottom: 1px dashed var(--rule); padding-bottom: 10px; margin-bottom: 12px; color: var(--ink-2); }
.hp-receipt-row { display: flex; justify-content: space-between; gap: 12px; }
.hp-receipt-rule { border-top: 1px dashed var(--rule); margin: 10px 0 6px; }
.hp-receipt-best { font-weight: 700; color: var(--accent); text-transform: uppercase; }
.hp-receipt-note { font-family: var(--sans); font-size: 10px; color: var(--ink-2); margin-top: 8px; font-style: italic; }

/* Trust bar */
.hp-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.hp-trust-item { display: flex; align-items: baseline; gap: 14px; }
.hp-trust-item + .hp-trust-item { border-left: 1px solid var(--rule); padding-left: 24px; }
.hp-trust-n { font-family: var(--display); font-weight: var(--display-weight); font-size: 46px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.hp-trust-l { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }

/* Section scaffold (Index / Editor / Sources) */
.hp-section { padding: var(--section-y) 0; border-bottom: 1px solid var(--rule); }
.hp-section--paper { background: var(--paper); margin: 0 calc(var(--pad-h) * -1); padding-left: var(--pad-h); padding-right: var(--pad-h); }
.hp-section-head { display: grid; grid-template-columns: 1fr 2.6fr; gap: 48px; margin-bottom: 32px; align-items: start; }
.hp-mark { padding-top: 14px; border-top: 2px solid var(--ink); font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); }
.hp-mark-num { display: block; color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; margin-bottom: 10px; }
.hp-section-title { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(40px, 5vw, 60px); line-height: 0.95; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 16px; }
.hp-section-dek { font-family: var(--display); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 560px; font-weight: var(--display-weight); margin: 0; }

/* Index table */
.hp-index { border-top: 2px solid var(--ink); }
.hp-index-head { display: grid; grid-template-columns: 48px 1.4fr 2fr 1.6fr; padding: 12px 0; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.hp-index-row { display: grid; grid-template-columns: 48px 1.4fr 2fr 1.6fr; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; color: var(--ink); transition: padding-left var(--t-fast); }
.hp-index-row:hover { padding-left: 8px; }
.hp-index-num { font-family: var(--display); font-style: italic; font-size: 22px; color: var(--accent); font-weight: var(--display-weight); }
.hp-index-name { font-family: var(--display); font-size: 26px; letter-spacing: -0.01em; font-weight: var(--display-weight); }
.hp-index-cat { font-family: var(--sans); font-size: 13px; color: var(--ink-2); }
.hp-index-price { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.hp-index-price b { color: var(--accent); font-weight: 700; }
.hp-index-price i { color: var(--ink-2); font-style: normal; }
.hp-more { display: inline-block; margin-top: 24px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Editorial note */
.hp-editorial { max-width: 780px; column-count: 2; column-gap: 36px; column-rule: 1px solid var(--rule); }
.hp-editorial-lead { font-family: var(--display); font-size: 22px; line-height: 1.45; color: var(--ink); margin: 0 0 18px; break-inside: avoid; font-weight: var(--display-weight); }
.hp-editorial p:not(.hp-editorial-lead) { font-family: var(--sans); font-size: 14px; line-height: 1.8; color: var(--ink-2); margin: 0 0 14px; }
.hp-dropcap { font-family: var(--display); font-size: 78px; line-height: 0.85; float: left; padding: 6px 10px 0 0; color: var(--accent); font-style: italic; }

/* Sources teaser */
.hp-sources { border-top: 2px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.hp-source-row { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.hp-source-row:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 24px; }
.hp-source-row:nth-child(even) { padding-left: 24px; }
.hp-source-name { font-family: var(--display); font-size: 22px; letter-spacing: -0.01em; font-weight: var(--display-weight); }
.hp-source-go { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--accent); }

/* Dispatch band */
.hp-dispatch { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; padding: var(--section-y) var(--pad-h); margin: 0 calc(var(--pad-h) * -1); background: var(--accent-soft); }
.hp-dispatch-title { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(40px, 5vw, 60px); line-height: 0.95; letter-spacing: -0.02em; color: var(--ink); margin: 8px 0 18px; }
.hp-dispatch-dek { font-family: var(--display); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 520px; margin: 0 0 20px; font-weight: var(--display-weight); }
.hp-dispatch-issues { display: grid; gap: 0; }
.hp-dispatch-issue { display: grid; grid-template-columns: 80px 1fr; gap: 18px; padding: 12px 0; border-top: 1px solid var(--rule); color: var(--ink); }
.hp-dispatch-num { font-family: var(--mono); font-size: 11px; color: var(--ink-2); line-height: 1.5; }
.hp-dispatch-headline { font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.35; font-weight: var(--display-weight); }
.hp-dispatch .subscribe-form { max-width: none; }

@container app (max-width: 760px) {
  .hp-hero { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
  .hp-receipt { transform: none; }
  .hp-trust { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hp-trust-item:nth-child(odd) { border-left: none; padding-left: 0; }
  .hp-section-head { grid-template-columns: 1fr; gap: 16px; }
  .hp-index-head { display: none; }
  .hp-index-row { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .hp-editorial { column-count: 1; }
  .hp-sources { grid-template-columns: 1fr; }
  .hp-source-row:nth-child(odd) { border-right: none; padding-right: 0; }
  .hp-source-row:nth-child(even) { padding-left: 0; }
  .hp-dispatch { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px; margin: 0 -20px; }
  .hp-section--paper { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   SITE SEARCH — triggers (header/drawer/footer) + Pagefind overlay
   ============================================================ */

/* Desktop trigger in the masthead nav */
.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.nav-search:hover { border-color: var(--ink-2); color: var(--ink); }
.nav-search-icon { flex: none; }

/* Mobile drawer trigger */
.drawer-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

/* Footer trigger — styled like the footer link list */
.footer-search {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.footer-search:hover { text-decoration: underline; }

/* Overlay + modal */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: oklch(0.20 0.015 50 / 0.55);
  backdrop-filter: blur(3px);
  padding: 8vh 16px 16px;
}
.search-overlay.is-open { display: block; }
body.search-open { overflow: hidden; }

.search-modal {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 24px 60px oklch(0.20 0.015 50 / 0.30);
  padding: 28px 24px 24px;
  max-height: 84vh;
  overflow-y: auto;
}
.search-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
}
.search-close:hover { color: var(--ink); }
.search-error { font-family: var(--sans); color: var(--ink-2); padding: 12px 0; }

/* Hidden metadata carrier — read by Pagefind at index time, never shown */
.pf-meta { display: none; }

/* Pagefind UI — themed to the site palette */
.search-ui {
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--paper);
  --pagefind-ui-border: var(--rule);
  --pagefind-ui-tag: var(--paper-2);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-font: var(--sans);
}

@media (max-width: 760px) {
  .nav-search-label { display: none; }
  .nav-search { padding: 6px; }
}

/* ── Share buttons ───────────────────────────────────────────────
   Foot-of-article share row. Native Share button (Web Share API) is
   revealed by /js/share.js only when the API exists. */
.share-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 40px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
}
.share-label {
  font-family: var(--sans); /* was --mono — only place it appeared; match the body/buttons font */
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.share-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.share-btn:hover { color: var(--accent); border-color: var(--accent); }
.share-btn svg { width: 15px; height: 15px; }
.share-btn.is-copied { color: var(--positive); border-color: var(--positive); }


/* ============================================================
   10. TOOL LANDING PAGE  (/tool/)
   ============================================================ */

.tool-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* Hero — headline + subhead */
.tool-hero {
  padding: 56px 0 48px;
  border-bottom: 2px solid var(--ink);
}
.tool-headline {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 680px;
}
.tool-subhead {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  max-width: 620px;
}

/* Three-feature block */
.tool-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin: 48px 0;
}
.tool-feature {
  padding: 32px 28px 32px 0;
  border-right: 1px solid var(--rule);
}
.tool-feature:last-child {
  border-right: none;
  padding-right: 0;
  padding-left: 28px;
}
.tool-feature:not(:first-child):not(:last-child) {
  padding-left: 28px;
}
.tool-feature-name {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.tool-feature-desc {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

/* CTA block */
.tool-cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.tool-trust {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}

/* Responsive */
@media (max-width: 620px) {
  .tool-features {
    grid-template-columns: 1fr;
    margin: 32px 0;
  }
  .tool-feature,
  .tool-feature:last-child,
  .tool-feature:not(:first-child):not(:last-child) {
    padding: 24px 0;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .tool-feature:last-child { border-bottom: none; }
  .tool-hero { padding: 36px 0 32px; }
}