/*
 * J.P. Hemp Company — article.css
 * Research article component stylesheet
 * Design System v3.12 · Charter v3.22 · Updated August 2026
 *
 * August 2026 updates:
 *   — --rule-text applied to all readable metadata text
 *   — Additions v2.0 merged at end of file
 *
 * Covers: all article-specific components — lede, study panels,
 * field notes, honest boxes, path panels, evidence tables,
 * component grids, cross-nav, references, figure placeholders,
 * monograph-specific panels, and all other article components.
 *
 * Requires: base.css (load first)
 * Link tags:
 *   <link rel="stylesheet" href="/wp-content/themes/jp-hemp-child/base.css">
 *   <link rel="stylesheet" href="/wp-content/themes/jp-hemp-child/article.css">
 */


/* ─────────────────────────────────────────────────────────────────
   PART 1 — ARTICLE HEADER VARIANTS
   ───────────────────────────────────────────────────────────────── */

/* .article-header removed August 2026 — retired pattern */

/* Evidence tag — inline badge variant */
.evidence-tag {
  display: inline-block;
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  border: 1px solid var(--rule);
  padding: 3px 9px;
  margin-bottom: 20px;
}


/* ─────────────────────────────────────────────────────────────────
   PART 2 — LEDE / OPENING / DECK
   The introductory pull-quote section at the top of each article.
   Different articles use different class names for the same pattern.
   ───────────────────────────────────────────────────────────────── */

.lede,
.opening,
.deck {
  margin: 40px 0;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.lede p,
.opening p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-light);
  margin-bottom: 0.9em;
}

.lede p:last-child,
.opening p:last-child { margin-bottom: 0; }

.deck {
  font-size: 21px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-light);
  line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────────
   PART 3 — ARTICLE BODY
   ───────────────────────────────────────────────────────────────── */

.article-body p {
  font-size: 19.5px;
  margin-bottom: 1.6em;
  line-height: 1.78;
}

.article-body h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 500;
  color: var(--charcoal);
  margin: 48px 0 20px;
  padding-top: 32px;
  border-top: 1px solid var(--parchment-dark);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.article-body h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-light);
  margin: 36px 0 12px;
}

.article-body a {
  color: var(--olive);
  text-decoration: none;
  border-bottom: 1px solid var(--olive-light);
  transition: color 150ms ease, border-color 150ms ease;
}

.article-body a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
/* ─────────────────────────────────────────────────────────────────
   BOLD TEXT — explicit overrides
   Divi/theme may set font-weight globally lower than browser default.
   These rules restore bold rendering in article body and all boxes.
   ───────────────────────────────────────────────────────────────── */

.article-body strong,
.article-body b,
.honest-box strong,
.honest-box b,
.experience-note strong,
.experience-note b,
.field-note strong,
.field-note b,
.study-panel-body strong,
.study-panel-body b,
.study-block strong,
.study-block b,
.grapefruit-note strong,
.grapefruit-note b,
.evidence-note strong,
.evidence-note b,
.warning-note strong,
.warning-note b,
.clinical-note strong,
.clinical-note b,
.research-note strong,
.research-note b,
.proc-note strong,
.proc-note b,
.history-box strong,
.history-box b,
.tradition-note strong,
.tradition-note b {
  font-weight: 700 !important;
  font-size: inherit !important;
  color: var(--charcoal) !important;
}




/* ─────────────────────────────────────────────────────────────────
   PART 4 — STUDY PANEL
   Standard research study presentation block.
   ───────────────────────────────────────────────────────────────── */

.study-panel {
  margin: 36px 0;
  border: 1px solid var(--rule);
  overflow: hidden;
}

.study-panel-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--charcoal);
  padding: 10px 18px;
}

.study-panel-body {
  padding: 20px 22px;
  background: var(--parchment-mid);
}

.study-panel-body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-light);
  margin-bottom: 0.9em;
}

.study-panel-body p:last-child { margin-bottom: 0; }

.study-detail {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rule);
}

/* Older study-block pattern — same visual purpose */
.study-block {
  background: var(--parchment-mid);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 28px;
  margin: 36px 0;
}

.study-block .study-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 12px;
}

.study-block p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-light);
  margin-bottom: 0.75em;
}

.study-block p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────────────
   PART 5 — FIELD NOTE
   Italic callout for caveats, limitations, or important context.
   ───────────────────────────────────────────────────────────────── */

.field-note {
  margin: 36px 0;
  padding: 20px 22px 20px 26px;
  background: var(--parchment-dark);
  border-left: 3px solid var(--rule);
}

.field-note-label,
.field-note .note-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}

.field-note p {
  font-size: 17px;
  font-style: italic;
  color: var(--ink-light);
  line-height: 1.65;
  margin-bottom: 0.8em;
}

.field-note p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────────────
   PART 6 — HONEST BOX
   Balanced assessment box — what is and isn't established.
   ───────────────────────────────────────────────────────────────── */

.honest-box {
  margin: 36px 0;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  background: var(--parchment-dark);
}

.honest-box-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 12px;
  display: block;
}

.honest-box p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-light);
  margin-bottom: 0.8em;
}

.honest-box p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────────────
   PART 7 — EVIDENCE NOTE
   Inline evidence grade callout.
   ───────────────────────────────────────────────────────────────── */

.evidence-note {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--parchment-mid);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.evidence-note .note-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 10px;
  display: block;
}

.evidence-note p {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-light);
  margin-bottom: 0.6em;
}

.evidence-note p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────────────
   PART 8 — WARNING NOTE / PROC NOTE
   Serious condition or safety upfront notice.
   ───────────────────────────────────────────────────────────────── */

.warning-note {
  margin: 32px 0;
  padding: 22px 26px;
  background: var(--parchment-amber, #f7ede0);
  border-left: 3px solid var(--accent);
}

.warning-note .note-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}

.warning-note p {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-light);
  margin-bottom: 0.5em;
}

.warning-note p:last-child { margin-bottom: 0; }

/* Proc note — preclinical context note */
.proc-note {
  margin: 0 0 40px;
  padding: 20px 22px 20px 26px;
  background: var(--parchment-dark);
  border-left: 3px solid var(--olive-light);
}

.proc-note-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 10px;
  display: block;
}

.proc-note p {
  font-size: 17px;
  color: var(--ink-light);
  line-height: 1.65;
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────────
   PART 9 — WOMEN'S HEALTH NOTE
   Pillar-specific callout panel.
   ───────────────────────────────────────────────────────────────── */

.women-note {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--parchment-lavender, #f0eaf4);
  border-left: 3px solid var(--women-light, #8a6890);
}

.women-note .note-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--women, #5c4060);
  margin-bottom: 10px;
  display: block;
}

.women-note p {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-light);
  font-style: italic;
  margin-bottom: 0.6em;
}

.women-note p:last-child { margin-bottom: 0; }

/* PPL research watch note */
.ppl-note {
  margin: 32px 0;
  padding: 20px 22px 20px 26px;
  background: var(--parchment-dark);
  border-left: 3px solid var(--charcoal);
}

.ppl-note-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 10px;
  display: block;
}


/* ─────────────────────────────────────────────────────────────────
   PART 10 — PATH PANEL
   Two-column key/value grid for mechanism or pathway display.
   ───────────────────────────────────────────────────────────────── */

.path-panel {
  margin: 36px 0;
  border: 1px solid var(--rule);
  overflow: hidden;
}

.path-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--charcoal);
  padding: 10px 18px;
}

.path-grid {
  display: grid;
  grid-template-columns: 195px 1fr;
}

.path-cell {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-light);
}

.path-cell:nth-last-child(-n+2) { border-bottom: none; }

.path-cell:nth-child(odd) {
  background: var(--parchment-dark);
  border-right: 1px solid var(--rule);
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.4;
}

.path-cell.header {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rule);
  padding: 8px 16px;
  background: var(--parchment-mid);
  font-weight: 400;
}

.path-cell.header:nth-child(odd) { background: var(--parchment-dark); }


/* ─────────────────────────────────────────────────────────────────
   PART 11 — COMPONENT PANELS (grids of related cells)
   ───────────────────────────────────────────────────────────────── */

/* Generic component panel — 3 columns */
.component-panel {
  margin: 32px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.component-cell {
  background: var(--parchment-mid);
  padding: 20px 18px;
}

/* Mechanism grid — 2 columns */
.mechanism-grid {
  margin: 24px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.mechanism-cell {
  background: var(--parchment-mid);
  padding: 18px 16px;
}

/* Identity panel — 3 columns (monographs) */
.identity-panel {
  margin: 40px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.identity-cell {
  background: var(--parchment-mid);
  padding: 16px;
}

/* Shared cell label/name/desc patterns */
.component-cell .cell-label,
.mechanism-cell .cell-label,
.identity-cell .id-label,
.enzyme-cell .cell-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 6px;
  display: block;
}

.component-cell .cell-name,
.mechanism-cell .cell-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 6px;
  line-height: 1.3;
  display: block;
}

.identity-cell .id-value {
  font-size: 16px;
  color: var(--charcoal);
  font-weight: 400;
  line-height: 1.4;
  display: block;
}

.component-cell .cell-desc,
.mechanism-cell .cell-desc {
  font-size: 15.5px;
  color: var(--ink-light);
  font-style: italic;
  line-height: 1.5;
  display: block;
}


/* ─────────────────────────────────────────────────────────────────
   PART 12 — EVIDENCE TABLE
   ───────────────────────────────────────────────────────────────── */

.evidence-table {
  margin: 24px 0;
  border: 1px solid var(--rule);
  background: var(--rule);
  display: grid;
  gap: 1px;
}

.evidence-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 1px;
  background: var(--rule);
}

.evidence-cell {
  background: var(--parchment);
  padding: 11px 14px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-light);
}

.evidence-row.header .evidence-cell {
  background: var(--charcoal);
  color: var(--parchment);
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.evidence-cell.domain {
  font-family: 'Playfair Display', serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--charcoal);
  background: var(--parchment-dark);
}

/* Evidence tier markers */
.tier-marker {
  display: inline-block;
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  border: 1px solid var(--olive-light);
  padding: 3px 10px;
  margin-bottom: 14px;
}

.tier-t1, .tier-marker.tier1 { color: var(--cbg-green); border-color: var(--cbg-green); font-weight: 500; }
.tier-t2 { color: var(--accent); }
.tier-t3 { color: var(--rule); font-style: italic; }


/* ─────────────────────────────────────────────────────────────────
   PART 13 — MONOGRAPH-SPECIFIC PANELS
   ───────────────────────────────────────────────────────────────── */

/* Section structure for monographs */
.section-divider {
  border: none;
  border-top: 2px solid var(--ink);
  margin: 48px 0 28px;
}

.section-num {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rule-text);
  margin-bottom: 8px;
  display: block;
}

/* Open questions grid */
.questions-grid {
  margin: 24px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.question-cell {
  background: var(--parchment-dark);
  padding: 16px;
  font-size: 16px;
  color: var(--ink-light);
  font-style: italic;
  line-height: 1.5;
}

/* Enzyme comparison panel */
.enzyme-panel {
  margin: 32px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.enzyme-cell {
  background: var(--parchment-mid);
  padding: 24px 20px;
}

.enzyme-cell .cell-name {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
  display: block;
}

.enzyme-cell .cell-full {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--rule);
  margin-bottom: 14px;
  display: block;
}

.enzyme-cell .cell-substrate {
  font-size: 15.5px;
  color: var(--ink-light);
  font-style: italic;
  line-height: 1.55;
  padding-top: 12px;
  border-top: 1px solid var(--parchment-dark);
  display: block;
}

/* Tone/ECS tone illustration panel */
.tone-panel {
  margin: 32px 0;
  border: 1px solid var(--rule);
  background: var(--parchment-dark);
  padding: 24px 26px;
}

.tone-panel .panel-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 16px;
  display: block;
}

.tone-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.tone-row:last-child { margin-bottom: 0; }

.tone-condition {
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-light);
  line-height: 1.4;
}

.tone-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tone-bar {
  height: 20px;
  border-radius: 2px;
  min-width: 4px;
}

.tone-bar.high   { background: var(--olive); width: 82%; }
.tone-bar.normal { background: var(--accent); opacity: 0.7; width: 52%; }
.tone-bar.low    { background: var(--rule); width: 24%; }

.tone-note {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--olive);
  white-space: nowrap;
}

/* Gene marker panel (Huntington's, neurological articles) */
.gene-panel {
  margin: 36px 0;
  border: 1px solid var(--rule);
  overflow: hidden;
}

.gene-panel-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--charcoal);
  padding: 10px 18px;
}

.gene-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
}

.gene-cell {
  padding: 13px 17px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-light);
}

.gene-cell:last-child,
.gene-cell:nth-last-child(2) { border-bottom: none; }

.gene-cell:nth-child(odd) {
  background: var(--parchment-dark);
  border-right: 1px solid var(--rule);
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 400;
  color: var(--charcoal);
}

.gene-cell.header {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rule);
  padding: 9px 17px;
  background: var(--parchment-mid);
  font-weight: 400;
}

.gene-cell.header:nth-child(odd) { background: var(--parchment-dark); }


/* ─────────────────────────────────────────────────────────────────
   PART 14 — FIGURE PLACEHOLDER
   Holds space for illustrations pending delivery.
   ───────────────────────────────────────────────────────────────── */

.figure-placeholder {
  margin: 36px 0;
  border: 1px dashed var(--rule);
  padding: 28px 24px;
  background: var(--parchment-warm, #f0e8d8);
}

.figure-placeholder-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rule);
  display: block;
  margin-bottom: 8px;
}

.figure-placeholder-desc {
  font-family: 'Crimson Pro', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-light);
  display: block;
  margin-bottom: 8px;
}

.figure-placeholder-file {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--olive);
  display: block;
}


/* ─────────────────────────────────────────────────────────────────
   PART 15 — CLOSING SECTION
   ───────────────────────────────────────────────────────────────── */

.closing {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.closing p {
  font-size: 19.5px;
  line-height: 1.78;
  margin-bottom: 1.5em;
  color: var(--ink-light);
}

.closing p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────────────
   PART 16 — REFERENCES
   ───────────────────────────────────────────────────────────────── */

.references {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}

.references-label,
.references .ref-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rule-text);
  margin-bottom: 20px;
  display: block;
}

.references ol {
  list-style: decimal;
  padding-left: 20px;
}

.references li,
.references ol li {
  font-family: 'Crimson Pro', serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-light);
  margin-bottom: 10px;
}


/* ─────────────────────────────────────────────────────────────────
   PART 17 — CROSS-NAVIGATION
   ───────────────────────────────────────────────────────────────── */

.cross-nav {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: block;
  overflow: hidden;
}

.cross-nav-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rule-text);
  margin-bottom: 20px;
  display: block;
}

.cross-nav-group { margin-bottom: 24px; }

.cross-nav-group-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rule-text);
  margin-bottom: 10px;
  display: block;
}

.cross-nav a {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: var(--olive);
  text-decoration: none;
  margin-bottom: 4px;
}

.cross-nav a:hover { text-decoration: underline; }

.cross-nav-context {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rule);
  margin-bottom: 14px;
  display: block;
}

/* Legacy cross-link pattern */
.cross-links { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); display: block; overflow: hidden; }
.cross-links-label { font-family: 'Courier Prime', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rule-text); margin-bottom: 20px; display: block; }
.cross-link-group { margin-bottom: 24px; }
.cross-link-group-title { font-family: 'Courier Prime', monospace; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rule-text); margin-bottom: 10px; display: block; }
.cross-link-item { margin-bottom: 12px; }
.cross-link-title { display: block; font-family: 'Playfair Display', serif; font-size: 17px; color: var(--olive); text-decoration: none; margin-bottom: 2px; }
.cross-link-title:hover { text-decoration: underline; }
.cross-link-tag { font-family: 'Courier Prime', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rule); display: block; }


/* ─────────────────────────────────────────────────────────────────
   PART 18 — ARTICLE NAV (older pattern)
   ───────────────────────────────────────────────────────────────── */

.article-nav {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--parchment-dark);
}

.article-nav .nav-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rule-text);
  margin-bottom: 16px;
  display: block;
}

.article-nav ul { list-style: none; padding: 0; }

.article-nav ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--parchment-dark);
}

.article-nav ul li:last-child { border-bottom: none; }

.article-nav ul li a {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: var(--olive);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
  display: block;
}

.article-nav ul li a:hover { border-color: var(--olive-light); }

.article-nav ul li .link-context {
  display: block;
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rule);
  margin-top: 3px;
}


/* ─────────────────────────────────────────────────────────────────
   PART 19 — ARTICLE FOOTER & PAGE FOOTER
   ───────────────────────────────────────────────────────────────── */

.article-footer,
.page-footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rule-text);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────────
   PART 20 — RESPONSIVE OVERRIDES (article-specific)
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .component-panel  { grid-template-columns: 1fr; }
  .identity-panel   { grid-template-columns: 1fr 1fr; }
  .mechanism-grid   { grid-template-columns: 1fr; }
  .evidence-row     { grid-template-columns: 1fr; }
  .evidence-row.header { display: none; }
  .questions-grid   { grid-template-columns: 1fr; }
  .enzyme-panel     { grid-template-columns: 1fr; }
  .gene-grid        { grid-template-columns: 1fr; }
  .gene-cell:nth-child(odd) { border-right: none; }
  .tone-row         { grid-template-columns: 1fr; }
  .path-grid        { grid-template-columns: 1fr; }
  .path-cell:nth-child(odd) { border-right: none; border-bottom: 1px solid var(--rule); }
  .field-note,
  .warning-note,
  .women-note,
  .evidence-note    { padding: 18px; }
}


/*
 * J.P. Hemp Company — article.css ADDITIONS v2.0
 * Merged into article.css — do not apply separately.
 * August 2026 — duplicates resolved, conflicts removed
 *
 * Covers all custom classes used across the research archive
 * that are not in the base article.css stylesheet.
 * Organised by pattern family — not by article.
 * Clear Divi static CSS cache after applying.
 */


/* ─────────────────────────────────────────────────────────────────
   SITEWIDE STRUCTURAL CLASSES
   Used across 10+ articles
   ───────────────────────────────────────────────────────────────── */


.page-header {
  margin-bottom: 40px;
}

.page-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 20px;
  display: block;
}

.subtitle {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 300;
  font-style: italic;
  color: var(--olive-light);
  margin-bottom: 20px;
  line-height: 1.5;
}

.article-meta {
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rule-text);
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-bottom: 0;
}

.article-meta div {
  display: inline;
}

.evidence-tier {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  padding: 10px 14px;
  border: 1px solid var(--rule);
  margin-top: 16px;
  display: block;
  line-height: 1.6;
}

.breadcrumb {
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.breadcrumb a {
  color: var(--olive);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}

.breadcrumb a:hover { border-bottom-color: var(--olive-light); }

.breadcrumb span {
  margin: 0 4px;
  color: var(--rule-text);
}

.breadcrumb-sep {
  color: var(--rule-text);
  margin: 0 4px;
}


.fda-disclaimer {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--rule-text);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin-top: 24px;
  line-height: 1.6;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.article-figure {
  margin: 32px 0;
}

.article-figure figure {
  margin: 0;
}

.article-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.article-figure figcaption,
.figure-caption {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rule);
  margin-top: 10px;
  text-align: center;
  display: block;
}



.jp-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
  height: 24px;
}

.divider-full,
.divider-micro {
  max-width: 100%;
  height: auto;
}

/* Drop cap — first letter of opening paragraph */
.drop-cap::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 3.4em;
  font-weight: 500;
  float: left;
  line-height: 0.78;
  margin-right: 6px;
  margin-top: 6px;
  color: var(--charcoal);
}

/* Pillar navigation entries */
.pillar-map,
.pillar-map-body {
  margin: 28px 0;
  border: 1px solid var(--rule);
}

.pillar-map-label,
.pillar-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--charcoal);
  padding: 10px 16px;
  display: block;
}

.pillar-map-entry,
.pillar-entry {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}

.pillar-map-entry:last-child,
.pillar-entry:last-child {
  border-bottom: none;
}

.pillar-entry-title,
.pillar-map-title,
.pillar-map-entry-desc a {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--charcoal);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}

.pillar-entry-title:hover,
.pillar-map-title:hover { color: var(--olive); }

.pillar-entry-desc,
.pillar-map-desc,
.pillar-map-entry-desc,
.pillar-map-context {
  font-size: 15px;
  color: var(--ink-light);
  line-height: 1.55;
  margin: 0;
}

.pillar-map-tag,
.pillar-tag {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  display: inline-block;
  margin-top: 4px;
}

.pillar-map-intro {
  font-size: 15px;
  color: var(--ink-light);
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-style: italic;
}

.pillar-map-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
}

.pillar-section-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 6px;
}

.pillar-nav {
  margin: 28px 0;
  border: 1px solid var(--rule);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--ink-light);
  line-height: 1.55;
}



.pillar-nav-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--charcoal);
}

/* Cross navigation additions */
.cross-nav-link {
  display: block;
  color: var(--olive);
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}

.cross-nav-link:hover { border-bottom-color: var(--olive-light); }

.cross-nav-group-title {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
  margin-bottom: 8px;
  margin-top: 20px;
}


/* ─────────────────────────────────────────────────────────────────
   CALLOUT / PANEL BOXES
   experience-note, honest-summary, field-note, clinical-note,
   dysreg-panel, research-note, history-box, grapefruit-note,
   tradition-note, action-box, question-box, marker-box
   ───────────────────────────────────────────────────────────────── */

.experience-note,
.honest-summary,
.clinical-note,
.research-note,
.history-box,
.tradition-note,
.open-questions {
  background: var(--parchment-dark);
  border-left: 3px solid var(--olive);
  padding: 20px 22px;
  margin: 32px 0;
}

.experience-note p,
.honest-summary p,
.clinical-note p,
.research-note p,
.history-box p,
.tradition-note p,
.open-questions p {
  margin-bottom: 10px;
  font-size: 16.5px;
  line-height: 1.65;
}

.experience-note p:last-child,
.honest-summary p:last-child,
.clinical-note p:last-child,
.research-note p:last-child,
.history-box p:last-child,
.tradition-note p:last-child { margin-bottom: 0; }

.note-label,
.honest-summary-label,
.field-note-label,
.clinical-note-label,
.history-box-label,
.oq-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

/* Warning / grapefruit-style note */
.grapefruit-note,
.action-box,
.batch-note {

  background: var(--parchment-mid);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 18px 20px;
  margin: 28px 0;
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--rule);
}

.grapefruit-note-label,
.action-box-label,
.medications-list-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}

/* Question / marker boxes */
.question-box,
.marker-box {
  background: var(--parchment-dark);
  border: 1px solid var(--rule);
  padding: 20px 22px;
  margin: 28px 0;
}

.question-box-header,
.marker-box-header {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.question-body,
.marker-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--parchment-mid);
}

.question-body:last-child,
.marker-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.question-number,
.marker-name {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 4px;
}

.question-text,
.marker-detail {
  font-size: 16px;
  color: var(--ink-light);
  line-height: 1.6;
}

.signal {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
}

/* Study panel header */
.study-panel-header {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--charcoal);
  padding: 10px 16px;
  display: block;
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────────
   COMPARISON PANELS
   Two or three column side-by-side comparisons
   comparison-panel, spectrum-panel, beyond-panel,
   distinction-panel, receptor-panel, blinding-panel
   ───────────────────────────────────────────────────────────────── */

.comparison-panel,
.spectrum-panel,
.beyond-panel,
.distinction-panel,
.receptor-panel,
.blinding-panel,
.variability-panel,
.anatomy-panel {
  margin: 32px 0;
  border: 1px solid var(--rule);
  background: var(--rule);
  gap: 1px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Single-column layout panels */
.crossover-panel,
.regression-panel,
.mechanisms-panel,
.context-panel {
  margin: 32px 0;
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  background: transparent;
  gap: 0;
}

/* Override to single column for specific panels */
.crossover-panel,
.regression-panel,
.mechanisms-panel,


.comparison-cell,
.spectrum-cell,
.beyond-cell,
.distinction-cell,
.receptor-cell,
.blinding-cell,
.anatomy-cell,
.crossover-period {
  background: var(--parchment-mid);
  padding: 22px 20px;
}

.comparison-header {
  background: var(--charcoal);
  color: var(--parchment);
  padding: 10px 16px;
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  grid-column: 1 / -1;
}

/* Recovery panel — softer callout variant */
.recovery-panel {
  margin: 28px 0;
  border: 1px solid var(--rule);
  padding: 20px;
}

.recovery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}

.recovery-cell {
  background: var(--parchment-dark);
  padding: 14px 16px;
  font-size: 15.5px;
  line-height: 1.6;
}

.recovery-cell strong {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 6px;
  font-weight: 400;
}

/* Panel label — used across many panel types */
.panel-label,
.comparison-note,
.asymmetry-label,
.pathway-label,
.limits-label,
.tissue-label,
.microglia-panel-label,
.compound-panel-label,
.spectrum-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
  padding: 10px 16px;
  background: var(--parchment-mid);
  border-bottom: 1px solid var(--rule);
}

/* Period label for crossover panels */
.period-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 6px;
}

.period-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-light);
}

.crossover-flow,
.crossover-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  font-family: 'Courier Prime', monospace;
  font-size: 16px;
  color: var(--rule);
}

.crossover-caption {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rule);
  text-align: center;
  padding: 8px 16px;
  display: block;
  border-top: 1px solid var(--rule);
}


/* ─────────────────────────────────────────────────────────────────
   CIRCUIT / GRID TABLES
   circuit-panel, limits-panel, tissue-panel, drug-table,
   comparison-table, route-panel, pain-grid, microglia-grid,
   stage-grid, intersection-panel, region-panel, asymmetry-grid
   ───────────────────────────────────────────────────────────────── */

.circuit-panel,
.limits-panel,
.tissue-panel,
.drug-table,
.comparison-table,
.route-panel,
.pain-grid,
.microglia-panel,
.microglia-grid,
.stage-grid,
.intersection-panel,
.region-panel,
.chemotype-panel,
.factors-panel,
.sample-panel,
.concepts-panel,
.questions-panel,
.asymmetry-grid,
.cortisol-panel,
.cortisol-functions,
.structure-panel,
.hierarchy-panel,
.pathway-panel,
.spectrum-grid,
.compound-grid,
.compound-table,
.circuit-grid,
.pain-grid-body,
.stage-grid-body,
.region-row,
.example-panel {
  margin: 28px 0;
  border: 1px solid var(--rule);
  overflow: hidden;
}

/* Factors panel — side-by-side two-column comparison */
.factors-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.factor-cell {
  padding: 20px 22px;
  border-right: 1px solid var(--rule);
}

.factor-cell:last-child {
  border-right: none;
}

.factor-cell .cell-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 6px;
  display: block;
}

.factor-cell .cell-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 10px;
  display: block;
}

.factor-cell .cell-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-light);
  margin-bottom: 12px;
}

.factor-cell .cell-key {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
}

.factor-cell.genetics {
  background: var(--parchment-dark);
}


.circuit-label,
.drug-table-label,
.compound-table-label,
.route-panel-label,
.pain-grid-label,
.stage-grid-label,
.intersection-label,
.limits-label,
.tissue-label,
.microglia-panel-label,
.spectrum-label,
.compound-panel-label,
.circuit-grid > .cir-cell.header,
.example-header {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--charcoal);
  padding: 10px 14px;
  display: block;
}

/* Grid rows */
.circuit-row,
.hierarchy-row,
.method-row,
.profile-row,
.chemistry-row,
.pathway-row,
.sample-row,
.question-row,
.example-row,
.comparison-row,
.sequence-row,
.timeline-row,
.region-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border-top: 1px solid var(--rule);
}

/* Chemotype panel needs 3 equal-ish columns */
.chemotype-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  border-top: 1px solid var(--rule);
}
/* Chemotype panel header row */
.chemotype-row.header {
  background: var(--parchment-dark);
}

.chemotype-row.header .chem-cell {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 500;
}

/* CBG chemotype highlight */
.chem-cell.cbg-type {
  background: var(--parchment-dark);
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--charcoal);
}


.comparison-row,
.question-row {
  grid-template-columns: 1fr 1fr 1fr;
}

.sequence-row {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0;
}

.timeline-row {
  grid-template-columns: 120px 1fr;
  align-items: start;
}

/* Grid cells — generic */
.cir-cell,
.lim-cell,
.tis-cell,
.drug-cell,
.sp-cell,
.reg-cell,
.cpd-cell,
.cp-cell,
.mg-cell,
.route-cell,
.pain-cell,
.stage-cell,
.int-cell,
.chem-cell,
.chem-property,
.chem-value,
.mech-cell,
.anatomy-cell,
.region-cell,
.concept-cell,
.sample-cell,
.comparison-cell,
.compound-card,
.compound-cell,
.factor-cell,
.function-cell,
.structure-cell,
.blinding-cell,
.hier-level,
.method-abbr,
.sc-label,
.param-label,
.param-name,
.profile-cell,
.screening-cell,
.timeline-period,
.example-row > * {
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-light);
  border-right: 1px solid var(--rule);
}

.cir-cell:last-child,
.lim-cell:last-child,
.cpd-cell:last-child,
.cp-cell:last-child,
.mg-cell:last-child,
.route-cell:last-child,
.pain-cell:last-child,
.stage-cell:last-child,
.int-cell:last-child,
.chem-cell:last-child,
.mech-cell:last-child,
.region-cell:last-child,
.example-row > *:last-child {
  border-right: none;
}

/* Header cells */
.cir-cell.header,
.cp-cell.header,
.cpd-cell.header,
.route-cell.header,
.pain-cell.header,
.stage-cell.header,
.tis-cell.header,
.lim-cell.header,
.mg-cell.header,
.compound-header {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--charcoal);
}

/* Subheading/label cells */
.chem-property,
.param-label,
.param-name,
.hier-level,
.method-abbr,
.sc-label,
.timeline-period,
.profile-cell {
  background: var(--parchment-dark);
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  display: flex;
  align-items: flex-start;
}

.hier-desc,
.method-desc,
.sc-desc,
.sc-name,
.param-desc,
.profile-row > *:last-child,
.timeline-content {
  padding: 11px 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-light);
}

/* Column label in comparison tables */
.compound-header.header,
.cp-cell-title {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 4px;
}


/* ─────────────────────────────────────────────────────────────────
   CASCADE / SEQUENCE / STEP PANELS
   cascade-panel, sequence-panel, mechanism-panel,
   hpa-panel, cycle-steps, timeline
   ───────────────────────────────────────────────────────────────── */

.cascade-panel,
.sequence-panel,
.mechanism-panel,
.hpa-panel,
.mechanisms-panel,
.cycle-steps {
  margin: 28px 0;
  border: 1px solid var(--rule);
  padding: 20px;
}

.cascade-label,
.hpa-steps,
.stress-cycle {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
  margin-bottom: 16px;
}

.cascade-step,
.hpa-step,
.mechanism-step,
.cycle-step,
.seq-stage {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--parchment-mid);
}

.cascade-step:last-child,
.hpa-step:last-child,
.mechanism-step:last-child,
.cycle-step:last-child,
.seq-stage:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.cascade-num,
.hpa-step-num,
.mech-num,
.seq-num,
.step-num {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--rule);
  min-width: 28px;
  line-height: 1;
  padding-top: 2px;
  flex-shrink: 0;
}

.cascade-content,
.hpa-step-content,
.mech-content,
.seq-content,
.step-text {
  flex: 1;
}

.cascade-content-title,
.mech-title,
.step-title,
.seq-desc > strong:first-child {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
  margin-bottom: 6px;
}

.cascade-body,
.mechanism-body,
.mechanism-label,
.step-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-light);
}

.cycle-arrow {
  text-align: center;
  color: var(--rule);
  padding: 4px 0;
  font-size: 18px;
}

.cycle-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 4px;
}

/* Timeline panel */
.timeline {
  margin: 28px 0;
  border: 1px solid var(--rule);
}

.timeline-header {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--charcoal);
  padding: 10px 14px;
  display: block;
}

.timeline-period {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  background: var(--parchment-dark);
}




/* ─────────────────────────────────────────────────────────────────
   DYSREGULATION / SIGNALING PANELS
   dysreg-panel, circuit-panel (signaling variant),
   interaction-panel, region-panel
   ───────────────────────────────────────────────────────────────── */

.dysreg-panel {
  margin: 28px 0;
  background: var(--parchment-dark);
  border-left: 3px solid var(--charcoal);
  padding: 20px 22px;
}

.dysreg-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
  margin-bottom: 14px;
}

.dysreg-body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-light);
}

.dysreg-marker {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 4px;
}

.circuit-site,
.circuit-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-light);
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
}

.circuit-site {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--parchment-dark);
}

.interaction-panel,
.region-panel {
  margin: 28px 0;
  border: 1px solid var(--rule);
}

.interaction-cell,
.reg-cell {
  padding: 14px 16px;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.65;
}

.region {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
}


/* ─────────────────────────────────────────────────────────────────
   COMPOUND / MONOGRAPH PANELS
   compound-card, compound-section, tier-block,
   evidence-summary, monograph-section
   ───────────────────────────────────────────────────────────────── */

.compound-card {
  margin: 28px 0;
  border: 1px solid var(--rule);
}

.compound-card-header {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--charcoal);
  padding: 10px 16px;
  display: block;
}

.compound-body,
.compound-block,
.compound-full {
  padding: 16px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-light);
}

.compound-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--charcoal);
  display: block;
  margin-bottom: 4px;
}

.compound-abbr,
.compound-sub {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--rule);
  display: block;
  margin-bottom: 10px;
}

.compound-fullname {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--olive);
  display: block;
  margin-bottom: 8px;
}

.compound-tier,
.compound-link {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
}

.compound-section {
  margin: 28px 0;
}

.compound-section-label,
.section-header {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

/* Compound title heading (larger Playfair variant) */
.compound-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--charcoal);
  display: block;
  margin-bottom: 6px;
}

.monograph-section {
  margin: 36px 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.evidence-summary {
  background: var(--parchment-dark);
  border: 1px solid var(--rule);
  padding: 18px 20px;
  margin: 24px 0;
  font-size: 15.5px;
  line-height: 1.65;
}

.tier-block {
  margin: 28px 0;
  border: 1px solid var(--rule);
}

.tier-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--charcoal);
  padding: 8px 14px;
  display: block;
}

.tier-1,
.tier-2,
.tier-3 {
  padding: 14px 16px;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.65;
}

.tier2,
.tier3 {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  display: inline-block;
  margin-right: 6px;
}

.open-questions ol {
  margin: 10px 0 0 20px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-light);
}

.section-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 36px 0;
}


/* ─────────────────────────────────────────────────────────────────
   EVIDENCE / BADGE ELEMENTS
   evidence-badge, badge-t1, badge-t2, cbg-header,
   cbg-step, nyw, planned
   ───────────────────────────────────────────────────────────────── */

.evidence-badge,
.badge-t1,
.badge-t2 {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  margin-left: 6px;
  vertical-align: middle;
  color: var(--ink-light);

  border-color: var(--rule);
  color: var(--rule);}

.badge-t1 { border-color: var(--olive); color: var(--olive); }


.cbg-header,
.cbg-hdr {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.cbg-step,
.cbg-type {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 6px;
}

.nyw,
.planned {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rule);
  display: inline-block;
  border: 1px solid var(--rule);
  padding: 2px 7px;
}

.nav-meta,
.pillar-nav,
.pillar-nav-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
}


/* ─────────────────────────────────────────────────────────────────
   BIOSYNTHESIS / FLOW PANELS
   biosynthesis-panel, biosynthesis-flow, bio-node, bio-arrow
   ───────────────────────────────────────────────────────────────── */

.biosynthesis-panel {
  margin: 28px 0;
  border: 1px solid var(--rule);
  padding: 20px;
}

.biosynthesis-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.bio-node {
  background: var(--parchment-dark);
  border: 1px solid var(--rule);
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.4;
  flex: 1;
  min-width: 120px;
}

.bio-arrow {
  color: var(--rule);
  font-size: 18px;
  flex-shrink: 0;
}

.biosynthesis-caption {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rule);
  display: block;
  margin-top: 12px;
  text-align: center;
}

.cbga {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--cbg-green);
  display: block;
  margin-bottom: 4px;
}


/* ─────────────────────────────────────────────────────────────────
   MEDICATIONS / DRUG LISTS
   medications-list, med-item, action-step
   ───────────────────────────────────────────────────────────────── */

.medications-list {
  margin: 24px 0;
  border: 1px solid var(--rule);
}



.med-item {
  display: flex;
  gap: 16px;
  padding: 12px 14px;
  border-top: 1px solid var(--rule);
  align-items: flex-start;
}

.med-name {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  min-width: 120px;
  flex-shrink: 0;
  padding-top: 2px;
}

.med-detail {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-light);
}

.action-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--parchment-mid);
  font-size: 15.5px;
  line-height: 1.65;
}


/* ─────────────────────────────────────────────────────────────────
   COA / SCREENING PANELS
   profile-panel, screening-panel, methods-panel, coa-section
   ───────────────────────────────────────────────────────────────── */

.profile-panel,
.screening-panel,
.methods-panel {
  margin: 28px 0;
  border: 1px solid var(--rule);
}

.coa-section {
  margin: 32px 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.section-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-light);
}

.section-number {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rule-text);
  display: block;
  margin-bottom: 6px;
}

.field-table {
  margin: 16px 0;
  border: 1px solid var(--rule);
  overflow: hidden;
}

.field-signal {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  display: inline-block;
  border: 1px solid var(--olive);
  padding: 2px 6px;
  margin: 2px;
}

.note {
  font-size: 15px;
  font-style: italic;
  color: var(--ink-light);
  line-height: 1.65;
}



.compound {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--charcoal);
}

.method-abbr {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.method-desc,
.sc-desc {
  font-size: 15px;
  line-height: 1.55;
}

.sc-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--charcoal);
}

.profile-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-top: 1px solid var(--rule);
}

.page-nav {
  margin: 32px 0;
  padding: 16px;
  border: 1px solid var(--rule);
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rule-text);
}


/* ─────────────────────────────────────────────────────────────────
   SPECTRUM / PREPARATION PANELS
   full, broad, isolate, spectrum-cell, prep-section
   ───────────────────────────────────────────────────────────────── */

.full, .broad, .isolate {
  background: var(--parchment-mid);
  padding: 20px;
  border-right: 1px solid var(--rule);
}

.full:last-child,
.broad:last-child,
.isolate:last-child {
  border-right: none;
}

.prep-section {
  margin: 28px 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.parameters-panel,
.chemistry-panel,
.comparison-note {
  margin: 24px 0;
  border: 1px solid var(--rule);
}

.param-cell {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.param-name,
.param-label {
  padding: 10px 14px;
  background: var(--parchment-dark);
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  min-width: 140px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--rule);
}

.param-desc,
.param-value,
.chem-value {
  padding: 10px 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-light);
}


/* ─────────────────────────────────────────────────────────────────
   RHYTHM / WAVEFORM PANELS (cortisol-and-the-stress-response)
   ───────────────────────────────────────────────────────────────── */

.rhythm-panel {
  margin: 28px 0;
  border: 1px solid var(--rule);
  padding: 20px;
}

.rhythm-bar-wrap {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  margin: 14px 0 8px;
}

.rhythm-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.rhythm-bar {
  width: 100%;
  background: var(--charcoal);
  border-radius: 0;
  min-height: 4px;
}

.rhythm-time {
  font-family: 'Courier Prime', monospace;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rule);
  text-align: center;
}

.rhythm-note,
.rhythm-caption,
.car-panel {
  font-size: 14px;
  color: var(--rule);
  font-style: italic;
  margin-top: 8px;
}


/* ─────────────────────────────────────────────────────────────────
   ASYMMETRY / PATHWAY PANELS (anxiety-stress-sleep-overlap)
   ───────────────────────────────────────────────────────────────── */

.asymmetry-callout {
  background: var(--parchment-dark);
  border-left: 3px solid var(--charcoal);
  padding: 18px 20px;
  margin: 24px 0;
}

.asymmetry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 14px;
}

.asymmetry-cell {
  background: var(--parchment-mid);
  padding: 16px;
}

.asymmetry-cell-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
  margin-bottom: 8px;
}

.pathway-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-light);
}

.pathway-mechanism {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 4px;
}

.pathway-arrow {
  text-align: center;
  color: var(--rule);
  font-size: 18px;
  padding: 4px 0;
}


/* ─────────────────────────────────────────────────────────────────
   UTILITY / RESPONSIBLE-USE PAGE CLASSES
   util-wrap, util-header, util-body, site-nav, site-footer
   ───────────────────────────────────────────────────────────────── */

.util-wrap {
  max-width: 740px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}

.util-header {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.util-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.util-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 400;
  color: var(--charcoal);
  margin: 36px 0 14px;
}

.util-meta {
  font-family: 'Courier Prime', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rule-text);
  display: block;
  margin-bottom: 4px;
}

.util-body {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-light);
}

.util-footer-line,
.footer-disc {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--rule);
}

.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}

.nav-brand { display: flex; flex-direction: column; gap: 2px; }
.nav-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--charcoal);
}
.nav-brand-loc {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rule-text);
}
.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-light);
  text-decoration: none;
}
.nav-cta {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 24px 32px;
  margin-top: 48px;
}

.footer-links-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.footer-bottom {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  margin-top: 14px;
}

.footer-copy {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--rule);
  display: block;
  margin-bottom: 4px;
}

/* Older footer-item / ref-list variants */
.footer-item,
.ref-list,
.meta-item {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rule-text);
}


/* ─────────────────────────────────────────────────────────────────
   SKIN LAYER TABLE (topical-cannabinoid-skin-delivery)
   ───────────────────────────────────────────────────────────────── */

.skin-table {
  margin: 24px 0;
  border: 1px solid var(--rule);
  width: 100%;
  border-collapse: collapse;
}

.layer {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  display: grid;
  grid-template-columns: 130px 1fr;
}


/* ─────────────────────────────────────────────────────────────────
   PAGE WRAP — article column constraint
   Overrides base.css for article pages. Ensures the article column
   is correctly constrained inside Divi's Code Module regardless of
   how wide the Divi row or section is set.
   ───────────────────────────────────────────────────────────────── */

.page-wrap {
  width: 100%;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  padding: 48px 40px 80px;
  box-sizing: border-box;
  position: relative;
}

/* Ensure all direct block children of page-wrap
   stay within the column and don't overflow */
.page-wrap *,
.page-wrap *::before,
.page-wrap *::after {
  box-sizing: border-box;
}

.page-wrap > div,
.page-wrap > nav,
.page-wrap > header,
.page-wrap > section,
.page-wrap > footer,
.page-wrap > article,
.page-wrap > ol,
.page-wrap > ul {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}


/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE OVERRIDES
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .page-wrap { padding: 28px 20px 60px; }

  .comparison-panel,
  .asymmetry-grid,
  .recovery-grid,
  .biosynthesis-flow { grid-template-columns: 1fr; }

  .circuit-row,
  .hierarchy-row,
  .comparison-row,
  .profile-row,
  .method-row,
  .sequence-row,
  .timeline-row,
  .param-cell,
  .med-item { grid-template-columns: 1fr; flex-direction: column; }

  .param-name,
  .param-label,
  .timeline-period {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    min-width: auto;
  }

  .cir-cell,
  .lim-cell,
  .cpd-cell,
  .route-cell,
  .pain-cell,
  .stage-cell,
  .tis-cell,
  .mg-cell { border-right: none; }

  .recovery-panel { padding: 14px; }
  .drop-cap::first-letter { font-size: 2.8em; }
  .site-nav { flex-direction: column; gap: 12px; }
  .nav-links { display: none; }
}


/* ─────────────────────────────────────────────────────────────────
   END OF article.css ADDITIONS v2.0
   J.P. Hemp Company — August 2026
   ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   SUPPLEMENTAL — remaining classes not caught in first pass
   ───────────────────────────────────────────────────────────────── */

/* Drop cap — must use ::first-letter on the paragraph itself */
p.drop-cap::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 3.4em;
  font-weight: 500;
  float: left;
  line-height: 0.78;
  margin-right: 6px;
  margin-top: 6px;
  color: var(--charcoal);
}

/* Cell variants */
.cell-key {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
  margin-bottom: 4px;
}

.cell-body,
.cell-role,
.cell-stress,
.cell-where,
.cell-question,
.cell-value,
.cell-threshold {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-light);
  padding: 10px 14px;
}

.route-name,
.type,
.pain-type-name {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding: 10px 14px;
  background: var(--parchment-dark);
}

/* Q&A rows */
.q-num {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--rule);
  min-width: 28px;
  padding: 10px 14px;
  flex-shrink: 0;
}

.q-text,
.ex-question {
  padding: 10px 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-light);
}

.ex-answer {
  padding: 10px 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-light);
  background: var(--parchment-dark);
}

.ex-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 4px;
}

.ex-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--charcoal);
  padding: 10px 14px;
}

.question-item {
  padding: 12px 14px;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.65;
}

/* Pathway and sequence additions */
.pathway-cell {
  padding: 12px 14px;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.65;
}

.seq-desc {
  padding: 10px 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-light);
}

/* Cannabinoid evidence table */
.cannabinoid-evidence {
  margin: 24px 0;
  border: 1px solid var(--rule);
}

.cortisol-fn {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-light);
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
}

/* ─────────────────────────────────────────────────────────────────
   END OF SUPPLEMENTAL ADDITIONS
   ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   FINAL STRAGGLERS
   ───────────────────────────────────────────────────────────────── */

/* Grid panel containers — generic display wrappers */
.route-grid,
.drug-grid,
.tissue-grid,
.limits-grid,
.intersection-grid,
.regions-panel,
.functions-panel,
.compound-panel {
  margin: 24px 0;
  border: 1px solid var(--rule);
}

/* Single-article semantic classes */
.chronic { color: var(--accent); }
.hpa { font-style: italic; }
.hemp, .primary { font-weight: 400; }
.genetics { font-family: 'Courier Prime', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive); }
.example-body { padding: 14px 16px; font-size: 15.5px; line-height: 1.65; }
.s-label { font-family: 'Courier Prime', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal); display: block; margin-bottom: 6px; }


/* ─────────────────────────────────────────────────────────────────
   MOLECULE PANEL ADDITIONS — anandamide-and-2ag.html
   ───────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────
   MOLECULE PANEL
   Two-column side-by-side compound comparison.
   Used in: anandamide-and-2ag.html

   HTML structure:
     <div class="molecule-panel">
       <div class="molecule-cell">
         <p class="cell-label">...</p>
         <p class="cell-name">...</p>
         <p class="cell-abbr">...</p>
         <p class="cell-origin">...</p>
       </div>
       <div class="molecule-cell">...</div>
     </div>
   ───────────────────────────────────────────────────────────────── */

.molecule-panel {
  margin: 32px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.molecule-cell {
  background: var(--parchment-mid);
  padding: 26px 22px;
}

.molecule-cell .cell-label {
  font-family: 'Courier Prime', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 10px;
}

.molecule-cell .cell-name {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 4px;
  line-height: 1.2;
}

.molecule-cell .cell-abbr {
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--rule);
  margin-bottom: 14px;
  display: block;
}

.molecule-cell .cell-origin {
  font-size: 15.5px;
  color: var(--ink-light);
  font-style: italic;
  line-height: 1.65;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .molecule-panel {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────────
   COMPARE GRID
   Three-column comparison table with header row.
   Used in: anandamide-and-2ag.html

   HTML structure:
     <div class="compare-grid">
       <div class="compare-row header">
         <div class="compare-cell"></div>
         <div class="compare-cell">Column A</div>
         <div class="compare-cell">Column B</div>
       </div>
       <div class="compare-row">
         <div class="compare-cell property">Row label</div>
         <div class="compare-cell">Value A</div>
         <div class="compare-cell">Value B</div>
       </div>
     </div>
   ───────────────────────────────────────────────────────────────── */

.compare-grid {
  margin: 32px 0;
  border: 1px solid var(--rule);
  background: var(--rule);
  gap: 1px;
  display: grid;
}

.compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
}

.compare-cell {
  background: var(--parchment);
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-light);
}

.compare-row.header .compare-cell {
  background: var(--charcoal);
  color: var(--parchment);
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
}

.compare-cell.property {
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  background: var(--parchment-dark);
  display: flex;
  align-items: center;
}

@media (max-width: 600px) {
  .compare-row {
    grid-template-columns: 1fr;
  }
  .compare-row.header {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────────────────
   END OF article.css ADDITIONS — August 2026
   J.P. Hemp Company
   ───────────────────────────────────────────────────────────────── */
body .page-wrap .article-body strong, body .page-wrap .article-body b, body .page-wrap .honest-box strong, body .page-wrap .honest-box b, body .page-wrap .study-block strong, body .page-wrap .study-block b, body .page-wrap .experience-note strong, body .page-wrap .experience-note b, body .page-wrap .field-note strong, body .page-wrap .field-note b { font-weight: 700 !important; font-size: 1em !important; }