/* ═══════════════════════════════════════════════════════════════
   THE FOX'S WIRE — newspaper-style stylesheet
   ──────────────────────────────────────────────────────────────
   Mobile-first. Single column at < 1024px (sidebar stacks below
   main content); two-column grid at >= 1024px (sidebar pinned to
   the right at 320px).

   Typography:
   • Headlines: Playfair Display (serif, dramatic weight contrast)
   • Body: Iowan Old Style / Charter / Georgia (already loaded)
   • Eyebrows / bylines: DM Sans uppercase tracked-out

   Palette:
   • Cream paper background (#FBF7E6)
   • Ink (#1A1A1A) body
   • Section accent colours via .wire-tint--{gold,red,emerald,navy,slate}

   Class prefix: .wire-*  (avoids collisions with site-nav, racecard,
   tipping, simulation prefixes already in use elsewhere).
═══════════════════════════════════════════════════════════════ */

.page-news {
  background: var(--c-paper, #FBF7E6);
  color: var(--c-ink, #1A1A1A);
}


/* ── MASTHEAD ────────────────────────────────────────────────── */
.wire-masthead {
  background: #FFFCF3;
  border-bottom: 3px double var(--c-ink, #1A1A1A);
  padding: 18px 0 14px;
}
.wire-masthead__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.wire-masthead__title-link { text-decoration: none; color: inherit; }
.wire-masthead__title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 68px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  display: inline-flex;
  gap: 0.18em;
  align-items: baseline;
}
.wire-masthead__title-the {
  font-style: italic;
  font-weight: 400;
  font-size: 0.55em;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.72));
}
.wire-masthead__title-fox { font-style: italic; }
.wire-masthead__title-wire { letter-spacing: -0.03em; }

.wire-masthead__tagline {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-gold-ink, #6B4F0C);
  margin: 0;
}

.wire-masthead__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.62));
}
.wire-masthead__date { font-weight: 700; }
.wire-masthead__sponsor a {
  color: var(--c-gold-ink, #6B4F0C);
  text-decoration: none;
  font-weight: 700;
}
.wire-masthead__sponsor a:hover { text-decoration: underline; }


/* ── PAGE GRID ──────────────────────────────────────────────────
   Mobile-first: single column. At >= 1024px the sidebar moves to
   the right at a fixed 320px width. We don't use float / flex
   ordering — grid is cleaner and the sidebar stays visually below
   the main content on narrow screens. */
.wire-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .wire-page {
    grid-template-columns: 1fr 320px;
    gap: 48px;
    padding: 36px 24px 72px;
  }
}
.wire-main { min-width: 0; }   /* prevent grid-blowout on long titles */


/* ── SECTION-TINT ACCENTS ──────────────────────────────────── */
/* Used by eyebrows (article cards, lead, article header) and the
   sidebar section links. One rule per tint, two declarations each.
   Gold is the brighter accent shade (#A8791D) — distinct from
   --c-gold-ink (#6B4F0C) which stays muted for body-copy ink
   contexts like CTAs + hover states. */
.wire-tint--gold    { color: #A8791D; }
.wire-tint--red     { color: #B91C1C; }
.wire-tint--emerald { color: #166534; }
.wire-tint--navy    { color: #1E40AF; }
.wire-tint--slate   { color: #475569; }


/* ── SECTION RIBBON ────────────────────────────────────────────
   The labelled bar that separates major tiers on the homepage
   (and the 'Read more' areas on article pages). Newspaper
   convention: a small-caps tracked-out title flanked by ink
   rules so the eye knows the page just changed chapters.

   Two thin horizontal rules stacked 5px apart give the same
   visual weight as a single `3px double` border but feel more
   refined — like a hand-set woodtype dingbat bar.
*/
.wire-ribbon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 22px;
}
.wire-ribbon__title {
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink, #1A1A1A);
}
.wire-ribbon__dash {
  flex: 1;
  height: 5px;
  border-top: 1px solid var(--c-ink, #1A1A1A);
  border-bottom: 1px solid var(--c-ink, #1A1A1A);
}
/* Short dash to the LEFT of the title — gives the ribbon a hint
   of indent without making it a full-bleed banner. */
.wire-ribbon__dash--short {
  flex: 0 0 36px;
}
/* Per-tint title colour. Rules stay ink so the page reads as
   inked-on-paper, not a coloured bar. */
.wire-ribbon--gold    .wire-ribbon__title { color: #A8791D; }
.wire-ribbon--red     .wire-ribbon__title { color: #B91C1C; }
.wire-ribbon--emerald .wire-ribbon__title { color: #166534; }
.wire-ribbon--navy    .wire-ribbon__title { color: #1E40AF; }
.wire-ribbon--slate   .wire-ribbon__title { color: #475569; }


/* ── PULL-QUOTE ───────────────────────────────────────────────
   Big italic-serif breakout with a thick gold left rule and
   decorative quote marks. Used on the homepage lead story (in
   place of the plain deck) and available for inline use inside
   article bodies. The quote marks are CSS-generated so the
   editorial copy stays clean plain text.
*/
.wire-pullquote {
  margin: 14px 0 22px;
  padding: 4px 0 4px 22px;
  border-left: 4px solid var(--c-gold-bright, #D4AF37);
  max-width: 56ch;
}
.wire-pullquote__text {
  margin: 0;
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.35;
  color: var(--c-ink, #1A1A1A);
}
.wire-pullquote__text::before,
.wire-pullquote__text::after {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 1.35em;
  line-height: 0;
  color: var(--c-gold-ink, #6B4F0C);
  vertical-align: -0.18em;
}
.wire-pullquote__text::before { content: "\201C"; margin-right: 0.05em; }
.wire-pullquote__text::after  { content: "\201D"; margin-left: 0.05em; }
.wire-pullquote__attribution {
  display: block;
  margin-top: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.62));
}


/* ── LEAD STORY ──────────────────────────────────────────────── */
.wire-lead {
  border-bottom: 1px solid var(--c-rule, rgba(26, 26, 26, 0.12));
  padding-bottom: 32px;
  margin-bottom: 32px;
}
.wire-lead__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wire-lead__media {
  margin: 0 0 18px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(26, 26, 26, 0.05);
}
.wire-lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wire-lead__eyebrow {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 16px;
  /* Bordered section-bar treatment — matches the article-detail
     eyebrow so every primary section label has the same inked-bar
     newspaper feel. Borders pick up the tint colour via currentColor. */
  padding: 4px 0;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.wire-lead__title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 900;
  font-size: clamp(30px, 5.6vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-ink, #1A1A1A);
  margin: 0 0 14px;
}
.wire-lead__deck {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.4;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.74));
  margin: 0 0 16px;
  max-width: 56ch;
}
.wire-lead__excerpt {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink, #1A1A1A);
  margin: 16px 0;
  max-width: 56ch;
}
.wire-lead__cta {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--c-gold-ink, #6B4F0C);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.wire-lead__link:hover .wire-lead__title { color: var(--c-gold-ink, #6B4F0C); }


/* ── SUB-FEATURE TIER — 3-up row beneath the lead ───────────
   Newspaper convention: a tight row of three secondary
   features that share the lead's editorial weight but at a
   smaller scale. Sits between the full-bleed lead story and
   the regular 'Also in today's edition' grid below.

   Articles surface here by being flagged is_secondary_feature
   in admin. Editor manages two booleans per article — flip
   lead off + secondary on to rotate today's lead into
   tomorrow's sub-feature.

   Layout: single column on mobile, side-by-side at >=720px,
   3-up at >=1024px. Cards are taller than the regular story
   card (image + deck + byline) but shorter than the lead
   (no excerpt body copy). */
.wire-subfeatures {
  margin: 0 0 36px;
  padding-bottom: 32px;
  border-bottom: 3px double var(--c-ink, #1A1A1A);
}
.wire-subfeatures__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .wire-subfeatures__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .wire-subfeatures__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wire-subfeature__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wire-subfeature__media {
  margin: 0 0 14px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(26, 26, 26, 0.05);
}
.wire-subfeature__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.wire-subfeature__link:hover .wire-subfeature__media img {
  transform: scale(1.02);
}
.wire-subfeature__eyebrow {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
  /* Matching bordered section-bar — smaller scale than the lead. */
  padding: 3px 0;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.wire-subfeature__title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 27px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-ink, #1A1A1A);
  margin: 0 0 10px;
}
.wire-subfeature__link:hover .wire-subfeature__title {
  color: var(--c-gold-ink, #6B4F0C);
}
.wire-subfeature__deck {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.72));
  margin: 0 0 12px;
}
.wire-subfeature__byline {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--c-ink-40, rgba(26, 26, 26, 0.5));
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wire-subfeature__dot { margin: 0 2px; }


/* ── 'ALSO IN' SECONDARY GRID ──────────────────────────────── */
/* The labelled header now comes from _section_ribbon.html so the
   chapter-marker styling is consistent across every tier. */
.wire-also { margin-bottom: 32px; }
.wire-also__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 540px) {
  .wire-also__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wire-also__grid { grid-template-columns: repeat(3, 1fr); }
}


/* ── STORY CARD (reused on homepage + category + related) ─── */
.wire-card {
  border-top: 1px solid var(--c-rule, rgba(26, 26, 26, 0.12));
  padding-top: 18px;
}
.wire-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wire-card__media {
  margin: 0 0 14px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(26, 26, 26, 0.05);
}
.wire-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wire-card__eyebrow {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 10px;
  /* Matching bordered section-bar — smallest scale on the
     'Also in today's edition' grid + category pages. */
  padding: 2.5px 0;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.wire-card__title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--c-ink, #1A1A1A);
  margin: 0 0 10px;
}
.wire-card__link:hover .wire-card__title { color: var(--c-gold-ink, #6B4F0C); }
.wire-card__excerpt {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.72));
  margin: 0 0 12px;
}
.wire-card__byline {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-ink-40, rgba(26, 26, 26, 0.5));
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wire-card__dot { margin: 0 2px; }


/* ── BYLINE (lead story + article page) ───────────────────── */
.wire-byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.65));
  margin-bottom: 14px;
}
.wire-byline__avatar {
  font-size: 16px;
  line-height: 1;
}
.wire-byline strong { color: var(--c-ink, #1A1A1A); font-weight: 700; }
.wire-byline__dot { color: var(--c-ink-40, rgba(26, 26, 26, 0.35)); }
.wire-byline__read { color: var(--c-ink-40, rgba(26, 26, 26, 0.5)); }


/* ── FOX'S DESK PANEL ──────────────────────────────────────── */
/* Chapter marker is the shared _section_ribbon.html partial with
   tint="red" — see .wire-ribbon above. */
.wire-foxs-desk {
  border-top: 3px double var(--c-ink, #1A1A1A);
  border-bottom: 1px solid var(--c-rule, rgba(26, 26, 26, 0.12));
  padding: 26px 0;
  margin: 32px 0;
}
.wire-foxs-desk__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wire-foxs-desk__title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.1;
  margin: 0 0 8px;
}
.wire-foxs-desk__deck {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-size: 16px;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.72));
  margin: 0 0 12px;
  max-width: 56ch;
}
.wire-foxs-desk__cta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--c-gold-ink, #6B4F0C);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}


/* ── SIDEBAR ───────────────────────────────────────────────── */
.wire-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}


/* ── ISSUE INDEX — the 'In this issue' section directory ───
   Newspaper-style branded contents panel. Each row gets:
   • a tinted left bar (4px solid, picks up category tint)
   • a section number (§1, §2 …) in italic Playfair
   • the section name in serif 800 (bigger than a normal link)
   • a count chip showing published article count
   • an optional one-line description in italic serif

   This replaces the old plain-text section list which read as
   too understated for a Page-1 contents panel. The whole thing
   sits in a cream-paper box with double-ink top + bottom rules
   so it reads as "this is the newspaper's contents", not "this
   is a CMS menu". */
.wire-issue-index {
  background: #FFFCF3;
  border-top:    3px double var(--c-ink, #1A1A1A);
  border-bottom: 3px double var(--c-ink, #1A1A1A);
}
.wire-issue-index__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--c-rule-strong, rgba(26, 26, 26, 0.18));
}
.wire-issue-index__dingbat {
  font-size: 16px;
  line-height: 1;
  color: var(--c-gold-bright, #D4AF37);
}
.wire-issue-index__title {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-ink, #1A1A1A);
  white-space: nowrap;
}

.wire-issue-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wire-issue-index__item {
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  border-left:   4px solid currentColor;   /* tint stripe — colour set by .wire-tint-bar--* */
  transition: background 0.18s ease;
}
.wire-issue-index__item:last-child { border-bottom: 0; }
.wire-issue-index__item:hover     { background: rgba(212, 175, 55, 0.08); }

/* Tint-stripe colour. Separate class from .wire-tint--* because
   the link content keeps its own colour stack; only the LI
   border-left picks up this currentColor. */
.wire-tint-bar--gold    { color: #A8791D; }
.wire-tint-bar--red     { color: #B91C1C; }
.wire-tint-bar--emerald { color: #166534; }
.wire-tint-bar--navy    { color: #1E40AF; }
.wire-tint-bar--slate   { color: #475569; }

.wire-issue-index__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 4px 10px;
  padding: 13px 14px;
  text-decoration: none;
  color: inherit;
}
.wire-issue-index__num {
  grid-column: 1;
  grid-row: 1;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-ink-40, rgba(26, 26, 26, 0.42));
}
.wire-issue-index__name {
  grid-column: 2;
  grid-row: 1;
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-ink, #1A1A1A);
}
.wire-issue-index__count {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  min-width: 24px;
  padding: 3px 8px;
  background: var(--c-ink, #1A1A1A);
  color: var(--c-paper, #FBF7E6);
  border-radius: 3px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.2;
}
.wire-issue-index__desc {
  grid-column: 2 / -1;
  grid-row: 2;
  margin-top: 4px;
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.62));
}

.wire-issue-index__link:hover .wire-issue-index__name {
  color: var(--c-gold-ink, #6B4F0C);
}
.wire-issue-index__link:hover .wire-issue-index__count {
  background: var(--c-gold-ink, #6B4F0C);
}


/* ── SIDEBAR WIDGETS (auto-populated data panels) ──────────── */
.wire-widget {
  background: #FFFCF3;
  border: 1px solid var(--c-rule, rgba(26, 26, 26, 0.10));
  border-radius: 8px;
  padding: 16px 14px;
}
.wire-widget__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-rule, rgba(26, 26, 26, 0.10));
}
.wire-widget__icon {
  font-size: 16px;
  line-height: 1;
}
.wire-widget__title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink, #1A1A1A);
  margin: 0;
  flex: 1;
}
.wire-widget__live {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 2px 6px;
  background: linear-gradient(135deg, #B91C1C 0%, #7F1717 100%);
  color: #FFF7E1;
  border-radius: 2px;
}
.wire-widget--horses .wire-widget__live {
  background: linear-gradient(135deg, #F5D04A 0%, #D4AF37 100%);
  color: #1A2233;
}
.wire-widget--jockeys .wire-widget__live {
  background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%);
  color: #fff;
}

.wire-widget__group { margin-bottom: 10px; }
.wire-widget__group:last-child { margin-bottom: 0; }
.wire-widget__group-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.wire-widget__group-title--in  { color: #166534; }
.wire-widget__group-title--out { color: #B91C1C; }

.wire-widget__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wire-widget__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}
.wire-widget__item:first-child { border-top: 0; padding-top: 4px; }
.wire-widget__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.wire-widget__link:hover .wire-widget__horse {
  color: var(--c-gold-ink, #6B4F0C);
}
.wire-widget__horse {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--c-ink, #1A1A1A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wire-widget__meta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--c-ink-40, rgba(26, 26, 26, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wire-widget__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.18);
  color: var(--c-gold-ink, #6B4F0C);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}
.wire-widget__item--rank .wire-widget__horse { flex: 1; }
.wire-widget__count {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-ink-40, rgba(26, 26, 26, 0.55));
  white-space: nowrap;
}
.wire-widget__sr {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  background: rgba(212, 175, 55, 0.18);
  color: var(--c-gold-ink, #6B4F0C);
  border-radius: 4px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.wire-widget__cta {
  display: inline-block;
  margin-top: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-gold-ink, #6B4F0C);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}


/* ── SPONSOR SLOT ──────────────────────────────────────────── */
.wire-sponsor {
  background: #FFFCF3;
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 8px;
  padding: 16px;
  position: relative;
}
.wire-sponsor__label {
  position: absolute;
  top: -8px;
  left: 12px;
  background: #FFFCF3;
  padding: 0 8px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-40, rgba(26, 26, 26, 0.45));
}
.wire-sponsor__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wire-sponsor__image {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  border-radius: 4px;
}
.wire-sponsor__headline {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  color: var(--c-ink, #1A1A1A);
  margin-bottom: 6px;
}
.wire-sponsor__body {
  display: block;
  font-family: 'Iowan Old Style', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.7));
  margin-bottom: 12px;
}
.wire-sponsor__cta {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-gold-ink, #6B4F0C);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
/* Hero sponsor — full-width band just below the masthead. */
.wire-sponsor--hero {
  margin: 0 auto 0;
  max-width: 1280px;
  padding: 18px 20px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--c-rule, rgba(26, 26, 26, 0.10));
  border-top: 1px solid var(--c-rule, rgba(26, 26, 26, 0.10));
  text-align: center;
}
.wire-sponsor--footer {
  margin: 32px auto 0;
  max-width: 1280px;
  text-align: center;
}


/* ══════════════════════════════════════════════════════════════
   ARTICLE DETAIL PAGE
   ══════════════════════════════════════════════════════════════ */

.wire-page--article .wire-article { min-width: 0; }

/* ── ARTICLE HEADER — newspaper-grade hierarchy ──────────────
   Double rule below (newspaper-page-break convention), aggressive
   weight contrast between title/deck/byline, and a tracked-out
   eyebrow that feels like a section label, not a tag.
*/
.wire-article__head {
  border-bottom: 3px double var(--c-ink, #1A1A1A);
  padding-bottom: 26px;
  margin-bottom: 28px;
}
.wire-article__eyebrow {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 16px;
  text-decoration: none;
  padding: 3px 0;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.wire-article__eyebrow:hover { text-decoration: none; opacity: 0.75; }

.wire-article__title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 20ch;
  /* Subtle ink-stamped feel — slightly desaturates the deepest
     shadows so the title reads as inked-on-paper rather than CGI. */
  color: var(--c-ink, #161616);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}
.wire-article__deck {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-style: italic;
  font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.35;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.78));
  margin: 0 0 22px;
  max-width: 58ch;
}

.wire-article__media {
  margin: 0 0 24px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(26, 26, 26, 0.05);
}
.wire-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wire-article__media figcaption {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--c-ink-40, rgba(26, 26, 26, 0.55));
  padding: 8px 4px 0;
}

/* ── ARTICLE BODY — proper newspaper typography ──────────────
   Body is set in serif at 18px with 1.75 leading so long pieces
   stay readable but feel inked. text-rendering + kerning hints
   pull the type tighter without losing readability.

   The drop cap on the first paragraph is the marquee newspaper
   touch — 5.5em high, gold ink, hangs three lines into the
   body. Implemented via `:first-of-type` so it lands on the
   first <p> even when an <h2> subhead appears earlier in the
   block stream.
*/
.wire-article__body {
  max-width: 62ch;
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--c-ink, #1A1A1A);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}
.wire-article__p {
  margin: 0 0 1.25em;
}
/* Drop cap on the FIRST paragraph (works even if a heading
   precedes it — `:first-of-type` matches the first <p> child,
   not the first child overall). */
.wire-article__body > .wire-article__p:first-of-type::first-letter {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 5.5em;
  float: left;
  line-height: 0.78;
  padding: 0.04em 0.10em 0 0;
  color: var(--c-gold-ink, #6B4F0C);
  /* Faint ink press — gives the cap a hand-set wood-type feel
     instead of looking pixel-sharp. */
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.04);
}

/* ── SUBHEADS — '## ' lines in the body ───────────────────────
   Newspaper sub-deck style: smaller serif, all-caps would be
   overkill so we leave case alone, tracked-out by a hair, and
   set a thin rule below so each new section breaks the body
   visibly without breaking the page rhythm. */
.wire-article__h2 {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--c-ink, #1A1A1A);
  margin: 2em 0 0.7em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-rule-strong, rgba(26, 26, 26, 0.20));
  max-width: 56ch;
}
/* First subhead after the body opens — tighter top margin so
   it doesn't push the drop-cap paragraph off-balance. */
.wire-article__body > .wire-article__h2:first-child {
  margin-top: 0;
}

/* ── SUB-SUBHEADS — '### ' lines in the body ──────────────── */
.wire-article__h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-gold-ink, #6B4F0C);
  margin: 1.6em 0 0.5em;
  padding-bottom: 4px;
}

.wire-article__related-race {
  margin: 28px 0;
  padding: 16px 18px;
  background: #FFFCF3;
  border-left: 4px solid var(--c-gold-bright, #D4AF37);
  border-radius: 4px;
}
.wire-article__related-race-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  text-decoration: none;
  color: inherit;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
}
.wire-article__related-race-link strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
}
.wire-article__related-race-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-ink, #6B4F0C);
  flex-basis: 100%;
}

.wire-article__foot {
  margin-top: 36px;
  border-top: 1px solid var(--c-rule, rgba(26, 26, 26, 0.12));
  padding-top: 24px;
}
.wire-article__author-bio {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.wire-article__author-avatar {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.wire-article__author-bio strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 800;
}
.wire-article__author-bio p {
  margin: 4px 0 0;
  font-family: 'Iowan Old Style', Georgia, serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.72));
}


/* ── RELATED GRID (article foot) ───────────────────────────── */
.wire-related {
  margin-top: 40px;
  border-top: 3px double var(--c-ink, #1A1A1A);
  padding-top: 24px;
}
.wire-related__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 18px;
}
.wire-related__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 540px) {
  .wire-related__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ══════════════════════════════════════════════════════════════
   CATEGORY LANDING PAGE
   ══════════════════════════════════════════════════════════════ */

.wire-cat-head {
  border-bottom: 3px double var(--c-ink, #1A1A1A);
  padding-bottom: 20px;
  margin-bottom: 28px;
}
.wire-cat-head__eyebrow {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.wire-cat-head__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.wire-cat-head__description {
  font-family: 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.72));
  margin: 0;
  max-width: 60ch;
}

/* Fluid grid — auto-fills the available column width with cards
   of at least 280px. On a wide main column you'll see 3 across;
   on a tablet 2; on a phone 1. Gives every category page a
   consistent visual rhythm regardless of article count. */
.wire-cat-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}


/* ── Category lead feature — the editorial 'top story' card on a
   category landing page. Side-by-side image + body on tablet+,
   stacked on mobile. Larger headline / longer excerpt than a
   normal story card so single-article sections don't read as
   a lonely thin column. */
.wire-cat-feature {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 3px double var(--c-ink, #1A1A1A);
}
.wire-cat-feature__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wire-cat-feature__media {
  margin: 0 0 18px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(26, 26, 26, 0.05);
}
.wire-cat-feature__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.wire-cat-feature__body { min-width: 0; }
.wire-cat-feature__title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 900;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-ink, #1A1A1A);
  margin: 0 0 12px;
  max-width: 22ch;
}
.wire-cat-feature__deck {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.4;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.74));
  margin: 0 0 14px;
  max-width: 56ch;
}
.wire-cat-feature__excerpt {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-size: 16px;
  line-height: 1.65;
  margin: 14px 0;
  max-width: 56ch;
  color: var(--c-ink, #1A1A1A);
}
.wire-cat-feature__cta {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--c-gold-ink, #6B4F0C);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.wire-cat-feature__link:hover .wire-cat-feature__title {
  color: var(--c-gold-ink, #6B4F0C);
}
/* Side-by-side image + body when there's room. Image on the left
   at ~45% of the feature width, body fills the rest. */
@media (min-width: 720px) {
  .wire-cat-feature__link {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 26px;
    align-items: start;
  }
  .wire-cat-feature__media { margin: 0; }
  /* No image? body uses full width, kept readable via title max-width. */
  .wire-cat-feature__link:not(:has(.wire-cat-feature__media)) {
    display: block;
  }
}

.wire-cat-empty {
  font-family: 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.6));
  padding: 24px;
  text-align: center;
}


/* ── PAGER ─────────────────────────────────────────────────── */
.wire-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--c-rule, rgba(26, 26, 26, 0.12));
}
.wire-pager__btn {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-gold-ink, #6B4F0C);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--c-gold-ink, #6B4F0C);
  border-radius: 4px;
  transition: background 0.15s;
}
.wire-pager__btn:hover {
  background: rgba(212, 175, 55, 0.10);
}
.wire-pager__btn--disabled {
  color: var(--c-ink-40, rgba(26, 26, 26, 0.35));
  border-color: var(--c-ink-40, rgba(26, 26, 26, 0.20));
  cursor: not-allowed;
}
.wire-pager__indicator {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.6));
  letter-spacing: 0.05em;
}