/*
 * J.P. Hemp Company — base.css
 * Shared foundation stylesheet — loaded by all research archive pages
 * Design System v3.12 · Charter v3.14 · April 2026
 *
 * Covers: CSS custom properties, reset, body, typography,
 * noise texture, links, breadcrumb, page-wrap, dividers,
 * botanical motif, drop caps, responsive overrides.
 *
 * Load order: base.css → article.css or hub.css
 * Link tag:   <link rel="stylesheet" href="/wp-content/themes/jp-hemp-child/base.css">
 */


/* ─────────────────────────────────────────────────────────────────
   PART 1 — CSS CUSTOM PROPERTIES
   Single source of truth for all colors across the archive.
   To change a color: update here only. All pages update automatically.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Parchment family — backgrounds */
  --parchment:          #f5f0e8;   /* Primary background — all pages */
  --parchment-dark:     #ede6d6;   /* Panels, field notes, callout boxes */
  --parchment-mid:      #e8e0ce;   /* Secondary panels, study panel bodies */
  --parchment-warm:     #f0e8d8;   /* Figure placeholders, warm tint panels */
  --parchment-lavender: #f0eaf4;   /* Women's health note panels */
  --parchment-amber:    #f7ede0;   /* Warning note panels */

  /* Ink family — text */
  --ink:                #2a2318;   /* Primary text — headlines, strong labels */
  --ink-light:          #4a3f30;   /* Body text — all running prose */

  /* Plant tones — navigation, accents */
  --olive:              #5c6340;   /* Navigation links, section labels, tags */
  --olive-light:        #7a8555;   /* Subtitles, hover state for olive elements */
  --charcoal:           #3a3530;   /* H1 headlines, panel cell titles */

  /* Document tones — borders, meta */
  --rule:               #b8a882;   /* All borders, dividers, meta text */
  --rule-light:         #d4c9a8;   /* Lighter borders, entry separators */
  --accent:             #8b6914;   /* Field note labels, warning markers */

  /* CBG identity — restricted use only */
  --cbg-green:          #3a5220;   /* CBG compound cards, tier badges, CBG hub */
  --cbg-light:          #e8edd8;   /* CBG panel backgrounds */

  /* Women's health identity */
  --women:              #5c4060;   /* Women's health pillar label color */
  --women-light:        #8a6890;   /* Women's health border/hover */
}


/* ─────────────────────────────────────────────────────────────────
   PART 2 — RESET
   ───────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ─────────────────────────────────────────────────────────────────
   PART 3 — BODY & BACKGROUND
   ───────────────────────────────────────────────────────────────── */

body {
  background-color: var(--parchment);
  color: var(--ink-light);
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.78;
  font-weight: 300;
}

/* Noise texture overlay — sits above background, below content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}


/* ─────────────────────────────────────────────────────────────────
   PART 4 — TYPOGRAPHY
   ───────────────────────────────────────────────────────────────── */

h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 3.8vw, 42px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--charcoal);
  margin-bottom: 0;
  letter-spacing: -0.01em;
}

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;
}

h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-light);
  margin: 32px 0 12px;
}

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

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

a {
  color: var(--olive);
  text-decoration: underline;
  transition: color 150ms ease;
}

a:hover {
  color: var(--olive-light);
}


/* ─────────────────────────────────────────────────────────────────
   PART 5 — PAGE STRUCTURE
   ───────────────────────────────────────────────────────────────── */

/*.page-wrap {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin: 0 auto;
  padding: 60px 40px 100px;
}*/


/* ─────────────────────────────────────────────────────────────────
   PART 6 — BREADCRUMB
   ───────────────────────────────────────────────────────────────── */

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

.breadcrumb span {
  opacity: 0.5;
  margin: 0 2px;
}

.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);
}


/* ─────────────────────────────────────────────────────────────────
   PART 7 — PAGE HEADER
   ───────────────────────────────────────────────────────────────── */

.page-header {
  border-top: 2px solid var(--ink);
  padding-top: 32px;
  margin-bottom: 40px;
}

.page-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  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 {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rule);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.article-meta strong { color: var(--ink-light); }


/* ─────────────────────────────────────────────────────────────────
   PART 8 — DIVIDERS
   ───────────────────────────────────────────────────────────────── */

/* v2 jp-divider system — SVG image dividers */
.jp-divider {
  display: flex;
  justify-content: center;
  margin: 48px 0;
}

.jp-divider img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
}

.jp-divider img.divider-micro { display: none !important; }

@media (max-width: 520px) {
  .jp-divider img.divider-full  { display: none !important; }
  .jp-divider img.divider-micro { display: block !important; max-width: 480px; }
}

/* Legacy text dividers — kept for backwards compatibility */
.divider-major {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 48px 0;
}
.divider-major::before,
.divider-major::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-light);
}

.divider-minor {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px 0;
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
  letter-spacing: 10px;
  color: var(--rule);
  padding-left: 10px;
}


/* ─────────────────────────────────────────────────────────────────
   PART 9 — BOTANICAL MOTIF OVERLAY
   ───────────────────────────────────────────────────────────────── */

.with-motif {
  position: relative;
  overflow: hidden;
}

.with-motif::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  width: 300px;
  height: 375px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%20200%22%20fill%3D%22none%22%3E%0A%3Cg%20stroke%3D%22%235c6340%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M80%20195%20C80%20195%2080%2010%2080%2010%22%20stroke-width%3D%221.8%22/%3E%0A%3Ccircle%20cx%3D%2280%22%20cy%3D%2210%22%20r%3D%223.5%22%20stroke-width%3D%221.5%22/%3E%0A%3Cpath%20d%3D%22M80%2022%20C80%2022%2072%2016%2068%2010%20C72%2014%2080%2016%2080%2016%22%20stroke-width%3D%221.2%22/%3E%0A%3Cpath%20d%3D%22M80%2022%20C80%2022%2088%2016%2092%2010%20C88%2014%2080%2016%2080%2016%22%20stroke-width%3D%221.2%22/%3E%0A%3Cpath%20d%3D%22M80%2050%20C80%2050%2058%2038%2046%2022%20C60%2032%2080%2038%2080%2038%22%20stroke-width%3D%221.4%22/%3E%0A%3Cpath%20d%3D%22M80%2050%20C80%2050%20102%2038%20114%2022%20C100%2032%2080%2038%2080%2038%22%20stroke-width%3D%221.4%22/%3E%0A%3Cpath%20d%3D%22M80%2080%20C80%2080%2052%2065%2036%2044%20C54%2058%2080%2065%2080%2065%22%20stroke-width%3D%221.5%22/%3E%0A%3Cpath%20d%3D%22M80%2080%20C80%2080%20108%2065%20124%2044%20C106%2058%2080%2065%2080%2065%22%20stroke-width%3D%221.5%22/%3E%0A%3Cpath%20d%3D%22M80%20112%20C80%20112%2046%2093%2026%2066%20C48%2084%2080%2093%2080%2093%22%20stroke-width%3D%221.6%22/%3E%0A%3Cpath%20d%3D%22M80%20112%20C80%20112%20114%2093%20134%2066%20C112%2084%2080%2093%2080%2093%22%20stroke-width%3D%221.6%22/%3E%0A%3Cpath%20d%3D%22M80%20145%20C80%20145%2040%20122%2016%2090%20C42%20110%2080%20122%2080%20122%22%20stroke-width%3D%221.7%22/%3E%0A%3Cpath%20d%3D%22M80%20145%20C80%20145%20120%20122%20144%2090%20C118%20110%2080%20122%2080%20122%22%20stroke-width%3D%221.7%22/%3E%0A%3Cpath%20d%3D%22M80%20170%20C80%20170%2052%20155%2034%20136%20C56%20150%2080%20158%2080%20158%22%20stroke-width%3D%221.5%22/%3E%0A%3Cpath%20d%3D%22M80%20170%20C80%20170%20108%20155%20126%20136%20C104%20150%2080%20158%2080%20158%22%20stroke-width%3D%221.5%22/%3E%0A%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  opacity: 0.05;
}

.with-motif-left::after  { right: auto; left: 4%; }
.with-motif-dark::after  { opacity: 0.06; filter: invert(1) brightness(1.5); }


/* ─────────────────────────────────────────────────────────────────
   PART 10 — DROP CAPS
   ───────────────────────────────────────────────────────────────── */

.drop-cap::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 4.2em;
  font-weight: 400;
  color: var(--olive);
  float: left;
  line-height: 0.76;
  margin-right: 0.07em;
  margin-top: 0.08em;
  margin-bottom: -0.05em;
  padding-right: 0.02em;
}

.drop-cap::after {
  content: '';
  display: table;
  clear: both;
}


/* ─────────────────────────────────────────────────────────────────
   PART 11 — RESPONSIVE
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .page-wrap {
    padding: 40px 24px 80px;
  }

  .article-meta {
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}