/* ─────────────────────────────────────────────────────────────────
   The Deep Dive — race-preview rich card layout CSS.

   Loaded only when article.category.slug == 'race-preview' AND
   article.body_structured is set. Scoped under .deep-dive so it
   can't leak onto other article surfaces.

   Design vocabulary:
     • Gold accent — flagship piece. Anchor picks pull from the
       gold/ink palette; outsiders use a deeper bronze; place-
       insurance stays muted slate.
     • Card-and-rule layout — each section reads as a discrete
       editorial beat, separated by hairline rules. No headers
       compete with the article's masthead.
     • Serif body type for prose, sans-serif for labels + chips —
       mirrors the existing news.css pattern.
   ───────────────────────────────────────────────────────────── */

.deep-dive {
  --dd-ink:          #0b0e15;
  --dd-ink-70:       rgba(11, 14, 21, 0.72);
  --dd-ink-50:       rgba(11, 14, 21, 0.50);
  --dd-ink-20:       rgba(11, 14, 21, 0.20);
  --dd-ink-08:       rgba(11, 14, 21, 0.08);
  --dd-gold:         #d4af37;
  --dd-gold-bright:  #e8c558;
  --dd-gold-ink:     #6f4f0a;
  --dd-cream:        #faf6ec;
  --dd-cream-warm:   #f5efde;
  --dd-emerald:      #1a7d4a;
  --dd-emerald-soft: rgba(26, 125, 74, 0.08);
  --dd-navy:         #1e40af;
  --dd-navy-soft:    rgba(30, 64, 175, 0.08);
  --dd-bronze:       #b35900;
  --dd-bronze-soft:  rgba(179, 89, 0, 0.08);
  --dd-slate:        #475569;
  --dd-slate-soft:   rgba(71, 85, 105, 0.08);
  --dd-rose:         #b91c1c;
  --dd-rose-soft:    rgba(185, 28, 28, 0.08);

  font-family: "Iowan Old Style", Charter, Georgia, serif;
  color: var(--dd-ink);
  line-height: 1.65;
}

/* ── Hero strip ────────────────────────────────────────────────── */
.deep-dive__hero {
  margin: 0 0 28px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--dd-ink-08);
}
.deep-dive__hero-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.deep-dive__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--dd-ink-08);
  border-radius: 4px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dd-ink-70);
}
.deep-dive__chip--time,
.deep-dive__chip--course {
  background: var(--dd-ink);
  color: #fff;
  border-color: var(--dd-ink);
}
.deep-dive__chip--prize {
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(212, 175, 55, 0.45);
  color: var(--dd-gold-ink);
}
.deep-dive__course-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--dd-cream);
  border-left: 3px solid var(--dd-gold);
  font-size: 14px;
  font-style: italic;
  color: var(--dd-ink-70);
}
.deep-dive__course-note-label {
  display: inline-block;
  margin-right: 8px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--dd-gold-ink);
}

/* ── Racecard CTA — prominent link out to the live race ────────
   Sits inside the hero strip, below the chip row. Reads as the
   editorial "go further" cue: the reader has the Deep Dive
   context, now click through to the live racecard with odds,
   form, voting, etc.

   Design — premium pill rather than a chip:
     • Gold gradient background so it sits ABOVE the neutral
       race-info chips without screaming
     • Two-tier label (CTA + meta row time/course) so the link
       carries its own context — no reliance on the chip row
     • Arrow shifts 4px on hover for a subtle directional cue
     • Full-width on mobile, intrinsic-width on desktop */
/* CTA row wrapper — racecard + cinematic forecast sit side-by-side
   on desktop, stack cleanly on mobile. Both CTAs are siblings inside
   this row so the existing `.deep-dive__racecard-cta margin:16px 0 0`
   is suppressed in row mode (the row owns the top spacing). */
.deep-dive__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 16px 0 0;
}
.deep-dive__cta-row .deep-dive__racecard-cta,
.deep-dive__cta-row .deep-dive__cinematic-cta {
  margin: 0;
}

.deep-dive__racecard-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 0;
  padding: 12px 18px 12px 20px;
  background: linear-gradient(180deg, var(--dd-gold-bright), var(--dd-gold) 100%);
  color: var(--dd-ink);
  border: 1px solid rgba(111, 79, 10, 0.4);
  border-radius: 8px;
  text-decoration: none;
  font-family: "DM Sans", "Inter", sans-serif;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 18px -10px rgba(212, 175, 55, 0.55);
  transition: transform 160ms ease, box-shadow 200ms ease;
}
.deep-dive__racecard-cta:hover,
.deep-dive__racecard-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 24px -10px rgba(212, 175, 55, 0.7);
  outline: none;
}
.deep-dive__racecard-cta-label {
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dd-gold-ink);
}
.deep-dive__racecard-cta-sub {
  padding-left: 14px;
  border-left: 1px solid rgba(111, 79, 10, 0.30);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dd-ink-70);
  font-variant-numeric: tabular-nums;
}
.deep-dive__racecard-cta-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  font-weight: 900;
  color: var(--dd-gold-ink);
  transition: transform 200ms ease;
}
.deep-dive__racecard-cta:hover .deep-dive__racecard-cta-arrow,
.deep-dive__racecard-cta:focus-visible .deep-dive__racecard-cta-arrow {
  transform: translateX(4px);
}

/* ── Cinematic forecast CTA ─────────────────────────────────────
   Visual sibling of the racecard CTA but tonally inverted —
   the racecard pill is bright editorial gold; this one is the
   cinema-house dark, with a gold play-icon glyph to signal
   motion + premium experience. The two together read as "data
   vs. show" — fact and theatre, side by side. */
.deep-dive__cinematic-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 12px;
  background: linear-gradient(180deg, #1c2942, var(--dd-ink) 100%);
  color: #fff;
  border: 1px solid rgba(120, 140, 180, 0.35);
  border-radius: 8px;
  text-decoration: none;
  font-family: "DM Sans", "Inter", sans-serif;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 18px -10px rgba(11, 14, 21, 0.55);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.deep-dive__cinematic-cta:hover,
.deep-dive__cinematic-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px -10px rgba(11, 14, 21, 0.7),
    0 0 0 3px rgba(212, 175, 55, 0.18);
  outline: none;
}
.deep-dive__cinematic-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dd-gold);
  color: var(--dd-ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  /* Nudge the play triangle ~1px right so it visually centres in
     the circle — triangles are perceptually left-heavy. */
  padding-left: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(212, 175, 55, 0.12);
  transition: transform 200ms ease;
}
.deep-dive__cinematic-cta:hover .deep-dive__cinematic-cta-icon,
.deep-dive__cinematic-cta:focus-visible .deep-dive__cinematic-cta-icon {
  transform: scale(1.06);
}
.deep-dive__cinematic-cta-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.deep-dive__cinematic-cta-label {
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}
.deep-dive__cinematic-cta-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.15;
}
.deep-dive__cinematic-cta-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  font-weight: 900;
  color: var(--dd-gold-bright);
  transition: transform 200ms ease;
}
.deep-dive__cinematic-cta:hover .deep-dive__cinematic-cta-arrow,
.deep-dive__cinematic-cta:focus-visible .deep-dive__cinematic-cta-arrow {
  transform: translateX(4px);
}

/* Mobile — stack the two CTAs full-width below 520px so each gets
   the same prominence as it would on a single-CTA card. */
@media (max-width: 520px) {
  .deep-dive__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .deep-dive__cta-row > a {
    justify-content: flex-start;
  }
}

/* ── RESULT IN strip — top-of-article post-result banner ────────
   Renders directly under the hero chip row. Self-hides pre-race
   (see _race_result_strip.html). Three tint variants reflect the
   Anchor pick's outcome:

     --won     gold left rail + warm gold tint   ✓ Anchor came home
     --placed  silver left rail + cool tint      ✓ Anchor earned a place
     --missed  / --nr / --dnf / --unknown
               neutral cream — strip still
               surfaces the 1-2-3-4, footer hides
               (don't rub the miss in).

   Layout is a horizontal pill list — 1st-2nd-3rd-4th in a single
   row on desktop, wraps cleanly on mobile. */
.deep-dive__result-strip {
  position: relative;
  margin: 0 0 28px;
  padding: 16px 20px 14px;
  background: var(--dd-cream);
  border: 1px solid var(--dd-ink-08);
  border-left: 4px solid var(--dd-slate);
  border-radius: 8px;
}
.deep-dive__result-strip--won {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.13), var(--dd-cream) 70%);
  border-left-color: var(--dd-gold);
}
.deep-dive__result-strip--placed {
  background: linear-gradient(90deg, rgba(160, 164, 170, 0.18), var(--dd-cream) 70%);
  border-left-color: #a8acb0;
}
.deep-dive__result-strip--missed,
.deep-dive__result-strip--nr,
.deep-dive__result-strip--dnf,
.deep-dive__result-strip--unknown {
  border-left-color: var(--dd-slate);
}

.deep-dive__result-strip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
/* Soft live-feel pulse — replaces a static dot with a gentle
   editorial heartbeat so the strip feels "fresh in". 1.6s cycle,
   stays quiet, respects reduced-motion preferences. */
.deep-dive__result-strip-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dd-emerald);
  box-shadow: 0 0 0 0 rgba(26, 125, 74, 0.5);
  animation: dd-result-pulse 1600ms ease-out infinite;
}
.deep-dive__result-strip--won .deep-dive__result-strip-pulse  { background: var(--dd-gold); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); }
.deep-dive__result-strip--placed .deep-dive__result-strip-pulse { background: #a8acb0; box-shadow: 0 0 0 0 rgba(160, 164, 170, 0.45); }
@keyframes dd-result-pulse {
  0%   { box-shadow: 0 0 0 0    currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 8px  rgba(0, 0, 0, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0    rgba(0, 0, 0, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .deep-dive__result-strip-pulse { animation: none; }
}
.deep-dive__result-strip-eyebrow {
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dd-ink-70);
}

.deep-dive__result-strip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.deep-dive__result-strip-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--dd-ink);
}
.deep-dive__result-strip-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 8px;
  background: var(--dd-ink);
  color: #fff;
  border-radius: 4px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.deep-dive__result-strip-row--gold   .deep-dive__result-strip-pos { background: var(--dd-gold); color: var(--dd-gold-ink); }
.deep-dive__result-strip-row--silver .deep-dive__result-strip-pos { background: #c0c4cc; color: var(--dd-ink); }
.deep-dive__result-strip-row--bronze .deep-dive__result-strip-pos { background: var(--dd-bronze); color: #fff; }
.deep-dive__result-strip-row--placed .deep-dive__result-strip-pos { background: var(--dd-emerald); color: #fff; }

.deep-dive__result-strip-name { color: var(--dd-ink); }
.deep-dive__result-strip-odds {
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--dd-gold-ink);
}
.deep-dive__result-strip-anchor-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--dd-gold);
  color: var(--dd-gold-ink);
  border-radius: 999px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.deep-dive__result-strip-footer {
  margin: 12px 0 0;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--dd-ink-70);
}
.deep-dive__result-strip-mark {
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: text-bottom;
  align-items: center;
  justify-content: center;
  background: var(--dd-emerald);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
}
.deep-dive__result-strip--won .deep-dive__result-strip-mark { background: var(--dd-gold); color: var(--dd-gold-ink); }

/* ── Section heading ────────────────────────────────────────────── */
.deep-dive__section {
  margin: 0 0 32px;
}
.deep-dive__h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--dd-ink);
}
.deep-dive__h2-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--dd-gold);
  color: var(--dd-ink);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 900;
}

/* ── Setup + pace prose ─────────────────────────────────────────── */
.deep-dive__setup p,
.deep-dive__pace p {
  margin: 0;
  font-size: 17px;
  color: var(--dd-ink);
}
.deep-dive__setup {
  font-size: 18px;
  font-weight: 500;
  color: var(--dd-ink-70);
}
.deep-dive__setup p {
  font-size: 18px;
  font-weight: 500;
}

/* ── The Final Call — dark editorial verdict card ───────────────── */
/* Dramatic contrast with the rest of the cream-on-cream article.
   This is the read-only takeaway the punter screenshots — should
   feel like a movie-poster pull-quote. Mr Fox signs the bottom. */
.deep-dive__verdict-section {
  /* Card extends past the normal article body padding for emphasis. */
  margin: 40px 0;
}
.deep-dive__verdict {
  position: relative;
  padding: 38px 44px 30px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 175, 55, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, #0e1320 0%, #0b0e15 100%);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(212, 175, 55, 0.08) inset,
    0 18px 40px rgba(11, 14, 21, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  color: #f5efde;
  overflow: hidden;
}

/* Top gold rule — thin tapered glow across the top of the card. */
.deep-dive__verdict-rule {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--dd-gold-bright) 40%,
    var(--dd-gold-bright) 60%,
    transparent 100%
  );
  opacity: 0.85;
}

/* Eyebrow label — tracked uppercase, sparkle prefix. */
.deep-dive__verdict-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dd-gold-bright);
}
.deep-dive__verdict-sparkle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--dd-gold);
  color: var(--dd-ink);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
}

/* The quote itself — large italic serif with giant gold quotation
   marks framing the prose. The marks are decorative; the inner <p>
   carries the actual content. */
.deep-dive__verdict-quote {
  position: relative;
  margin: 0;
  padding: 8px 0 12px;
}
.deep-dive__verdict-quote p {
  margin: 0;
  font-family: "Iowan Old Style", "Playfair Display", Charter, Georgia, serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: #f5efde;
  letter-spacing: 0.001em;
}
.deep-dive__verdict-quote p::first-letter {
  /* Subtle drop-cap weight for the opening word. */
  font-weight: 600;
}
.deep-dive__verdict-mark {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 64px;
  font-weight: 900;
  font-style: normal;
  color: var(--dd-gold);
  line-height: 0;
  opacity: 0.55;
  position: absolute;
  user-select: none;
  pointer-events: none;
}
.deep-dive__verdict-mark--open {
  top: 28px;
  left: -8px;
}
.deep-dive__verdict-mark--close {
  bottom: -8px;
  right: -2px;
}

/* Signature — Mr Fox's byline at the bottom-right. */
.deep-dive__verdict-signature {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 22px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed rgba(212, 175, 55, 0.25);
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12.5px;
  color: rgba(245, 239, 222, 0.78);
}
.deep-dive__verdict-fox {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(212, 175, 55, 0.25));
}
.deep-dive__verdict-signature strong {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--dd-gold-bright);
  margin-right: 8px;
}
.deep-dive__verdict-signature em {
  display: inline-block;
  font-style: italic;
  font-weight: 500;
  color: rgba(245, 239, 222, 0.55);
}

/* ── Lenses row ─────────────────────────────────────────────────── */
.deep-dive__lens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.deep-dive__lens {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--dd-ink-08);
  border-radius: 8px;
}
.deep-dive__lens-label {
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dd-ink-50);
}
.deep-dive__lens-pick {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--dd-ink);
  letter-spacing: -0.005em;
}
.deep-dive__lens-odds {
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--dd-gold-ink);
}
.deep-dive__lens-meta {
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--dd-ink-50);
}
.deep-dive__lens--crowd {
  background: rgba(212, 175, 55, 0.06);
  border-color: rgba(212, 175, 55, 0.30);
}

/* ── Pick cards (the centrepiece) ───────────────────────────────── */
.deep-dive__pick-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.deep-dive__pick {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--dd-ink-08);
  border-left-width: 4px;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(11, 14, 21, 0.03),
              0 6px 18px rgba(11, 14, 21, 0.05);
}
.deep-dive__pick--anchor          { border-left-color: var(--dd-gold);    background: linear-gradient(180deg, rgba(212,175,55,0.04), #fff 80%); }
.deep-dive__pick--each_way        { border-left-color: var(--dd-emerald); background: linear-gradient(180deg, rgba(26,125,74,0.04), #fff 80%); }
.deep-dive__pick--outsider        { border-left-color: var(--dd-bronze);  background: linear-gradient(180deg, rgba(179,89,0,0.04),  #fff 80%); }
.deep-dive__pick--place_insurance { border-left-color: var(--dd-slate);   background: linear-gradient(180deg, rgba(71,85,105,0.04), #fff 80%); }

.deep-dive__pick-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--dd-ink);
  color: var(--dd-gold);
  border-radius: 50%;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 900;
  align-self: flex-start;
  grid-column: 1;
  grid-row: 1;
}
.deep-dive__pick-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin: 0 0 10px;
  grid-column: 2;
  grid-row: 1;
}
/* Subsequent rows live entirely in col 2 (alongside col 1's rank
   circle). Without these explicit placements, CSS Grid auto-places
   body into col 1 (the 48px column) and stats into col 2, mangling
   the layout — reasoning text gets squeezed to a single-word column. */
.deep-dive__pick-body,
.deep-dive__pick-stats,
.deep-dive__pick-foot {
  grid-column: 2;
}
.deep-dive__pick-conviction {
  flex: 0 0 100%;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.deep-dive__pick--anchor          .deep-dive__pick-conviction { color: var(--dd-gold-ink); }
.deep-dive__pick--each_way        .deep-dive__pick-conviction { color: var(--dd-emerald); }
.deep-dive__pick--outsider        .deep-dive__pick-conviction { color: var(--dd-bronze); }
.deep-dive__pick--place_insurance .deep-dive__pick-conviction { color: var(--dd-slate); }

.deep-dive__pick-horse {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--dd-ink);
  line-height: 1.1;
}
.deep-dive__pick-odds {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--dd-ink);
  color: #fff;
  border-radius: 4px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.deep-dive__pick-conn {
  flex: 0 0 100%;
  margin: 0;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 13px;
  font-style: italic;
  color: var(--dd-ink-70);
}
.deep-dive__pick-conn span {
  display: inline;
}

.deep-dive__pick-body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--dd-ink);
}
.deep-dive__pick-body p:first-child { margin-top: 0; }
.deep-dive__pick-body p:last-child  { margin-bottom: 0; }

.deep-dive__pick-stats {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.deep-dive__pick-stat {
  padding: 4px 11px;
  background: var(--dd-cream);
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 4px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--dd-gold-ink);
}
.deep-dive__pick-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--dd-ink-08);
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dd-ink-50);
}
.deep-dive__pick-foot span {
  font-variant-numeric: tabular-nums;
}

/* ── Finish badge (post-result chip — Four Picks + Field Rated) ──
   Rendered by news/_finish_badge.html. The badge sits inline next
   to the odds chip in Four Picks cards (PR 2) and inside the
   RESULT column of The Field Rated (PR 3). Single CSS family so
   both surfaces stay visually consistent — change the chip once,
   it changes everywhere.

   Modifier matrix:
     --gold    1st          gold pill, dark text, soft inner glow
     --silver  2nd          silver pill, dark text
     --bronze  3rd          bronze pill, white text
     --placed  4th          pale emerald (paid-place tier)
     --nr      Non-runner   muted slate, italic
     --dnf     F/UR/PU/REF  rose tint, subtle (DNF is editorial info, not failure)
     (none)    5th+         neutral cream pill — shows the position
                            number without trying to celebrate it.

   Geometry is shared across all modifiers. Only the colour /
   border tokens swap. Keeps the chip family visually a SET, not
   six unrelated badges. */
.deep-dive__finish-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--dd-cream);
  color: var(--dd-ink);
  /* default — used for 5th+ neutral case */
}
.deep-dive__finish-badge-icon {
  font-size: 13px;
  line-height: 1;
}
.deep-dive__finish-badge-label {
  font-variant-numeric: tabular-nums;
}

/* Medal modifiers */
.deep-dive__finish-badge--gold {
  background: linear-gradient(180deg, #fde9a3 0%, #d4af37 100%);
  border-color: rgba(111, 79, 10, 0.45);
  color: var(--dd-gold-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 2px rgba(212, 175, 55, 0.12);
}
.deep-dive__finish-badge--silver {
  background: linear-gradient(180deg, #f3f4f6 0%, #d1d5db 100%);
  border-color: rgba(75, 85, 99, 0.30);
  color: var(--dd-ink);
}
.deep-dive__finish-badge--bronze {
  background: linear-gradient(180deg, #d8965b 0%, #b35900 100%);
  border-color: rgba(120, 60, 0, 0.55);
  color: #fff;
}
.deep-dive__finish-badge--placed {
  background: var(--dd-emerald-soft);
  border-color: rgba(26, 125, 74, 0.35);
  color: var(--dd-emerald);
}

/* State modifiers */
.deep-dive__finish-badge--nr {
  background: var(--dd-slate-soft);
  border-color: rgba(71, 85, 105, 0.25);
  color: var(--dd-slate);
  font-style: italic;
}
.deep-dive__finish-badge--dnf {
  background: var(--dd-rose-soft);
  border-color: rgba(185, 28, 28, 0.25);
  color: var(--dd-rose);
}

/* ── Pick card outcome glow ──────────────────────────────────────
   When a race has settled, the Four Picks card adopts a subtle
   outcome modifier so a reader scanning the page can spot the
   call's result without reading the chip. The original conviction
   border (anchor gold / each-way emerald / etc.) is preserved on
   the LEFT — the outcome glow comes from the right side / shadow
   so the two cues stack rather than compete. */
.deep-dive__pick--settled {
  position: relative;
}
.deep-dive__pick--outcome-gold {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.10), #fff 80%);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.30),
    0 8px 24px -12px rgba(212, 175, 55, 0.35);
}
.deep-dive__pick--outcome-silver {
  background: linear-gradient(180deg, rgba(160, 164, 170, 0.10), #fff 80%);
  box-shadow: 0 0 0 1px rgba(120, 125, 130, 0.20);
}
.deep-dive__pick--outcome-bronze {
  background: linear-gradient(180deg, rgba(179, 89, 0, 0.10), #fff 80%);
  box-shadow: 0 0 0 1px rgba(179, 89, 0, 0.22);
}
.deep-dive__pick--outcome-placed {
  background: linear-gradient(180deg, rgba(26, 125, 74, 0.07), #fff 80%);
  box-shadow: 0 0 0 1px rgba(26, 125, 74, 0.18);
}
/* 5th+ / NR / DNF: dim the card so unsuccessful tips visually
   recede. Not a "loss" treatment — just removes the brightness
   given to winning calls so the page reads as a hierarchy. */
.deep-dive__pick--outcome-none,
.deep-dive__pick--outcome-nr,
.deep-dive__pick--outcome-dnf {
  opacity: 0.78;
  filter: saturate(0.85);
}

/* ── Comp table (every runner rated) ────────────────────────────── */
.deep-dive__comp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--dd-ink-08);
  border-radius: 8px;
  overflow: hidden;
}
.deep-dive__comp-row {
  display: grid;
  grid-template-columns: 90px minmax(160px, 220px) 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dd-ink-08);
  font-size: 14px;
  /* Smooth the transition INTO the settled state so the row glow
     fades in rather than snapping — feels editorial, not glitchy. */
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
.deep-dive__comp-row:last-child { border-bottom: 0; }

/* RESULT column — holds the shared finish badge partial. The cell
   stays in place pre-race (empty cell) so the table doesn't reflow
   when results land. */
.deep-dive__comp-result {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 60px;
}

.deep-dive__comp-verdict {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.deep-dive__comp-row--back   .deep-dive__comp-verdict { background: var(--dd-emerald-soft); color: var(--dd-emerald); }
.deep-dive__comp-row--watch  .deep-dive__comp-verdict { background: var(--dd-slate-soft);   color: var(--dd-slate); }
.deep-dive__comp-row--oppose .deep-dive__comp-verdict { background: var(--dd-rose-soft);    color: var(--dd-rose); }

.deep-dive__comp-horse {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--dd-ink);
}
.deep-dive__comp-odds {
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--dd-gold-ink);
}
.deep-dive__comp-take {
  font-family: "Iowan Old Style", Charter, Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: var(--dd-ink-70);
  line-height: 1.5;
}

/* ── Verdict × Outcome row glow ──────────────────────────────────
   Once a race settles, each Field Rated row picks up a colour
   modifier based on the EDITORIAL CALL × the ACTUAL RESULT. The
   credit/discredit logic mirrors what a punter would reach on
   their own:

     EDITORIAL CALL:  BACK / EACH WAY  → we tipped readers ON
                      OPPOSE           → we tipped readers OFF
                      WATCH            → no call either way

     OUTCOME:         gold   1st       → headline result
                      silver 2nd       → placed
                      bronze 3rd       → placed
                      placed 4th       → placed (paid)
                      none   5th+      → busted
                      nr / dnf         → didn't complete

   Glow matrix (left-border accent + faint background tint):

                    Won   Placed   Busted   NR/DNF
       BACK / EW    ✓✓    ✓        ·        ·
       WATCH        ·     ·        ·        ·       (always neutral)
       OPPOSE      🚨     ⚠        ✓✓       ✓

   Two-tier scoring: a strong call that lands gets the bright
   treatment (✓✓ / 🚨), a half-right call gets the mild treatment
   (✓ / ⚠), neutral outcomes stay neutral. WATCH rows never glow —
   they were explicitly not a call, so they can't hit or miss.

   The pre-race row colour (which is just the verdict pill on
   white) is preserved — these rules only fire when the row also
   carries .deep-dive__comp-row--settled (set by the template
   when runner.finish is populated). */

/* BACK / EACH WAY: green when our tip won or placed. */
.deep-dive__comp-row--back.deep-dive__comp-row--outcome-gold,
.deep-dive__comp-row--each_way.deep-dive__comp-row--outcome-gold {
  background: linear-gradient(90deg, rgba(26, 125, 74, 0.12), rgba(26, 125, 74, 0.02) 70%);
  box-shadow: inset 4px 0 0 var(--dd-emerald);
}
.deep-dive__comp-row--back.deep-dive__comp-row--outcome-silver,
.deep-dive__comp-row--back.deep-dive__comp-row--outcome-bronze,
.deep-dive__comp-row--back.deep-dive__comp-row--outcome-placed,
.deep-dive__comp-row--each_way.deep-dive__comp-row--outcome-silver,
.deep-dive__comp-row--each_way.deep-dive__comp-row--outcome-bronze,
.deep-dive__comp-row--each_way.deep-dive__comp-row--outcome-placed {
  background: linear-gradient(90deg, rgba(26, 125, 74, 0.06), transparent 70%);
  box-shadow: inset 4px 0 0 rgba(26, 125, 74, 0.45);
}

/* OPPOSE: red when the horse we told you to avoid still won. The
   stronger glow signals "we got this wrong" — owning the miss
   matters as much as celebrating the hit. */
.deep-dive__comp-row--oppose.deep-dive__comp-row--outcome-gold {
  background: linear-gradient(90deg, rgba(185, 28, 28, 0.12), rgba(185, 28, 28, 0.02) 70%);
  box-shadow: inset 4px 0 0 var(--dd-rose);
}
.deep-dive__comp-row--oppose.deep-dive__comp-row--outcome-silver,
.deep-dive__comp-row--oppose.deep-dive__comp-row--outcome-bronze,
.deep-dive__comp-row--oppose.deep-dive__comp-row--outcome-placed {
  background: linear-gradient(90deg, rgba(185, 28, 28, 0.06), transparent 70%);
  box-shadow: inset 4px 0 0 rgba(185, 28, 28, 0.45);
}

/* OPPOSE: green when the horse we faded busted (5th+) OR didn't
   complete. The fade worked — credit where it's due. */
.deep-dive__comp-row--oppose.deep-dive__comp-row--outcome-none,
.deep-dive__comp-row--oppose.deep-dive__comp-row--outcome-nr,
.deep-dive__comp-row--oppose.deep-dive__comp-row--outcome-dnf {
  background: linear-gradient(90deg, rgba(26, 125, 74, 0.08), transparent 70%);
  box-shadow: inset 4px 0 0 rgba(26, 125, 74, 0.45);
}

/* BACK/EW + busted: row is intentionally neutral. Editorial gets
   no penalty glow for a tip that didn't fire — we own the miss
   via the badge itself, not the row treatment. */

/* WATCH rows never glow — they're explicitly not a call. */

/* ── Asides (Worth Watching + Dissent) ─────────────────────────
   These are EDITORIAL SET-PIECES, not afterthoughts. Worth
   Watching is the "horse to follow next time" tip — actionable
   intel a reader saves for their tracker. Dissent is the
   editorial honesty moment — Mr Fox publicly pushing back
   against the published line.

   Both deserve the same SHAPE as The Final Call (signed editorial
   card) — header with icon + eyebrow + sub-title, body in serif,
   signed footer. The only difference is the accent palette:
       --watch    emerald (forward-looking, action signal)
       --dissent  rose    (contrarian, pushback signal)

   Layout pattern: 3-row card —
       row 1  header  (icon + titles, full width)
       row 2  body    (serif prose with optional pull-quote treatment)
       row 3  footer  (Fox signature)

   Rich-card geometry pulled from the existing pattern set —
   tinted gradient background, accent left rail, soft shadow,
   inner hairline rule between rows. */
.deep-dive__aside {
  position: relative;
  margin: 28px 0 0;
  padding: 22px 26px 18px;
  background: #fff;
  border: 1px solid var(--dd-ink-08);
  border-left: 5px solid var(--dd-slate);
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(11, 14, 21, 0.02),
    0 12px 28px -16px rgba(11, 14, 21, 0.18);
}

/* ── Header row: icon block + label stack ─────────────────────── */
.deep-dive__aside-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--dd-ink-08);
}
.deep-dive__aside-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  /* Default tone — overridden by the watch / dissent modifiers. */
  background: var(--dd-slate-soft);
  color: var(--dd-slate);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 6px -2px rgba(11, 14, 21, 0.12);
}
.deep-dive__aside-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.deep-dive__aside-eyebrow {
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dd-slate);
}
.deep-dive__aside-sub {
  font-family: "Iowan Old Style", Charter, Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: var(--dd-ink-70);
  line-height: 1.3;
}

/* ── Body: serif prose, larger than the default aside text ──── */
.deep-dive__aside-body p {
  margin: 0;
  font-family: "Iowan Old Style", Charter, Georgia, serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--dd-ink);
}
/* Dissent body wears a subtle left mark + italic — reads like
   a pulled quote from the editor. The contrarian voice. */
.deep-dive__aside-body--quote p {
  position: relative;
  padding: 2px 0 2px 16px;
  font-style: italic;
  border-left: 2px solid var(--dd-rose);
}

/* ── Footer signature — mirrors The Final Call card ────────── */
.deep-dive__aside-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--dd-ink-08);
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dd-ink-50);
}
.deep-dive__aside-foot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dd-ink);
  font-size: 12px;
  line-height: 1;
}

/* ── Worth Watching variant — emerald palette ──────────────── */
.deep-dive__aside--watch {
  border-left-color: var(--dd-emerald);
  background: linear-gradient(90deg, rgba(26, 125, 74, 0.04), #fff 65%);
}
.deep-dive__aside--watch .deep-dive__aside-icon {
  background: var(--dd-emerald);
  color: #fff;
}
.deep-dive__aside--watch .deep-dive__aside-eyebrow {
  color: var(--dd-emerald);
}

/* ── Dissent variant — rose palette + contrarian quote rule ── */
.deep-dive__aside--dissent {
  border-left-color: var(--dd-rose);
  background: linear-gradient(90deg, rgba(185, 28, 28, 0.05), #fff 65%);
}
.deep-dive__aside--dissent .deep-dive__aside-icon {
  background: var(--dd-rose);
  color: #fff;
}
.deep-dive__aside--dissent .deep-dive__aside-eyebrow {
  color: var(--dd-rose);
}

/* ── Mobile (≤640px) ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .deep-dive__pick {
    grid-template-columns: 1fr;
    padding: 16px 14px;
  }
  .deep-dive__pick-rank {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .deep-dive__pick-horse {
    font-size: 22px;
  }
  .deep-dive__comp-row {
    grid-template-columns: 70px 1fr;
    grid-template-rows: auto auto;
    gap: 6px 12px;
  }
  .deep-dive__comp-take {
    grid-column: 1 / -1;
  }
  .deep-dive__lens-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Verdict card tightens but keeps the editorial impact. */
  .deep-dive__verdict {
    padding: 30px 22px 24px;
  }
  .deep-dive__verdict-quote p {
    font-size: 17px;
    line-height: 1.55;
  }
  .deep-dive__verdict-mark {
    font-size: 48px;
  }
  .deep-dive__verdict-mark--open  { top: 22px; left: -4px; }
  .deep-dive__verdict-mark--close { bottom: -4px; right: 0; }
  .deep-dive__verdict-signature {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    font-size: 11.5px;
  }
}