{{define "title"}}{{.Headline}} — {{.SiteTitle}}{{end}}

{{define "main"}}
<article class="mt-2 mb-10 max-w-3xl mx-auto">
  <nav class="mb-4">
    <a href="/adventure" class="inline-flex items-center gap-1.5 text-sm font-semibold text-[color:var(--ink)]/60 hover:text-[color:var(--ink)] transition">
      <span aria-hidden="true">←</span> All dispatches
    </a>
  </nav>

  <header class="rounded-3xl bg-theme-adventure text-white p-6 sm:p-10 shadow-pete relative overflow-hidden">
    <div class="absolute -top-6 -right-6 text-[12rem] opacity-20 select-none" aria-hidden="true">{{.Emoji}}</div>
    <div class="relative">
      <p class="text-sm uppercase tracking-[0.2em] opacity-80">{{.Emoji}} {{.EventLabel}}</p>
      <h1 class="font-display text-3xl sm:text-4xl font-bold mt-2 leading-tight">{{.Headline}}</h1>
      <p class="mt-4 text-xs uppercase tracking-wider opacity-75">Reported {{.When}}{{if .Region}} · {{.Region}}{{end}}</p>
    </div>
  </header>

  <div class="mt-8 rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 p-6 sm:p-8 shadow-pete">
    <p class="text-lg leading-relaxed text-[color:var(--ink)]/90 whitespace-pre-line">{{.Body}}</p>
    {{if .RunReportURL}}
    <!-- The way back to what actually happened. This dispatch is the ending of an
         expedition; the report is the expedition. -->
    <a href="{{.RunReportURL}}" class="mt-6 inline-flex items-center gap-2 rounded-2xl bg-theme-adventure text-white px-4 py-2.5 text-sm font-semibold shadow-pete hover:opacity-90 transition">
      <span aria-hidden="true">📜</span> Read the run, room by room <span aria-hidden="true">→</span>
    </a>
    {{end}}
    <p class="mt-8 pt-6 border-t border-[color:var(--ink)]/10 text-sm italic text-theme-adventure font-semibold">
      Reporting from the realm, this is Pete.
    </p>
  </div>
</article>
{{end}}