/**
 * Prose Rhythm
 * ------------
 * Content-independent breaking-up-of-walls-of-text. Operates on `.prose`
 * markup with no special markdown required. Authors write standard
 * paragraphs and `---` dividers; this stylesheet applies editorial breath.
 *
 * Loaded after marginalia.css and base.css, before per-era CSS so eras can
 * override.
 *
 * Three concerns:
 *   1. Auto drop-cap on the first paragraph of any narrative .prose block
 *   2. Stylized horizontal rules (---) per era
 *   3. Improved paragraph rhythm (margin, line-height, max-width balance)
 */

/* ===================================================================
   1. Vertical rhythm — looser line-height + paragraph spacing.
   ================================================================== */
.prose {
  line-height: 1.7;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
}
.prose p {
  margin: 0 0 1.4em 0;
  /* Hyphens off — narrative prose reads better without auto-hyphenation,
     even on narrow viewports. */
  hyphens: none;
}
.prose p + p {
  /* Slight extra top margin between consecutive paragraphs to break
     the visual cadence of straight running prose. */
  margin-top: 1.4em;
}

/* On narrative-type nodes specifically (not documents/manifestos which
   have their own structure), give the prose a comfortable max-width so
   line lengths sit in the 60–75ch sweet spot. */
.node-narrative .prose,
[data-type="narrative"] .prose {
  max-width: 68ch;
}

/* ===================================================================
   2. Auto drop-cap on the first paragraph of any .prose block,
      UNLESS the first child is already a callout/aside/quote.
      The :not() chain prevents drop-capping when the markdown opens
      with a marginalia element.
   ================================================================== */
.prose > p:first-of-type:first-letter {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 4.2em;
  font-weight: 600;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.10em -0.08em -0.04em;
  color: var(--sf-accent, currentColor);
  /* Era CSS can override font / glow / chromatic separation. */
}

/* If the first paragraph is itself wrapped in a marginalia callout,
   suppress the auto-dropcap. Tested classes that would precede the
   first paragraph as siblings, not as the paragraph itself. */
.prose > .mg-callout + p:first-of-type:first-letter,
.prose > .mg-pull + p:first-of-type:first-letter,
.prose > blockquote + p:first-of-type:first-letter {
  /* Intentionally normalized — drop-cap belongs on the very first
     visual element, and if a callout came first, the callout already
     does the work of breaking the page's opening visual. */
  font-size: inherit;
  font-weight: inherit;
  float: none;
  margin: 0;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
}

/* If author explicitly opted out via {dropcap}-not or class, respect it. */
.prose.no-dropcap > p:first-of-type:first-letter,
.prose > p.no-dropcap:first-letter {
  font-size: inherit;
  font-weight: inherit;
  float: none;
  margin: 0;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
}

/* If author explicitly used the {dropcap} marker, marginalia.js wraps
   the paragraph in .mg-dropcap which has its own treatment — this
   selector below ensures we don't double-style. */
.prose .mg-dropcap > p:first-of-type:first-letter,
.prose > .mg-dropcap:first-of-type:first-letter {
  /* Marginalia handles it. Strip our auto rules. */
  float: none;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
}

/* ===================================================================
   3. Stylized <hr> dividers — replace plain rule with an asterism.
      Per-era overrides are below; this is the universal default.
   ================================================================== */
.prose hr,
.node-content hr {
  border: none;
  height: auto;
  margin: 2.5em auto;
  text-align: center;
  overflow: visible;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 1.5em;
  color: var(--sf-muted, currentColor);
  opacity: 0.5;
}
.prose hr::before,
.node-content hr::before {
  content: "✺ ✺ ✺";
}

/* Era-specific hr glyph variants */
.era-2024-2026 .prose hr::before { content: "✦ ✦ ✦"; }
.era-2027-2028 .prose hr::before { content: "・ ・ ・"; opacity: 0.6; }
.era-2029-2030 .prose hr::before { content: "▮ ▮ ▮"; letter-spacing: 0.6em; font-family: var(--sf-font-mono); }
.era-2031-2032 .prose hr::before { content: "[ █ █ █ ]"; letter-spacing: 0.3em; font-family: var(--sf-font-mono); color: var(--sf-neon-green); text-shadow: 0 0 4px var(--sf-neon-green); }
.era-2033-2034 .prose hr::before { content: "✦ ✦ ✦"; opacity: 0.4; }
.era-2035 .prose hr::before { content: "✺ ✺ ✺"; color: rgba(61, 122, 95, 0.5); }
.era-2036 .prose hr::before {
  content: "◇ ◇ ◇";
  color: var(--sf-accent);
  text-shadow: 0 0 calc(var(--sf-glow-strength) * 1px) rgba(95, 191, 255, 0.3);
}
.era-2037 .prose hr::before {
  content: "◈ ◈ ◈";
  color: var(--sf-accent);
  text-shadow: 0 0 calc(var(--sf-glow-strength) * 1.5px) rgba(95, 191, 255, 0.4);
}
.era-2038 .prose hr::before {
  content: "◈";
  letter-spacing: 0;
  font-size: 1.8rem;
  color: var(--sf-accent);
  text-shadow:
    calc(var(--sf-chromatic-aberration) * -1) 0 0 var(--sf-chromatic-magenta),
    var(--sf-chromatic-aberration) 0 0 var(--sf-chromatic-cyan),
    0 0 calc(var(--sf-glow-strength) * 2px) rgba(138, 208, 255, 0.5);
}

/* ===================================================================
   4. Paragraph cadence cues for very long stretches.
      When a .prose block has many consecutive paragraphs without
      any callout/quote/aside breaking them, the reading feels relentless.
      Use :nth-of-type to subtly vary the leading on every 5th paragraph
      so the eye gets micro-rests it doesn't notice.
   ================================================================== */
.prose p:nth-of-type(5n) {
  margin-top: 1.8em;  /* slightly more breath every 5th paragraph */
}

/* The first paragraph after a callout/aside gets extra top space —
   reading resumes after a pause. */
.prose .mg-callout + p,
.prose .mg-pull + p,
.prose blockquote + p,
.prose hr + p {
  margin-top: 1.8em;
}

/* ===================================================================
   5. Pull-quote-from-blockquote default
      A bare blockquote (no [!ALERT] type) without any author markup
      reads as a pullquote. This is marginalia's default but ensure
      narrative type-specific spacing.
   ================================================================== */
.node-narrative .prose blockquote.mg-pull,
.node-narrative .prose .mg-pull,
[data-type="narrative"] .prose .mg-pull {
  margin: 2em 0;
  padding: 1em 1.5em;
  font-size: 1.15em;
  line-height: 1.55;
}

/* ===================================================================
   6. First-line micro-emphasis — small caps treatment on the first
      line of a node's opening paragraph. Editorial flair.
      Applied via font-feature-settings, opt-out for code-heavy nodes.
   ================================================================== */
.prose > p:first-of-type::first-line {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  font-weight: 500;
}
/* Disable on document/manifesto/code-heavy types where small caps
   would conflict with technical content. */
.media-artifact .prose > p:first-of-type::first-line,
[data-type="document"] .prose > p:first-of-type::first-line,
.prose.no-smallcaps > p:first-of-type::first-line {
  font-variant-caps: normal;
  letter-spacing: normal;
  font-weight: inherit;
}

/* ===================================================================
   7. Viz figure containers — for <figure data-viz="..."> elements
      mounted by static/js/viz/loader.js. Era-aware via tokens.
   ================================================================== */
.viz-figure,
figure[data-viz] {
  margin: 2.5em 0;
  padding: var(--sf-space-md);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-frame-corner, 4px);
  background: var(--sf-translucent-panel-bg, transparent);
  position: relative;
  /* Reserve space before mount so layout doesn't jump when JS arrives */
  min-height: 200px;
}

figure[data-viz]::before {
  content: "TIER " attr(data-tier);
  position: absolute;
  top: 0.6em;
  right: 0.8em;
  font-family: var(--sf-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--sf-muted);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

figure[data-viz]:not(.viz-mounted) {
  /* Pre-mount placeholder — the figcaption shows as fallback */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  text-align: center;
  color: var(--sf-muted);
  font-style: italic;
  font-size: 0.92rem;
}

figure[data-viz].viz-failed {
  /* If the module failed to load, show only the figcaption as static caption */
  border-style: dashed;
  border-color: var(--sf-muted);
}

figure[data-viz] figcaption {
  /* 14px floor per muriel readability rule (size+weight=legibility, not just
     contrast). 0.78rem on 16px root = 12.48px which fails this floor; bump
     to 0.92rem (~14.7px) and weight 500 for body-class coexistence with
     era-2031 dark backgrounds where italic muted text easily disappears. */
  margin-top: 0.9em;
  font-size: 0.92rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: var(--sf-muted);
  letter-spacing: 0.015em;
  max-width: 60ch;
}

/* In late eras, viz containers gain glow + backdrop blur to fit the chrome */
.era-2036 figure[data-viz],
.era-2037 figure[data-viz],
.era-2038 figure[data-viz] {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 calc(var(--sf-glow-strength) * 4px) rgba(95, 191, 255, 0.12);
}

/* Lead-position viz — the hero block at the top of a content node.
   Bigger margins, slightly heavier border, separator below. Reads as the
   page's lede. */
figure[data-viz].viz-lead {
  margin: 0.5em 0 2em 0;
  padding: var(--sf-space-lg);
  border-width: 2px;
}
figure[data-viz].viz-lead + figure[data-viz].viz-lead {
  margin-top: 1em;
}
figure[data-viz].viz-lead figcaption {
  margin-top: 1em;
  font-size: 0.95rem;   /* 15.2px — slightly larger than the default since
                           lead figures are hero-position and need body-rhythm
                           spacing immediately below */
}

/* Artistic illustration — separate category from data viz. No tier badge,
   no border (the illustration speaks for itself), centered, generous
   margins. Used for hand-authored botanical / decorative SVGs that
   accompany narrative beats rather than encode data. */
figure[data-viz].viz-illustration {
  background: transparent;
  border: none;
  padding: 0;
  margin: 1.5em auto 2.5em;
  max-width: 720px;
}
figure[data-viz].viz-illustration::before {
  content: none;  /* drop the "TIER N" badge — illustrations don't have a tier */
}
figure[data-viz].viz-illustration figcaption {
  text-align: center;
  font-style: italic;
  font-size: 0.95rem;   /* matches lead — illustrations carry caption weight */
  font-weight: 500;
  line-height: 1.55;
  margin-top: 1em;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}