roux/layouts/404.html

{{ define "main" }}
<section class="relative overflow-hidden
                min-h-[75vh] flex flex-col items-center justify-center text-center
                px-[var(--pad)] py-[clamp(48px,8vw,96px)]
                border-b border-[var(--rule)]">

  {{/* Ghost number — decorative watermark */}}
  <div aria-hidden="true"
       class="pointer-events-none select-none absolute inset-0 flex items-center justify-center overflow-hidden">
    <span class="font-display font-normal leading-none text-[clamp(200px,40vw,520px)]
                 text-ink opacity-[.035] translate-y-[6%]">
      404
    </span>
  </div>

  {{/* Content */}}
  <div class="relative z-10 flex flex-col items-center">

    {{/* Eyebrow */}}
    <div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-roux mb-8">
      Plate not found
    </div>

    {{/* Headline */}}
    <h1 class="font-display font-normal text-[clamp(40px,6vw,80px)] leading-[0.95] m-0 mb-6 max-w-[14ch]">
      This plate has <em>gone<br/>to press</em>
    </h1>

    {{/* Divider rule */}}
    <div class="w-8 h-px bg-[var(--rule)] mb-6"></div>

    {{/* Body */}}
    <p class="font-serif italic text-[clamp(14px,1.1vw,17px)] leading-[1.65] text-ink-2 max-w-[40ch] m-0 mb-10">
      The photograph you're looking for may have been moved, archived, or perhaps it was never printed.
      One hundred plates remain in the archive — return and find your frame.
    </p>

    {{/* CTAs */}}
    <div class="flex items-center gap-6 flex-wrap justify-center">
      <a href="/"
         class="inline-flex items-center gap-2 px-6 py-3
                bg-roux text-paper
                font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase
                transition-colors duration-200 hover:bg-roux-deep">
        Return to the archive
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
        </svg>
      </a>
      <a href="/issues/{{ .Site.Params.issueNumber }}/"
         class="font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase text-ink-soft
                border-b border-[var(--rule)] pb-px
                transition-colors duration-200 hover:text-ink hover:border-ink">
        Browse issue № {{ .Site.Params.issueNumber }}
      </a>
    </div>

    {{/* Colophon mark */}}
    <div class="mt-14 flex items-center gap-5 text-ink-soft/40">
      <div class="h-px w-12 bg-current"></div>
      <span class="font-serif italic text-[13px] text-ink-soft/50">Roux</span>
      <div class="h-px w-12 bg-current"></div>
    </div>

  </div>
</section>
{{ end }}