---
/**
 * Section heading with optional right-aligned meta.
 *
 * `brush` puts the vermillion sumi stroke under the title. Use it on
 * emphasis only — the brand guide is explicit that brushing every heading
 * is the same as brushing none.
 */
const { title, meta, brush = false, id } = Astro.props;
---

<div class="mb-12 flex flex-wrap items-baseline gap-6" id={id}>
  <h2 class="font-serif text-[clamp(1.8rem,4vw,2.4rem)] leading-tight tracking-tight">
    {brush ? <span class="ca-brushed">{title}</span> : title}
  </h2>
  {
    meta && (
      <span class="ml-auto font-mono text-xs tracking-[0.1em] text-[var(--ca-ink-4)] uppercase">
        {meta}
      </span>
    )
  }
</div>
