/* ── Dispatches — shared styles for /dispatch pages ───────────────────
   Kept in its own file rather than inlined, and deliberately NOT shared
   with index.html: pulling the homepage's CSS out into a stylesheet
   would add a render-blocking request to the page that matters most.
   Tokens below mirror :root in index.html — keep them in sync by hand. */

:root {
  --parchment: #f1e7ce;
  --parchment-deep: #e8dcbb;
  --parchment-shadow: #d8c89c;
  --ink: #14110d;
  --ink-soft: #2a241b;
  --ink-mute: #6b5f48;
  --cherry: #a8302a;
  --cherry-deep: #6e1d1a;
  --accent: var(--cherry);
  --gold: #C9A84C;
  --gold-deep: #9B7A28;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 820px; margin: 0 auto; padding: 0 32px; }

/* ── nav — logo returns to the homepage ── */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--parchment);
  border-bottom: 1px solid var(--ink);
}
.nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; flex-direction: column; line-height: 0.9; text-decoration: none; }
.brand-1 { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.02em; color: var(--ink); }
.brand-2 { font-family: "Oswald", sans-serif; font-weight: 500; font-size: 9.06px; letter-spacing: 0.22em; margin-top: 2px; color: var(--ink); white-space: nowrap; }
.nav-cta {
  font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: 12px;
  letter-spacing: 0.16em; font-weight: 600; background: var(--ink); color: var(--parchment);
  padding: 10px 18px; border: 1px solid var(--ink); cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.nav-cta:hover { background: var(--accent); border-color: var(--accent); }

/* ── masthead ── */
.dispatch-head { padding: 64px 0 40px; border-bottom: 1px solid var(--ink); }
.section-tag {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px;
}
h1 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900;
  font-size: clamp(40px, 6vw, 72px); line-height: 0.95; margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.dispatch-sub { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 620px; margin: 0; }

/* ── index listing ── */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-item { border-bottom: 1px solid var(--ink); }
.post-item a {
  display: block; padding: 30px 0; text-decoration: none; color: var(--ink);
  transition: background 0.15s;
}
.post-item a:hover { background: var(--parchment-deep); }
.post-meta {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
}
.post-title {
  font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 3vw, 28px); letter-spacing: 0.01em; line-height: 1.15; margin-bottom: 8px;
}
.post-dek { font-size: 17px; line-height: 1.5; color: var(--ink-soft); max-width: 640px; }

/* ── article body ── */
article { padding: 48px 0 8px; }
article p { font-size: 19px; line-height: 1.65; margin: 0 0 22px; }
article h2 {
  font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 3vw, 30px); letter-spacing: 0.01em; margin: 42px 0 14px;
}
article h3 {
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 17px; letter-spacing: 0.06em; margin: 30px 0 10px;
}
article ul { padding-left: 22px; margin: 0 0 22px; }
article li { font-size: 19px; line-height: 1.6; margin-bottom: 8px; }
article strong { font-weight: 600; }
article a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.data-table { width: 100%; border-collapse: collapse; margin: 26px 0 30px; border: 1px solid var(--ink); }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ink); font-size: 15px; }
.data-table th {
  font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.1em; background: var(--parchment-deep);
}
.data-table td { font-family: "JetBrains Mono", monospace; font-size: 13px; }
.data-table tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

.callout {
  border-left: 3px solid var(--accent); background: var(--parchment-deep);
  padding: 20px 24px; margin: 30px 0;
}
.callout p { margin: 0; font-size: 17px; }

.article-cta {
  border: 1px solid var(--ink); background: var(--parchment-deep);
  padding: 30px 28px; margin: 44px 0 0; text-align: center;
}
.article-cta .k {
  font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 3vw, 26px); margin-bottom: 10px;
}
.article-cta p { font-size: 17px; margin: 0 0 18px; }
.article-cta a {
  display: inline-block; background: var(--ink); color: var(--parchment);
  font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 14px; padding: 15px 30px; text-decoration: none;
  transition: background 0.15s;
}
.article-cta a:hover { background: var(--accent); }

.back-link {
  display: inline-block; margin: 40px 0 0; font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); text-decoration: none;
}
.back-link:hover { color: var(--accent); }

/* ── footer ── */
footer { background: var(--ink); color: #c9bd9e; margin-top: 70px; padding: 50px 0 34px; }
footer .wrap { max-width: 1320px; }
.foot-brand { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 25.3px; line-height: 1; color: var(--parchment); }
.foot-brand-sub { font-family: "Oswald", sans-serif; font-size: 11px; letter-spacing: 0.18em; margin-top: 6px; color: #c9bd9e; white-space: nowrap; }
.foot-links { margin-top: 22px; display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a {
  color: #c9bd9e; text-decoration: none; font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.foot-links a:hover { color: var(--parchment); }
.foot-bottom {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid #3a3329;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8c8169;
}

@media (max-width: 767px), (max-width: 900px) and (max-height: 500px) {
  .wrap { padding: 0 20px; }
  .nav-inner { padding: 12px 20px; }
  .dispatch-head { padding: 40px 0 28px; }
  article p, article li { font-size: 17px; }
  .article-cta { padding: 24px 20px; }
}

/* ── mascot art on the dispatch index ──────────────────────────────
   Same knock-out filter as the homepage. Decorative only, so both are
   pointer-events:none and sit behind the text. */
.dispatch-head { position: relative; }
.bee-top {
  position: absolute; top: -18px; right: -24px;
  width: clamp(110px, 16vw, 190px); height: auto;
  filter: url(#rm-white); transform: scaleX(-1);
  pointer-events: none;
  /* above the sticky nav (z-index 50) — at top:-18px the header was
     painting over the bee's wings and clipping it. */
  z-index: 60;
}
.dispatch-head > *:not(.bee-top) { position: relative; z-index: 1; }

.dispatch-foot-art { position: relative; min-height: 190px; padding-top: 34px; text-align: right; }
.bee-bottom {
  position: absolute; left: -30px; bottom: -14px;
  width: clamp(120px, 18vw, 205px); height: auto;
  filter: url(#rm-white);
  pointer-events: none; z-index: 0;
}
/* right-aligned so it clears the gladiator sitting bottom-left */
.dispatch-foot-art .back-link { position: relative; z-index: 1; margin-top: 96px; }

@media (max-width: 767px), (max-width: 900px) and (max-height: 500px) {
  .bee-top { top: -10px; right: -14px; width: clamp(88px, 26vw, 130px); }
  .bee-bottom { left: -18px; bottom: -8px; width: clamp(96px, 30vw, 140px); }
  .dispatch-foot-art { min-height: 150px; }
  .dispatch-foot-art .back-link { margin-top: 74px; }
}