/* Deskrune v5 — Universal content enhancer
 *
 * Targets long-form pages (.q-shell article, .post article, /library/ pages, /notes/, /afm/).
 * Adds magazine touches automatically without per-page edits:
 *   - Drop-cap on first paragraph after H1
 *   - Tightened H2 typographic spacing
 *   - Small caps on eyebrows
 *   - Pull-quote pattern via .pull-quote
 *   - Margin-note pattern via .margin-note
 *   - Auto-generated table of contents (paired with auto-toc.js)
 *
 * Why this matters: 247 content pages (/q/, /library/, /notes/, /afm/, /blog/) need to
 * feel as magazine-grade as /methodology/. A scoped enhancer applied once at the CSS
 * cascade level is leverage. Per-page edits are not.
 */

/* ─── Drop-cap on first body paragraph ──────────────────────────────
 * Targets the FIRST paragraph after the H1 (skipping eyebrow + H1 itself).
 * Selector pattern: `h1 + p::first-letter` matches the immediate <p>
 * sibling that follows the H1.  Falls back gracefully if that pattern
 * doesn't exist on a given page — drop-cap simply doesn't render.
 */
.q-shell h1 + p::first-letter,
.q-shell .q-container h1 + p::first-letter,
article.dr-content h1 + p::first-letter,
.dr-magazine h1 + p::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 3.4em;
  line-height: 0.85;
  float: left;
  margin: 0.06em 0.08em 0 -0.04em;
  color: var(--dr-clay, #c9613f);
  font-variation-settings: 'opsz' 72;
}

/* ─── Eyebrow refinement ────────────────────────────────────────── */
.q-eyebrow,
.dr-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dr-clay, #c9613f);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.q-eyebrow::before,
.dr-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--dr-clay, #c9613f);
  opacity: 0.5;
}

/* ─── H1 + H2 magazine treatment ────────────────────────────────── */
.q-shell h1,
.dr-magazine h1,
article.dr-content h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 36px;
  color: var(--dr-ink, #1f1c18);
  font-variation-settings: 'opsz' 72;
}

.q-shell h2,
.dr-magazine h2,
article.dr-content h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 56px 0 16px;
  color: var(--dr-ink, #1f1c18);
  font-variation-settings: 'opsz' 36;
  position: relative;
  padding-top: 12px;
}
.q-shell h2::before,
.dr-magazine h2::before,
article.dr-content h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--dr-rule, #e8e6dc);
  margin-bottom: 16px;
}

/* ─── Body paragraphs: tighter, more book-like ──────────────────── */
.q-shell p,
.dr-magazine p,
article.dr-content p {
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--dr-ink-soft, #2a2520);
  margin: 0 0 18px;
}

/* ─── Pull-quote pattern ────────────────────────────────────────── */
.pull-quote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--dr-clay-deep, #a04a2c);
  margin: 36px -8px;
  padding: 24px 32px;
  border-left: 3px solid var(--dr-clay, #c9613f);
  background: rgba(201, 97, 63, 0.04);
  border-radius: 0 4px 4px 0;
  letter-spacing: -0.005em;
}

/* ─── Margin-note pattern (desktop only) ────────────────────────── */
.margin-note {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--dr-muted, #6f6a60);
  font-style: italic;
}

@media (min-width: 1100px) {
  .q-shell .q-container,
  article.dr-content {
    position: relative;
  }
  .margin-note {
    position: absolute;
    right: -240px;
    width: 220px;
    margin-top: 4px;
  }
}

/* ─── Inline cite (e.g., PMID, year, source) ────────────────────── */
.cite {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--dr-muted, #6f6a60);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Auto-ToC (populated by auto-toc.js) ───────────────────────── */
.dr-auto-toc {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  padding: 16px 0 0 16px;
  border-left: 1px solid var(--dr-rule, #e8e6dc);
  display: none;
}
.dr-auto-toc h6 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dr-muted, #6f6a60);
  margin: 0 0 14px;
}
.dr-auto-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: dr-toc;
}
.dr-auto-toc li {
  counter-increment: dr-toc;
  margin: 0 0 8px;
  padding-left: 24px;
  position: relative;
}
.dr-auto-toc li::before {
  content: counter(dr-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
  color: var(--dr-muted, #6f6a60);
  font-size: 10px;
  top: 2px;
}
.dr-auto-toc a {
  color: var(--dr-ink, #1f1c18);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--dr-ease, cubic-bezier(0.45,0,0.55,1));
}
.dr-auto-toc a:hover,
.dr-auto-toc a.is-active {
  border-bottom-color: var(--dr-clay, #c9613f);
  color: var(--dr-clay, #c9613f);
}

@media (min-width: 1280px) {
  .dr-auto-toc {
    display: block;
    position: fixed;
    left: max(24px, calc((100vw - 720px) / 2 - 200px));
    top: 120px;
    width: 180px;
  }
}

/* ─── Article reading-progress bar ──────────────────────────────── */
.dr-article-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--dr-clay, #c9613f);
  width: var(--dr-progress, 0%);
  z-index: 999;
  transition: width 80ms linear;
  pointer-events: none;
}