/* ═══════════════════════════════════════════════════════════════
   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);

  /* Vertical rhythm tokens — section > card > tight. Use these
     instead of inline pixel values so the page reads in three
     clear scales: page sections, items inside a grid, and chip-
     adjacent micro-spacing. */
  --space-section: 56px;
  --space-card: 28px;
  --space-tight: 16px;
}


/* ── 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 */


/* ── BACK-TO-NEWS PILL ─────────────────────────────────────
   Shown at the top of category landing pages + article detail
   pages. Pill shape (border-radius: 999px), cream-paper bg with
   a gold-ink chevron + nudge animation on hover. Sits at the
   top of the main column so a reader can return to the Wire
   homepage in one click without going via the site nav.
*/
.wire-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 7px 16px 7px 12px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink, #1A1A1A);
  text-decoration: none;
  background: #FFFCF3;
  border: 1px solid var(--c-rule-strong, rgba(26, 26, 26, 0.18));
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.wire-back:hover,
.wire-back:focus-visible {
  background: rgba(212, 175, 55, 0.14);
  color: var(--c-gold-ink, #6B4F0C);
  border-color: var(--c-gold-ink, #6B4F0C);
  outline: 0;
}
.wire-back__arrow {
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.18s ease;
}
.wire-back:hover .wire-back__arrow,
.wire-back:focus-visible .wire-back__arrow {
  transform: translateX(-3px);
}


/* ── 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: var(--space-card);
  margin-bottom: var(--space-section);
}
.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: 900;
  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 var(--space-section);
}
.wire-subfeatures__grid {
  display: grid;
  gap: var(--space-card);
  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: 900;
  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;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(26, 26, 26, 0.62);
  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: var(--space-section); }
.wire-also__grid {
  display: grid;
  gap: var(--space-card);
  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) ─── */
/* No top-rule: the grid gap + the card's bordered eyebrow give a
   clean top edge without competing with the section ribbon's own
   dashes immediately above. */
.wire-card {
  padding-top: 0;
}
.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: 900;
  letter-spacing: 0.22em;
  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;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(26, 26, 26, 0.62);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wire-card__dot {
  margin: 0 2px;
  color: rgba(26, 26, 26, 0.32);
}


/* ── 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 {
  padding: 8px 0 26px;
  margin: var(--space-section) 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);
}

/* ── INLINE HORSE LINKS — [[Horse Name]] markers ──────────
   Resolved: subtle gold dashed underline; on hover the link
   darkens to ink and the dash becomes a solid bar. Unresolved
   (typo / horse not yet in the DB): muted ink with a dotted
   underline + 'help' cursor so the editor sees the chip without
   the page looking broken. Inline pseudo-elements would have
   given the same effect, but a plain <a class="..."> is more
   robust for screen readers + keyboard navigation. */
.wire-horse-link {
  color: var(--c-gold-ink, #6B4F0C);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-bottom-style 0.15s ease;
}
.wire-horse-link:hover,
.wire-horse-link:focus-visible {
  color: var(--c-ink, #1A1A1A);
  border-bottom-style: solid;
  outline: 0;
}
.wire-horse-link--unresolved {
  color: var(--c-ink-70, rgba(26, 26, 26, 0.55));
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.wire-horse-link--unresolved:hover {
  color: var(--c-ink, #1A1A1A);
}


/* ── 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;
}


/* ══════════════════════════════════════════════════════════════
   FEATURED PIN INTEGRATION (C4)
   Two surfaces:
   1. .wire-pin-hero — full-width teaser above the lead story
      on /news/. Dark cinematic band to set apart from the
      newspaper editorial below.
   2. .wire-widget--pin — sidebar widget (sits alongside Market
      Movers / Horses to Watch, not replacing them).
   ══════════════════════════════════════════════════════════════ */

/* ── Pin hero teaser (above the lead story) ────────────── */
.wire-pin-hero {
  margin: 0 0 24px;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 90% 30%, rgba(192, 57, 43, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 80%, rgba(212, 175, 55, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, #0A0E1A 0%, #1A2233 100%);
  color: #F5F2E9;
  position: relative;
}
.wire-pin-hero__link {
  display: block;
  padding: 24px 28px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.wire-pin-hero__link:hover {
  transform: translateY(-1px);
}
.wire-pin-hero__eyebrow {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #D4AF37;
  margin-bottom: 10px;
}
.wire-pin-hero__title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #F5F2E9;
  margin: 0 0 10px;
  text-wrap: balance;
}
.wire-pin-hero__deck {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(245, 242, 233, 0.78);
  margin: 0 0 12px;
  max-width: 60ch;
}
.wire-pin-hero__meta {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 242, 233, 0.55);
  margin: 0 0 16px;
}
.wire-pin-hero__cta {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #D4AF37;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.15s ease;
}
.wire-pin-hero__link:hover .wire-pin-hero__cta {
  color: #F5F2E9;
}


/* ── Corner sticker cluster (Pin + Letters) ──────────────
   Anchored inside the lead article card (position:relative on
   .wire-mosaic-card--hero). Both stickers sit ON the top-right
   corner of the card, side-by-side, with the Letters slightly
   overlapping the Pin's left edge for the "cluster" feel. */
.corner-cluster {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  z-index: 3;
  pointer-events: none;
}
.corner-sticker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  text-decoration: none;
  pointer-events: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
  transition: transform 0.35s cubic-bezier(0.22, 0.94, 0.32, 1), filter 0.35s ease;
  will-change: transform;
}
.corner-sticker--letter { transform: rotate(-6deg); width: 86px; height: 86px; margin-right: -26px; margin-top: 12px; order: 1; }
.corner-sticker--pin    { transform: rotate(6deg); order: 2; }
/* When both are present, nudge the Pin slightly down so the two
   stickers "hang" together off the top-right corner. */
.corner-cluster--pair .corner-sticker--pin { margin-top: 2px; }
.corner-sticker:hover,
.corner-sticker:focus-visible {
  transform: rotate(0deg) scale(1.05);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.35));
}
.corner-sticker:focus-visible { outline: none; }
.corner-sticker__burst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.corner-sticker__stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 8px;
  text-align: center;
}
.corner-sticker__eyebrow {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 3px;
}
.corner-sticker__label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.corner-sticker__kicker {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.corner-sticker__meta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.corner-sticker--pin {
  color: #F5F2E9;
}
.corner-sticker--pin .corner-sticker__eyebrow { color: #D4AF37; }
.corner-sticker--pin .corner-sticker__kicker  { background: rgba(212, 175, 55, 0.18); color: #F2E3A3; }
.corner-sticker--letter {
  color: #FBF5E3;
}
.corner-sticker--letter .corner-sticker__eyebrow { color: #C7D9B2; }
.corner-sticker--letter .corner-sticker__kicker  { background: rgba(232, 221, 192, 0.18); color: #E8DDC0; }

/* Sub-desktop: shrink both slightly, keep the cluster inside the card corner. */
@media (max-width: 1080px) {
  .corner-cluster { top: 10px; right: 10px; }
  .corner-sticker { width: 86px; height: 86px; }
  .corner-sticker--letter { width: 76px; height: 76px; margin-right: -22px; }
  .corner-sticker__label { font-size: 15px; }
}

/* Mobile: pull the cluster out of the overlay entirely and let it
   sit as a normal row above the lead so it never covers the headline. */
@media (max-width: 720px) {
  .corner-cluster {
    position: static;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    margin: 12px 0;
  }
  .corner-sticker { width: 78px; height: 78px; margin: 0; transform: rotate(-3deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); }
  .corner-sticker--letter { transform: rotate(3deg); width: 78px; height: 78px; }
  .corner-sticker__meta { display: none; }
  .corner-sticker__label { font-size: 14px; }
}

/* Sidebar Pin widget ─────────────────────────────────── */
.wire-widget--pin {
  background: linear-gradient(180deg,
    rgba(212, 175, 55, 0.10) 0%,
    #FFFCF3 30%);
  border: 1px solid rgba(212, 175, 55, 0.35);
}
.wire-widget-pin__link {
  display: block;
  padding: 4px 0 12px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--c-rule, rgba(26, 26, 26, 0.10));
  margin-bottom: 10px;
}
.wire-widget-pin__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--c-ink, #1A1A1A);
  margin: 0 0 6px;
  transition: color 0.15s ease;
}
.wire-widget-pin__link:hover .wire-widget-pin__title {
  color: var(--c-gold-ink, #6B4F0C);
}
.wire-widget-pin__deck {
  font-family: 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-ink-70, rgba(26, 26, 26, 0.72));
  margin: 0 0 8px;
}
.wire-widget-pin__meta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-40, rgba(26, 26, 26, 0.55));
}


/* ── Related-Pin chip on the article detail page ───────── */
.wire-article__related-pin {
  margin: 24px 0 28px;
  padding: 14px 18px;
  background: linear-gradient(135deg,
    rgba(212, 175, 55, 0.10) 0%,
    rgba(192, 57, 43, 0.06) 100%);
  border-left: 4px solid #D4AF37;
  border-radius: 4px;
}
.wire-article__related-pin-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  text-decoration: none;
  color: inherit;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.wire-article__related-pin-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #9C7B12;
  flex-basis: 100%;
}
.wire-article__related-pin-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--c-ink, #1A1A1A);
  letter-spacing: -0.01em;
  flex: 1;
}
.wire-article__related-pin-arrow {
  font-size: 18px;
  color: #9C7B12;
  font-weight: 800;
}
.wire-article__related-pin:hover .wire-article__related-pin-title {
  color: #9C7B12;
}


/* ──────────────────────────────────────────────────────────────────
   THE PUBLICATION SHELF (Fox's Wire masthead)

   One component, three personas. Every product surfaced in the
   Fox's Wire masthead pills row — LLaMa Letters, LLaMa's Bet of
   the Day, Sly Man's Treble — uses the same .wire-shelf-card
   structure. Persona identity is carried by four touchpoints,
   all driven by --shelf-accent on the modifier class:

     • avatar portrait (real WEBP — see the per-template <img>)
     • avatar ring colour
     • eyebrow text colour
     • right-arrow colour

   Everything else — paper background, ink-cream border, typography,
   hover state, mobile stack — is shared. Adding a fourth product
   is one new --modifier class with an accent colour.

   Lives in news.css (not in each app's CSS) because all three
   emblems are surfaced on /news/ pages — cache window is warm
   here on every page load.
   ────────────────────────────────────────────────────────── */

.wire-masthead__pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px auto 0;
  max-width: 980px;
  padding: 0 16px;
}

.wire-shelf-card {
  --shelf-accent: #8B5E1A;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  background: #FBF7EA;
  border: 1px solid #E5DCC0;
  border-radius: 14px;
  text-decoration: none;
  color: #1f1d18;
  font-family: "DM Sans", "Inter", sans-serif;
  min-width: 0;
  transition: transform 200ms ease,
              background 200ms ease,
              border-color 200ms ease;
}
.wire-shelf-card:hover,
.wire-shelf-card:focus-visible {
  transform: translateY(-2px);
  background: #FDFAF0;
  border-color: var(--shelf-accent);
  outline: none;
  text-decoration: none;
}

.wire-shelf-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--shelf-accent);
  background: #fff;
  flex: 0 0 auto;
  object-fit: cover;
  display: block;
}

.wire-shelf-card__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.wire-shelf-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shelf-accent);
}
.wire-shelf-card__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #1f1d18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wire-shelf-card__meta {
  font-size: 11px;
  font-weight: 600;
  color: #6b6157;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wire-shelf-card__arrow {
  font-size: 18px;
  font-weight: 700;
  color: var(--shelf-accent);
  flex: 0 0 auto;
  transition: transform 200ms ease;
}
.wire-shelf-card:hover .wire-shelf-card__arrow,
.wire-shelf-card:focus-visible .wire-shelf-card__arrow {
  transform: translateX(4px);
}

/* Result chip — appears in the meta line once a bet / treble
   settles. Shape is shared, palette swaps per outcome. */
.wire-shelf-card__chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: #1f1d18;
  margin-left: 2px;
}
.wire-shelf-card__chip--win  { background: rgba(36, 122, 79, 0.14); color: #1d6a45; }
.wire-shelf-card__chip--lost { background: rgba(180, 60, 60, 0.14); color: #8a3030; }
.wire-shelf-card__chip--void { background: rgba(120, 120, 120, 0.14); color: #555; }

/* Persona accents — one var per persona, the rest of the
   component picks it up via var(--shelf-accent). Sly Man owns
   two products (the daily Bet of the Day and the long-odds
   Treble); both use --sly so they read as one product line. */
.wire-shelf-card--llama { --shelf-accent: #5A7860; }
.wire-shelf-card--sly   { --shelf-accent: #8B5E1A; }

@media (max-width: 720px) {
  .wire-masthead__pills {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 12px;
  }
}

/* ── Sidebar "THIS WEEK" entry ────────────────────────── */
.wire-issue-index__item--newsletter {
  /* Pinned to top, gold accent rail to read as "the editorial
     event of the week" rather than a regular index row. */
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.10), transparent 75%);
  border-left: 4px solid #d4af37;
  margin: 0 0 4px;
}
.wire-issue-index__item--newsletter .wire-issue-index__link {
  padding-left: 14px;
}
.wire-issue-index__num--newsletter {
  background: linear-gradient(180deg, #e8c558, #d4af37);
  color: #0b0e15;
  font-weight: 900;
}
.wire-issue-index__count--newsletter {
  background: #0b0e15;
  color: #d4af37;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  padding: 3px 7px;
  border-radius: 999px;
  width: fit-content;
}
.wire-issue-index__item--newsletter .wire-issue-index__name {
  font-weight: 800;
  color: #0b0e15;
}

/* ═════════════════════════════════════════════════════════════
   Motion polish (PR5).

   Cards + rail blocks start invisible with a small downward
   translate, then fade up + slide into place when wire_motion.js
   observes them entering the viewport (per-index stagger). The
   reveal is one-shot per element — the observer detaches as soon
   as a card hits is-revealed.

   Honours prefers-reduced-motion: both the keyframe and the
   reveal transition collapse to instant on users who've asked
   for it. The JS also short-circuits to "reveal everything now".
   ════════════════════════════════════════════════════════════ */
.wire-mosaic-card,
.wire-rail__block {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s ease,
              border-color 0.18s ease;
}
.wire-mosaic-card.is-revealed,
.wire-rail__block.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .wire-mosaic-card,
  .wire-rail__block {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hero photo gentle Ken Burns — slow scale loop adds breath to
   the cinematic lead image without distracting from the headline.
   Transform-origin tilts toward the right so the body copy on the
   left stays in frame as the photo expands. */
@keyframes wire-hero-kenburns {
  0%   { transform: scale(1.0)  translateX(0); }
  50%  { transform: scale(1.04) translateX(-6px); }
  100% { transform: scale(1.0)  translateX(0); }
}
.wire-mosaic-card__media--hero img {
  animation: wire-hero-kenburns 28s ease-in-out infinite;
  transform-origin: center right;
}
@media (prefers-reduced-motion: reduce) {
  .wire-mosaic-card__media--hero img { animation: none; }
}

/* ═════════════════════════════════════════════════════════════
   Front-page mosaic — single ranked layout, size carries the
   ordering signal. Replaces the legacy lead + sub-features grid
   + "Also in today's edition" grid stack on /news/.

   Grid: 12 columns desktop, 6 cols at ≤999px, 1 col at ≤599px.

   Card sizes:
     hero    span 12  — lead story, big photo + huge headline
     medium  span 4   — sub-features, 3 across
     compact span 3   — text-only, 4 across, no photo
     break   span 8   — Fox's Desk feature, red-accented pull-quote
   ════════════════════════════════════════════════════════════ */
.wire-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.2vw, 36px);
  margin: 24px 0 48px;
}
.wire-mosaic-card--hero    { grid-column: span 12; }
.wire-mosaic-card--medium  { grid-column: span 4; }
.wire-mosaic-card--compact { grid-column: span 3; }
.wire-mosaic-card--break   { grid-column: span 8; }

@media (max-width: 999px) {
  .wire-mosaic { grid-template-columns: repeat(6, 1fr); gap: 24px; }
  .wire-mosaic-card--hero    { grid-column: span 6; }
  .wire-mosaic-card--medium  { grid-column: span 3; }
  .wire-mosaic-card--compact { grid-column: span 3; }
  .wire-mosaic-card--break   { grid-column: span 6; }
}
@media (max-width: 599px) {
  .wire-mosaic { grid-template-columns: 1fr; gap: 20px; }
  .wire-mosaic-card--hero,
  .wire-mosaic-card--medium,
  .wire-mosaic-card--compact,
  .wire-mosaic-card--break { grid-column: span 1; }
}

/* ── Base card ─────────────────────────────────────────────── */
.wire-mosaic-card {
  display: block;
  background: var(--c-paper, #FBF7EF);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.wire-mosaic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px rgba(15, 23, 42, 0.20);
  border-color: rgba(15, 23, 42, 0.18);
}
.wire-mosaic-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.wire-mosaic-card__media {
  position: relative;
  overflow: hidden;
  background: #1c2030;
}
.wire-mosaic-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.wire-mosaic-card:hover .wire-mosaic-card__media img {
  transform: scale(1.03);
}
.wire-mosaic-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  flex: 1;
}
.wire-mosaic-card__eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-stretch: 85%;
}
.wire-mosaic-card__title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  color: #0b0e15;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.022em;
}
.wire-mosaic-card:hover .wire-mosaic-card__title {
  color: var(--c-gold-ink, #6B4F0C);
}
.wire-mosaic-card__deck {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.72);
  margin: 0;
}
.wire-mosaic-card__byline {
  margin-top: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
}
.wire-mosaic-card__dot { color: rgba(15, 23, 42, 0.35); }
.wire-mosaic-card__cta {
  margin-top: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-gold-ink, #6B4F0C);
}

/* ── Hero variant ──────────────────────────────────────────── */
.wire-mosaic-card--hero {
  background: #0b0e15;
  color: #fff;
  border: none;
  border-radius: 6px;
  position: relative;
}
.wire-mosaic-card--hero .wire-mosaic-card__link {
  flex-direction: row;
  align-items: stretch;
}
.wire-mosaic-card__media--hero {
  flex: 1.2;
  min-height: 360px;
}
.wire-mosaic-card__body--hero {
  flex: 1;
  padding: clamp(24px, 3vw, 44px);
  justify-content: center;
  background: linear-gradient(135deg, #0b0e15 0%, #11151f 100%);
}
.wire-mosaic-card__title--hero {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.04;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.028em;
}
.wire-mosaic-card:hover .wire-mosaic-card__title--hero {
  color: var(--c-gold, #D4AF37);
}
.wire-mosaic-card__deck--hero {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.45;
}
.wire-mosaic-card--hero .wire-mosaic-card__eyebrow {
  color: var(--c-gold, #D4AF37);
}
.wire-mosaic-card--hero .wire-mosaic-card__cta {
  color: var(--c-gold, #D4AF37);
  font-size: 14px;
}
.wire-mosaic-card--hero .wire-byline,
.wire-mosaic-card--hero .wire-byline__text {
  color: rgba(255, 255, 255, 0.65);
}
.wire-mosaic-card--hero .wire-byline__text strong {
  color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 799px) {
  .wire-mosaic-card--hero .wire-mosaic-card__link { flex-direction: column; }
  .wire-mosaic-card__media--hero { min-height: 220px; flex: 0 0 auto; }
}

/* ── Medium variant ────────────────────────────────────────── */
.wire-mosaic-card__media--medium {
  aspect-ratio: 16 / 9;
}
.wire-mosaic-card__title--medium {
  font-size: clamp(18px, 1.6vw, 22px);
}

/* ── Compact variant — no photo, text-only ─────────────────── */
.wire-mosaic-card--compact {
  background: transparent;
  border: none;
  border-top: 2px solid rgba(15, 23, 42, 0.10);
  border-radius: 0;
  padding-top: 14px;
}
.wire-mosaic-card--compact:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(15, 23, 42, 0.25);
}
.wire-mosaic-card--compact .wire-mosaic-card__body {
  padding: 0;
  gap: 8px;
}
.wire-mosaic-card__title--compact {
  font-size: 16px;
  line-height: 1.25;
}
.wire-mosaic-card--compact .wire-mosaic-card__link {
  gap: 8px;
}

/* ── Break variant — Fox's Desk feature ────────────────────── */
.wire-mosaic-card--break {
  background: linear-gradient(180deg, #fdf6f4 0%, #faeae5 100%);
  border: 1px solid rgba(185, 28, 28, 0.20);
  border-radius: 4px;
  position: relative;
}
.wire-mosaic-card--break::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
              rgba(185, 28, 28, 0),
              rgba(185, 28, 28, 0.7),
              rgba(185, 28, 28, 0));
}
.wire-mosaic-card--break .wire-mosaic-card__body {
  padding: clamp(20px, 2.6vw, 36px);
  gap: 14px;
}
.wire-mosaic-card__break-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B91C1C;
  align-self: center;
}
.wire-mosaic-card__break-mark-rule {
  display: inline-block;
  width: clamp(20px, 3vw, 48px);
  height: 1px;
  background: rgba(185, 28, 28, 0.4);
}
.wire-mosaic-card__title--break {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.16;
  text-align: center;
  max-width: 28ch;
  margin: 0 auto;
}
.wire-mosaic-card__deck--pullquote {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.70);
  text-align: center;
  max-width: 40ch;
  margin: 0 auto;
}
.wire-mosaic-card__byline--break {
  justify-content: center;
  margin-top: 4px;
}
.wire-mosaic-card__cta--break {
  text-align: center;
  align-self: center;
  color: #B91C1C;
}
.wire-mosaic-card--break:hover .wire-mosaic-card__title--break {
  color: #B91C1C;
}

/* ═════════════════════════════════════════════════════════════
   Live racing rail (PR2) — replaces the legacy .wire-sidebar
   on /news/. Four persona-coded blocks at the top:

     next-off  → live countdown to the next big race  (gold/red urgency)
     cubs      → top 3 cub picks today                 (blue)
     letters   → this week's LLaMa campaign            (sage)
     fox       → Mr Fox's daily tip                    (gold)

   Followed by the demoted "More from the Wire" category nav
   and any sponsor slots.
   ════════════════════════════════════════════════════════════ */
.wire-rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Editorial header that introduces the live-rail block stack — matches
   the dingbat-flanked treatment of the .wire-issue-index header below
   so the rail reads as two stacked editorial mastheads, not a generic
   sidebar. */
.wire-rail__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px 0 14px;
  border-bottom: 3px double var(--c-ink, #1A1A1A);
  margin-bottom: 4px;
}
.wire-rail__head-dingbat {
  font-size: 16px;
  line-height: 1;
  color: var(--c-gold-bright, #D4AF37);
}
.wire-rail__head-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-rail__block {
  position: relative;
  background: #FFFCF3;
  border: 1px solid rgba(26, 26, 26, 0.10);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.wire-rail__block:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.18);
}
.wire-rail__block-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
}
.wire-rail__block-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}
.wire-rail__block-label-icon {
  font-size: 14px;
  line-height: 1;
  filter: grayscale(0);
}
/* Persona avatars inside rail labels: round chip lines up with
   the dingbat/dot baseline of label text without throwing off the
   row height. */
.wire-rail__block-label .persona-avatar {
  margin-right: 2px;
}
.wire-rail__block-cta {
  margin-top: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Next-off block ────────────────────────────────────────── */
.wire-rail__block--next-off {
  background: linear-gradient(180deg, #fff9e6 0%, #FFFCF3 100%);
  border-color: rgba(212, 175, 55, 0.34);
}
.wire-rail__block--next-off::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #D4AF37, #C0392B 50%, #D4AF37);
}
.wire-rail__block--next-off .wire-rail__block-label { color: #B91C1C; }
.wire-rail__block-label-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C0392B;
  box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.45);
  animation: wire-rail-pulse 1.6s ease-out infinite;
}
@keyframes wire-rail-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(192, 57, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wire-rail__block-label-dot { animation: none; }
}
.wire-rail__next-off-course {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  color: #0b0e15;
}
.wire-rail__next-off-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.wire-rail__next-off-time {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #0b0e15;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.wire-rail__next-off-countdown {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #B91C1C;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  background: rgba(192, 57, 43, 0.08);
  border-radius: 4px;
}
.wire-rail__next-off-name {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.68);
  line-height: 1.35;
}
.wire-rail__block--next-off .wire-rail__block-cta { color: #B91C1C; }

/* ── Cubs block ────────────────────────────────────────────── */
.wire-rail__block--cubs {
  border-color: rgba(59, 130, 246, 0.28);
}
.wire-rail__block--cubs::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
              rgba(59, 130, 246, 0),
              rgba(59, 130, 246, 0.6),
              rgba(59, 130, 246, 0));
}
.wire-rail__block--cubs .wire-rail__block-label { color: #1E40AF; }
.wire-rail__block--cubs .wire-rail__block-cta { color: #1E40AF; }
.wire-rail__cubs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wire-rail__cubs-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.wire-rail__cubs-row:last-child { border-bottom: none; }
.wire-rail__cubs-rank {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  color: rgba(15, 23, 42, 0.30);
  text-align: center;
}
.wire-rail__cubs-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wire-rail__cubs-horse {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #0b0e15;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wire-rail__cubs-where {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  color: rgba(15, 23, 42, 0.55);
  letter-spacing: 0.02em;
}
.wire-rail__cubs-share {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #1E40AF;
  font-variant-numeric: tabular-nums;
}

/* ── Letters block ─────────────────────────────────────────── */
.wire-rail__block--letters {
  background: linear-gradient(180deg, #eef2eb 0%, #FFFCF3 100%);
  border-color: rgba(140, 175, 138, 0.34);
}
.wire-rail__block--letters::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
              rgba(140, 175, 138, 0),
              rgba(140, 175, 138, 0.65),
              rgba(140, 175, 138, 0));
}
.wire-rail__block--letters .wire-rail__block-label {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #4a6b46;
}
.wire-rail__letters-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.18;
  color: #0b0e15;
  margin: 0;
  letter-spacing: -0.01em;
}
.wire-rail__letters-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
}
.wire-rail__letters-meta strong {
  color: #4a6b46;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.wire-rail__letters-stat-dot { color: rgba(15, 23, 42, 0.32); }
.wire-rail__block--letters .wire-rail__block-cta { color: #4a6b46; }

/* ── Featured Tip block — Mr Fox's editorial big-race verdict.
   Gold persona accent (Fox brand) with a more prominent top
   stripe than the daily fox-tip so it reads as "the editorial
   highlight" rather than a generic Fox card. Sits where the
   letters block used to live in the rail. */
.wire-rail__block--featured-tip {
  background: linear-gradient(180deg, #fff9e6 0%, #FFFCF3 100%);
  border-color: rgba(212, 175, 55, 0.48);
}
.wire-rail__block--featured-tip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c8a951, #f5d76e 50%, #c8a951);
}
.wire-rail__block--featured-tip .wire-rail__block-label {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #A8791D;
}
.wire-rail__ftip-race {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(168, 121, 29, 0.85);
}
.wire-rail__ftip-horse {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.12;
  color: #0b0e15;
  margin: 0;
  letter-spacing: -0.018em;
}
.wire-rail__ftip-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.wire-rail__ftip-odds-label {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
}
.wire-rail__ftip-odds {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #0b0e15;
  background: rgba(212, 175, 55, 0.22);
  border: 1px solid rgba(212, 175, 55, 0.50);
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: -0.01em;
}
.wire-rail__ftip-conviction {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A8791D;
}
.wire-rail__block--featured-tip .wire-rail__block-cta { color: #A8791D; }

/* ── Featured Tip block — Mr Fox's WEEKLY editorial verdict.
       Distinct from the daily .wire-rail__block--fox below it (which
       carries the DailyFeatureTip). Richer gold accent + "This week"
       badge in the corner so readers see it's the premium slot. */
.wire-rail__block--featured-tip {
  background: linear-gradient(180deg, #fff8e8 0%, #FFFCF3 100%);
  border-color: rgba(212, 175, 55, 0.50);
}
.wire-rail__block--featured-tip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c8a951, #f5d76e, #c8a951);
}
.wire-rail__block--featured-tip .wire-rail__block-label {
  color: #A8791D;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wire-rail__featured-tip-badge {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #1A1A1A;
  color: #FFFCF3;
  padding: 3px 7px;
  border-radius: 3px;
  margin-left: auto;
}
.wire-rail__featured-tip-horse {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
  color: #0b0e15;
}
.wire-rail__featured-tip-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wire-rail__featured-tip-odds {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #A8791D;
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 3px 10px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.wire-rail__featured-tip-conviction {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A8791D;
}
.wire-rail__featured-tip-where {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(15, 23, 42, 0.62);
}
.wire-rail__block--featured-tip .wire-rail__block-cta { color: #A8791D; }

/* ── Sly Man's Treble block — long-odds each-way daily treble.
       Camel/copper palette distinct from the Fox gold + LLaMa sage
       blocks above it. Carries the conviction band as a single-
       letter pill in the label (H / M / S) so the daily lottery
       ticket reads at a glance. */
.wire-rail__block--sly-treble {
  background: linear-gradient(180deg, #fdf5e6 0%, #FFFCF3 100%);
  border-color: rgba(201, 137, 47, 0.40);
}
.wire-rail__block--sly-treble::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
              rgba(201, 137, 47, 0),
              rgba(201, 137, 47, 0.7),
              rgba(201, 137, 47, 0));
}
.wire-rail__block--sly-treble .wire-rail__block-label { color: #8B5E1A; }
.wire-rail__block--sly-treble .wire-rail__block-cta { color: #8B5E1A; }

.wire-rail__sly-conviction {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #FFFCF3;
  margin-left: auto;
}
.wire-rail__sly-conviction--emerald { background: #166534; }
.wire-rail__sly-conviction--amber   { background: #8B5E1A; }
.wire-rail__sly-conviction--slate   { background: #475569; }

.wire-rail__sly-legs {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wire-rail__sly-leg {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(26, 26, 26, 0.08);
}
.wire-rail__sly-leg:last-child { border-bottom: none; }
.wire-rail__sly-leg-num {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  color: rgba(139, 94, 26, 0.6);
  text-align: center;
}
.wire-rail__sly-leg-horse {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wire-rail__sly-leg-odds {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #8B5E1A;
}
.wire-rail__sly-combined {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.62);
  padding-top: 4px;
  border-top: 1px dashed rgba(26, 26, 26, 0.10);
}
.wire-rail__sly-combined strong {
  color: #8B5E1A;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.wire-rail__sly-empty {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(26, 26, 26, 0.55);
  margin: 0 0 4px;
}

/* Sly Man's Treble masthead pill now uses the shared
   .wire-shelf-card component (search "THE PUBLICATION SHELF"
   above) with the .wire-shelf-card--sly accent modifier. */

/* ── Fox block ─────────────────────────────────────────────── */
.wire-rail__block--fox {
  border-color: rgba(212, 175, 55, 0.34);
}
.wire-rail__block--fox::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #c8a951, #f5d76e, #c8a951);
}
.wire-rail__block--fox .wire-rail__block-label { color: #A8791D; }
.wire-rail__fox-horse {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  color: #0b0e15;
  margin: 0;
}
.wire-rail__fox-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wire-rail__fox-odds {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #0b0e15;
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.40);
  padding: 3px 9px;
  border-radius: 5px;
}
.wire-rail__fox-conviction {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A8791D;
}
.wire-rail__fox-where {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.62);
  line-height: 1.4;
}
.wire-rail__block--fox .wire-rail__block-cta { color: #A8791D; }

/* ═════════════════════════════════════════════════════════════
   Persona signatures (PR3 of news modernisation).

   Each card picks up its author's visual identity:
     mr-fox     → gold left edge + fox watermark
     llama      → sage left edge + Playfair italic eyebrow + llama watermark
     sly-man    → amber left edge + cream wash + dog watermark
     the-cub    → soft neutral + paw mark

   Generic + editorial bylines stay neutral so the persona signal
   is meaningful when it appears.

   Hero variant: persona stripe goes across the top instead of the
   left edge so the dark hero card keeps its cinematic photo split.
   Compact variant: top dashed rule swaps to the persona colour.
   Break (Fox's Desk) stays red — it's already persona-themed by
   nature, no double-treatment.
   ════════════════════════════════════════════════════════════ */
.wire-mosaic-card--persona-mr-fox    { --persona: #D4AF37; --persona-ink: #A8791D; --persona-mark: '\1F98A'; }
.wire-mosaic-card--persona-llama     { --persona: #8caf8a; --persona-ink: #4a6b46; --persona-mark: '\1F999'; }
.wire-mosaic-card--persona-sly-man   { --persona: #C9892F; --persona-ink: #8B5E1A; --persona-mark: '\1F415'; }
.wire-mosaic-card--persona-the-cub   { --persona: #94a3b8; --persona-ink: #475569; --persona-mark: '\1F43E'; }

.wire-mosaic-card--medium.wire-mosaic-card--persona-mr-fox,
.wire-mosaic-card--medium.wire-mosaic-card--persona-llama,
.wire-mosaic-card--medium.wire-mosaic-card--persona-sly-man,
.wire-mosaic-card--medium.wire-mosaic-card--persona-the-cub {
  position: relative;
  border-left: 3px solid var(--persona);
}
/* Watermark slot — sits over the photo on medium cards. Renders the
   persona avatar img inside; self-empties on cards without a known
   persona (the include in the template renders nothing for editorial). */
.wire-mosaic-card__persona-mark {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.18s ease;
}
.wire-mosaic-card__persona-mark:empty { display: none; }
.wire-mosaic-card--medium:hover .wire-mosaic-card__persona-mark {
  transform: rotate(-4deg) scale(1.05);
}

/* Compact cards — top rule picks up the persona colour. */
.wire-mosaic-card--compact.wire-mosaic-card--persona-mr-fox,
.wire-mosaic-card--compact.wire-mosaic-card--persona-llama,
.wire-mosaic-card--compact.wire-mosaic-card--persona-sly-man,
.wire-mosaic-card--compact.wire-mosaic-card--persona-the-cub {
  border-top-color: var(--persona);
  border-top-width: 2px;
}

/* Hero — gold gradient strip across the top is replaced by the
   persona gradient. Title hover colour follows the persona ink. */
.wire-mosaic-card--hero.wire-mosaic-card--persona-mr-fox,
.wire-mosaic-card--hero.wire-mosaic-card--persona-llama,
.wire-mosaic-card--hero.wire-mosaic-card--persona-sly-man,
.wire-mosaic-card--hero.wire-mosaic-card--persona-the-cub {
  position: relative;
}
.wire-mosaic-card--hero.wire-mosaic-card--persona-mr-fox::before,
.wire-mosaic-card--hero.wire-mosaic-card--persona-llama::before,
.wire-mosaic-card--hero.wire-mosaic-card--persona-sly-man::before,
.wire-mosaic-card--hero.wire-mosaic-card--persona-the-cub::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--persona), transparent);
  z-index: 2;
}
.wire-mosaic-card--hero.wire-mosaic-card--persona-mr-fox .wire-mosaic-card__eyebrow,
.wire-mosaic-card--hero.wire-mosaic-card--persona-llama .wire-mosaic-card__eyebrow,
.wire-mosaic-card--hero.wire-mosaic-card--persona-sly-man .wire-mosaic-card__eyebrow,
.wire-mosaic-card--hero.wire-mosaic-card--persona-the-cub .wire-mosaic-card__eyebrow {
  color: var(--persona);
}
.wire-mosaic-card--hero.wire-mosaic-card--persona-mr-fox:hover .wire-mosaic-card__title--hero,
.wire-mosaic-card--hero.wire-mosaic-card--persona-llama:hover .wire-mosaic-card__title--hero,
.wire-mosaic-card--hero.wire-mosaic-card--persona-sly-man:hover .wire-mosaic-card__title--hero,
.wire-mosaic-card--hero.wire-mosaic-card--persona-the-cub:hover .wire-mosaic-card__title--hero {
  color: var(--persona);
}

/* LLaMa-specific eyebrow treatment — long-form letters voice uses
   serif italic instead of all-caps sans, regardless of card size. */
.wire-mosaic-card--persona-llama:not(.wire-mosaic-card--hero) .wire-mosaic-card__eyebrow {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--persona-ink);
  font-weight: 700;
}

/* Sly Man variant — paper-cream wash on top of the base paper bg
   so the watchlist column reads as its own editorial product. */
.wire-mosaic-card--medium.wire-mosaic-card--persona-sly-man {
  background: linear-gradient(180deg, #fdf5e6 0%, var(--c-paper, #FBF7EF) 100%);
}

/* ═════════════════════════════════════════════════════════════
   Persona avatars — circular portrait chips used across mosaic
   cards (watermark + byline), rail block labels, and anywhere
   else a persona signature appears. Real image assets replace
   the older emoji-only treatment (🦊 → fox SVG, 🦙 → LLaMa
   portrait, 🐕 → Sly Man portrait). Unknown personas fall back
   to whatever emoji the author seed provided.
   ════════════════════════════════════════════════════════════ */
.persona-avatar {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  background: #FFFCF3;
  border: 1px solid rgba(26, 26, 26, 0.12);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.persona-avatar--xs        { width: 18px;  height: 18px;  font-size: 13px; line-height: 1; text-align: center; }
.persona-avatar--sm        { width: 24px;  height: 24px;  font-size: 15px; line-height: 1; text-align: center; }
.persona-avatar--md        { width: 36px;  height: 36px;  font-size: 22px; line-height: 1; text-align: center; }
.persona-avatar--watermark { width: 56px;  height: 56px;  border-width: 2px; }

/* Per-persona background tones so the round chip frames the
   character cleanly even when the source asset has transparency
   or off-white margins. */
.persona-avatar--mr-fox  { background: #0b0e15; border-color: rgba(212, 175, 55, 0.55); }
.persona-avatar--llama   { background: #eef2eb; border-color: rgba(140, 175, 138, 0.55); }
.persona-avatar--sly-man { background: #fdf6e8; border-color: rgba(201, 137, 47, 0.55); }
.persona-avatar--fallback {
  background: rgba(26, 26, 26, 0.06);
  border-color: rgba(26, 26, 26, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Watermark gets a soft ring + low opacity so it accents the
   photo without competing with the headline. */
.persona-avatar--watermark {
  opacity: 0.92;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* ── Widget strip below mosaic ─────────────────────────────── */
.wire-widgets-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin: 36px 0 24px;
  padding-top: 28px;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
}
@media (max-width: 899px) {
  .wire-widgets-row { grid-template-columns: 1fr; gap: 20px; }
}