HeadingEditorial heading

---
/**
 * HeadingEditorial — redactionele sectiekop: issue-label, zware titel,
 * cursieve deck-regel en een accent-streep eronder.
 *
 * Props:
 * - issue?: string
 * - title?: string
 * - deck?: string
 */
interface Props {
  issue?: string;
  title?: string;
  deck?: string;
}

const { issue, title, deck } = Astro.props;
---

<section class="bl-section hd-editorial-section">
  <div class="bl-inner hd-editorial">
    {issue && <p class="hd-editorial__issue">{issue}</p>}
    {title && <h2 class="hd-editorial__title">{title}</h2>}
    {deck && <p class="hd-editorial__deck">{deck}</p>}
    <div class="hd-editorial__rule" aria-hidden="true"></div>
  </div>
</section>

<style>
.hd-editorial__issue{margin:0 0 1rem;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#777}
.hd-editorial__title{margin:0 0 .75rem;font-size:clamp(2.25rem,5vw,3.75rem);font-weight:900;line-height:1.05;color:var(--color-primary);letter-spacing:-.025em;max-width:760px}
.hd-editorial__deck{margin:0 0 1.5rem;font-size:1.2rem;color:#444;line-height:1.65;font-style:italic;max-width:680px}
.hd-editorial__rule{width:60px;height:4px;background:var(--color-accent);border-radius:2px}
</style>