/* /serotonin/ pillar page: study cards, key numbers, pathway diagrams. Sits on top of articles.css + studies.css. */
.sr-page { --sr-accent: #F2C14E; --sr-card: #0B0B0B; --sr-mono: "Geist Mono", ui-monospace, monospace; }

.sr-eyebrow { margin: 22px 0 -8px; font-family: var(--sr-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sr-accent); }
.sr-lede { margin: 0 0 18px; font-size: 19px; line-height: 1.55; color: #fff; }

/* three key numbers under the title */
.sr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 22px; }
.sr-stats p { margin: 0; padding: 14px 12px; border: 1px solid var(--x-line); border-radius: 14px; background: var(--sr-card); }
.sr-stats__num { display: block; font-family: var(--font-body); font-size: clamp(24px, 6vw, 32px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--sr-accent); }
.sr-stats__label { display: block; margin-top: 8px; font-size: 13px; line-height: 1.35; color: #BDBDBD; }
@media (max-width: 480px) {
  .sr-stats { grid-template-columns: 1fr; }
  .sr-stats p { display: flex; align-items: baseline; gap: 12px; }
  .sr-stats__label { margin-top: 0; }
}

/* figures with captions */
.x-body .sr-fig { margin: 18px 0; }
.sr-fig img { display: block; }
.sr-fig--narrow { max-width: 460px; margin-left: auto !important; margin-right: auto !important; }
.sr-fig figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; color: #9A9A9A; }
.sr-fig figcaption a { color: #CFCFCF; }

/* study card */
.x-body .sr-study { margin: 26px 0; padding: 18px 16px 6px; border: 1px solid #3A3A3A; border-radius: 18px; background: var(--sr-card); }
.sr-study__kicker { margin: 0 0 8px !important; font-family: var(--sr-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sr-accent); }
.sr-study__head { margin: 0 0 10px !important; font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
.sr-study__src { margin: 0 0 14px !important; font-size: 14px; line-height: 1.45; color: #8A8A8A; }
.sr-study__src a { display: block; color: #E7E9EA; font-weight: 600; text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px; }
.sr-study__src a:hover { text-decoration-color: #fff; }
.sr-study__src span { display: block; margin-top: 2px; font-family: var(--sr-mono); font-size: 12px; }
.sr-study .sr-fig img { border-color: #2A2A2A; }

.sr-stat { display: flex; align-items: center; gap: 14px; margin: 0 0 14px !important; padding: 12px 14px; border-radius: 14px; background: #161206; border: 1px solid #3B3112; }
.sr-stat__num { flex: none; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--sr-accent); }
.sr-stat__label { font-size: 14.5px; line-height: 1.35; color: #E9DFC4; }

.sr-find { margin: 16px 0 14px; padding: 12px 14px; border-left: 3px solid var(--sr-accent); background: #111; border-radius: 0 12px 12px 0; }
.sr-find p { margin: 0 !important; font-size: 16px; line-height: 1.55; color: #EDEDED; }
.sr-find .sr-find__label { margin-bottom: 4px !important; font-family: var(--sr-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8A8A8A; }
.sr-note { margin: 0 0 14px !important; font-size: 14.5px; line-height: 1.5; color: #A8A8A8; }
.sr-note strong { color: #D6D6D6; }

/* pathway diagram */
.x-body .sr-flow { margin: 24px 0; padding: 16px; border: 1px solid var(--x-line); border-radius: 18px; background: #070707; }
.sr-flow figcaption { margin-bottom: 12px; font-family: var(--sr-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #8A8A8A; }
.sr-flow ol { list-style: none; margin: 0 !important; padding: 0; display: grid; gap: 22px; counter-reset: sr; }
.sr-flow li { position: relative; padding: 10px 14px; border: 1px solid #333; border-radius: 12px; background: #121212; }
.sr-flow li strong { display: block; font-size: 16.5px; line-height: 1.25; color: #fff; }
.sr-flow li span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: #A3A3A3; }
.sr-flow li:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%); font-size: 16px; line-height: 20px; color: var(--sr-accent); }
.sr-flow li:first-child { border-color: #5A4A1C; }
.sr-flow li:last-child { border-color: #5A4A1C; }

/* callout and pull quote */
.x-body .sr-callout { margin: 22px 0; padding: 14px 16px; border: 1px solid #3B3112; border-radius: 14px; background: #120F06; }
.sr-callout p { margin: 0 !important; font-size: 15.5px; line-height: 1.5; color: #E9DFC4; }
.sr-callout .sr-callout__label { margin-bottom: 4px !important; font-family: var(--sr-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sr-accent); }
.x-body .sr-quote { margin: 22px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--sr-accent); font-size: 21px; font-weight: 700; line-height: 1.35; color: #fff; }

.sr-page .x-body h3 { font-size: 20px; }