Editorial rule hero

Create an editorial hero with Tailwind CSS that reads like the front of a printed journal. Use a max-w-5xl column with generous top padding. At the very top, a hairline rule with a row above it holding an issue number on the left, a dateline in the middle and a subscriber count on the right, all in small monospaced uppercase. Then an oversized headline set in tight leading with one word italicised, followed by a deck paragraph in larger grey serif-feeling prose, limited to a comfortable measure. Under a second hairline, a three-column grid of standfirst blocks, each with a small numeral, a bold label and two lines of description, separated by vertical rules on md and up. Close with a row holding a dark "Read this issue" button on the left and a muted "12 minute read" note on the right, then a final hairline.

<section class="mx-auto max-w-5xl px-6 py-20">
  <div class="flex items-center justify-between font-mono text-[11px] uppercase tracking-[0.18em] text-neutral-400">
    <span>Issue 14</span>
    <span>Rotterdam · 18 August 2026</span>
    <span>41,208 readers</span>
  </div>
  <div class="mt-3 h-px bg-neutral-900"></div>

  <h1 class="mt-10 max-w-4xl text-5xl font-semibold leading-[1.02] tracking-tight text-neutral-900 sm:text-7xl">
    The quiet economics of <span class="italic font-normal">maintenance</span>
  </h1>

  <p class="mt-8 max-w-2xl text-xl leading-relaxed text-neutral-500">
    Nobody funds the second decade of a system. We spent four months with the teams keeping thirty-year-old infrastructure running, and asked what it actually costs to not rewrite.
  </p>

  <div class="mt-12 h-px bg-neutral-200"></div>

  <div class="grid gap-8 py-10 md:grid-cols-3 md:divide-x md:divide-neutral-200">
    <div class="md:pr-8">
      <span class="font-mono text-xs text-neutral-400">01</span>
      <p class="mt-2 text-sm font-semibold text-neutral-900">The rewrite that never paid</p>
      <p class="mt-1.5 text-sm leading-relaxed text-neutral-500">Three ledgers, eleven years, and the migration that quietly outlived its sponsors.</p>
    </div>
    <div class="md:px-8">
      <span class="font-mono text-xs text-neutral-400">02</span>
      <p class="mt-2 text-sm font-semibold text-neutral-900">Who reads the runbook</p>
      <p class="mt-1.5 text-sm leading-relaxed text-neutral-500">On-call rotations as an archive of everything the documentation left out.</p>
    </div>
    <div class="md:pl-8">
      <span class="font-mono text-xs text-neutral-400">03</span>
      <p class="mt-2 text-sm font-semibold text-neutral-900">Budgets for boring work</p>
      <p class="mt-1.5 text-sm leading-relaxed text-neutral-500">How four organisations learned to fund upkeep without calling it a project.</p>
    </div>
  </div>

  <div class="flex flex-wrap items-center justify-between gap-4 border-t border-neutral-200 pt-8">
    <a href="#" class="rounded-xl bg-neutral-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Read this issue</a>
    <span class="font-mono text-xs uppercase tracking-widest text-neutral-400">12 minute read · Essay</span>
  </div>
</section>