/* ==========================================================================
   Bluebloods — generated from the design system, do not hand-edit.

   Source: the Bluebloods design system, tokens.json + components/bundle.css.
   Regenerate with tools/bb_theme_css.py rather than editing this file.

   UNITS. Ghost Source sets html { font-size: 62.5% }, so 1rem is 10px here.
   The design system is written in pixels; everything below has been divided
   by ten on the way in. Borders, outlines, shadows and anything at or under
   3px keep their pixels, because a hairline should not grow with the reader's
   type size.
   ========================================================================== */

:root {
  /* palette */
  --paper:                     #F4F3EE;
  --paper-2:                   #EDEBE4;
  --panel:                     #FFFFFF;
  --ink:                       #14181D;
  --navy:                      #003F6B;
  --navy-deep:                 #002A47;
  --brass:                     #8A6520;
  --muted:                     #6B6F76;
  --rule:                      #D6D3CA;
  --rule-2:                    #B9B5A9;
  --on-navy:                   var(--panel);
  --on-section:                var(--panel);
  --logo-blue:                 #007DC6;
  --logo-red:                  #ED1C24;
  --tint-sand:                 #F3EFE2;
  --tint-sand-2:               #F8F5EC;
  --tint-sky:                  #EEF2F6;
  --fill-navy:                 #C3D6E5;
  --fill-brass:                #EBD9B8;
  --fill-stone:                #DDD8C6;
  --fill-both:                 #D2C79E;
  --fill-claret:               #EBCDD2;
  --on-fill-brass:             #5E430F;
  --on-fill-stone:             #4A422C;
  --on-fill-claret:            #5C1D2D;
  --section-pedigree-analysis: #4A3B7A;
  --section-stud-news:         #2F6B4F;
  --section-industry-news:     #7A4A1E;
  --section-close-encounters:  #1F5C7A;
  --section-studs-from-the-past: #6B5B3E;
  --section-vale:              #3A3F46;
  --section-nz-sires:          #1B4D3E;
  --section-sale-preview:      #2E4A9E;
  --section-stallion-profile:  #003F6B;
  --section-personality-profile: #8A6520;
  --section-mover-and-shaker:  #6E2436;
  --section-industry-profile:  #14181D;
  --section-statistics:        #5B2C5E;

  /* spacing, measure, radii */
  --space-1:                   0.4rem;
  --space-2:                   0.8rem;
  --space-3:                   1.2rem;
  --space-4:                   1.6rem;
  --space-5:                   2.4rem;
  --space-6:                   3.2rem;
  --space-7:                   4.8rem;
  --space-8:                   6.4rem;
  --space-9:                   9.6rem;
  --width-reading:             72rem;
  --width-wide:                112rem;
  --width-container:           124rem;
  --radius-none:               0px;
  --radius-badge:              2px;

  /* typefaces — Spectral stands in for Le Monde Livre Classic, which is
     licensed. Titillium Web is the print sans and is free. */
  --font-display:              "Spectral", Georgia, "Times New Roman", serif;
  --font-body:                 "Spectral", Georgia, "Times New Roman", serif;
  --font-data:                 "Titillium Web", "Helvetica Neue", Arial, sans-serif;

  /* the section colour a strand sets on its own tag class; navy until one does */
  --bb-section: var(--navy);

  /* --- the levers Source itself reads ------------------------------------
     Setting these means the whole theme adopts the palette and the faces
     without a per-rule override anywhere. */
  --font-sans:            var(--font-data);
  --font-serif:           var(--font-body);
  --font-serif-alt:       var(--font-body);
  --background-color:     var(--paper);
  --color-white:          var(--panel);
  --color-darker-gray:    var(--ink);
  --color-primary-text:   var(--ink);
  --color-secondary-text: var(--muted);
  --color-border:         var(--rule);
  --color-light-gray:     var(--rule);
  --color-mid-gray:       var(--rule-2);
  --color-dark-gray:      var(--muted);
  --content-width:        var(--width-reading);
  --container-width:      var(--width-container);
  --gap-container:        2.4rem;
}

html.has-light-text,
:root.has-light-text,
html[data-theme="dark"],
:root[data-theme="dark"] {
  --paper:                     #12161A;
  --paper-2:                   #171C22;
  --panel:                     #1A2027;
  --ink:                       #E9E7E1;
  --navy:                      #7FB3DC;
  --navy-deep:                 #0C2438;
  --brass:                     #C9A24A;
  --muted:                     #989EA7;
  --rule:                      #2A3037;
  --rule-2:                    #3B434C;
  --on-section:                var(--ink);
  --tint-sand:                 #1E2229;
  --tint-sand-2:               #1A1E22;
  --tint-sky:                  #1B2430;
}

/* ==========================================================================
   Bluebloods — components/bundle.css
   PART 1 is the theme's own built stylesheet (theme/assets/built/bluebloods.css
   as served on 21 September 2026), converted mechanically: every rem x10 to
   px (the theme's root is 62.5%), --bb-* palette variables to the system's
   tokens, the theme's literal tints to the fill-* / tint-* tokens, and
   Source's --container-width / --container-gap to width-container /
   gap-container. Nothing else was changed. Rules for Ghost Source's own
   furniture (.gh-navigation, .gh-card, .gh-footer) are kept as they are.
   PART 2, after the divider, is proposed: issue furniture, the issue home
   page and dark-theme eyebrow chips. None of it is in the theme yet.
   ========================================================================== */
body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.68rem;
  line-height: 1.65;
}

/* Source's font-choice body classes are neutralised — Bluebloods sets its own */
body[class*="has-"] .gh-content,
.gh-content {
  font-family: var(--font-body);
}

/* ==========================================================================
   Navigation and masthead
   ========================================================================== */

.gh-navigation {
  background-color: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.gh-navigation::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--brass);
  opacity: .75;
}
.gh-navigation-logo,
.gh-navigation-logo.is-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}
.gh-navigation-menu a,
.gh-navigation .nav a {
  font-family: var(--font-data);
  font-size: 1.152rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.gh-navigation-menu a:hover,
.gh-navigation .nav a:hover { color: var(--navy); }

/* ==========================================================================
   Article header
   ========================================================================== */

.gh-article-tag {
  font-family: var(--font-data);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
  border: 0;
  padding: 0;
  background: none;
}
.gh-article-tag:hover { color: var(--navy); }

.gh-article-title,
.gh-article-title.is-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.68rem, 5.6vw, 6.56rem);
  line-height: 1.03;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--ink);
  margin-top: 0.8rem;
}

.gh-article-excerpt,
.gh-article-excerpt.is-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.84rem, 2.1vw, 2.24rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 52ch;
  text-wrap: pretty;
  margin-top: 1.92rem;
}

/* byline rule — the magazine's furniture, not a blog's */
.gh-meta-share {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.44rem 0;
  margin-top: 3.2rem;
}
.gh-article-author-name,
.gh-article-author-name a {
  font-family: var(--font-data);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.gh-article-meta-content,
.gh-article-meta-date,
.gh-article-meta-length {
  font-family: var(--font-data);
  font-size: 1.152rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Article body
   ========================================================================== */

.gh-content > p {
  font-family: var(--font-body);
  font-size: 1.72rem;
  line-height: 1.68;
  color: var(--ink);
}

.gh-content.drop-cap > p:first-of-type:not(.bb-standfirst)::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  float: left;
  font-size: 3.9em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--navy);
}

/* h2 is a crosshead — display serif, so it survives a full sentence.
   h3 is the short brass label. */
.gh-content > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.32rem, 2.4vw, 2.88rem);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--ink);
  border-top: 2px solid var(--brass);
  padding-top: 1.36rem;
  margin-top: 4.8rem;
}
.gh-content > h3 {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 1.44rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 4rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--navy);
}

.gh-content > blockquote {
  border-left: 3px solid var(--brass);
  padding-left: 2.4rem;
  font-family: var(--font-display);
  font-size: clamp(2.08rem, 2.5vw, 2.64rem);
  line-height: 1.32;
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
}

.gh-content a { color: var(--navy); text-decoration-color: var(--brass); }

/* footnotes from the Markdown card */
.gh-content .footnotes {
  font-family: var(--font-data);
  font-size: 1.312rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 1.6rem;
}
.gh-content sup a { color: var(--brass); text-decoration: none; font-weight: 600; }

/* ==========================================================================
   Tables — one treatment, whoever supplied them.
   A writer's Markdown table and an Arion component render identically.
   ========================================================================== */

.gh-content table:not(.bb-t),
.bb-t {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: 1.344rem;
  font-variant-numeric: tabular-nums;
  background: none;
}
.gh-content table:not(.bb-t) th,
.bb-t th {
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0.8rem 1.6rem;
  border-bottom: 1px solid var(--rule-2);
}
.gh-content table:not(.bb-t) td,
.bb-t td {
  padding: 0.8rem 1.6rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.gh-content table:not(.bb-t) tbody tr:last-child td,
.bb-t tbody tr:last-child td { border-bottom: 0; }

.bb-t td.num, .bb-t th.num { text-align: right; }
.bb-t .nm  { font-weight: 600; color: var(--ink); }
.bb-t .sub { color: var(--muted); }
.bb-t td.num, .bb-t td.sub, .bb-t th { white-space: nowrap; }
.bb-t tbody tr:hover { background: var(--paper-2); }
.bb-t tr.lead td { background: rgba(138,101,32,.09); }
.bb-t tr.lead .num { color: var(--brass); font-weight: 700; }
.bb-black { color: var(--brass); font-weight: 700; }

.bb-t thead th[data-col] { cursor: pointer; user-select: none; }
.bb-t thead th[aria-sort="ascending"]::after  { content: " \25B4"; color: var(--brass); }
.bb-t thead th[aria-sort="descending"]::after { content: " \25BE"; color: var(--brass); }

/* ==========================================================================
   Arion data block
   Add kg-width-wide to break out of the reading column — Source's own
   canvas grid does the rest.
   ========================================================================== */

.bb-embed {
  max-width: 100%;
  overflow: hidden;      /* nothing escapes the block; the scroller inside still scrolls */
  background: var(--panel);
  border: 1px solid var(--rule);
  font-family: var(--font-data);
  margin: 4.4rem 0;
}
.bb-embed__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  background: var(--navy);
  padding: 1.12rem 1.6rem;
  border-bottom: 2px solid var(--brass);
}
[data-theme="dark"] .bb-embed__bar { background: var(--navy-deep); }
.bb-embed__name {
  font-size: 1.152rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.bb-embed__src {
  font-size: 1.04rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.bb-embed__src .bb-sample {
  background: var(--brass);
  color: #fff;
  padding: .12em .5em;
  border-radius: 2px;
  font-weight: 700;
}
.bb-embed__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bb-embed__cap {
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--muted);
  padding: 1.2rem 1.6rem;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.bb-embed__loading,
.bb-embed__error { padding: 2rem 1.6rem; color: var(--muted); font-size: 1.28rem; }

/* stat strip */
.bb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.8rem, 1fr));
  background: var(--panel);
}
.bb-stat {
  padding: 1.6rem;
  box-shadow: inset -1px -1px 0 var(--rule);
}
.bb-stat__n {
  font-family: var(--font-display);
  font-size: 3.04rem;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.bb-stat__l {
  font-size: 1.04rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.72rem;
  line-height: 1.4;
}

/* pedigree grid */
.bb-ped, .bb-ped__head {
  display: grid;
  grid-template-columns: repeat(4, minmax(14.4rem, 1fr));
  gap: 2px;
  background: var(--rule);
  min-width: 60.8rem;
}
.bb-ped { padding: 2px; }
.bb-ped__head { padding: 2px 2px 0; }
.bb-ped__head div {
  background: var(--panel);
  padding: 0.64rem 0.96rem;
  font-size: 0.96rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bb-ped__col { display: grid; gap: 2px; }
.bb-ped__cell {
  background: var(--panel);
  padding: 0.72rem 0.96rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.216rem;
  line-height: 1.25;
}
.bb-ped__cell b { font-weight: 600; color: var(--ink); }
.bb-ped__cell span { color: var(--muted); font-size: 1.056rem; }
.bb-ped__cell--sire { border-left: 3px solid var(--navy); }
.bb-ped__cell--dam  { border-left: 3px solid var(--brass); }

/* --------------------------------------------------------------------------
   Phone disclosure — hidden columns drop into a drawer under their row.
   Same model as the Arion interactive reports.
   -------------------------------------------------------------------------- */

.bb-t td.bb-more { width: 3.52rem; padding: 0.8rem 0.64rem; text-align: right; }
.bb-t .bb-more button {
  background: none;
  border: 1px solid var(--rule-2);
  color: var(--muted);
  width: 2.56rem; height: 2.56rem;
  line-height: 1;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.36rem;
  padding: 0;
}
.bb-t .bb-more button[aria-expanded="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
}
.bb-t tr.bb-drawer > td { padding: 0; background: var(--paper-2); }
.bb-t tr.bb-drawer dl { margin: 0; padding: 0.88rem 1.6rem 1.12rem; }
.bb-t tr.bb-drawer dt {
  font-size: 0.96rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bb-t tr.bb-drawer dd { margin: 0 0 0.64rem; font-size: 1.312rem; color: var(--ink); }
.bb-t tr.bb-drawer:hover { background: var(--paper-2); }
.bb-t .bb-more, .bb-t tr.bb-drawer { display: none; }

@media (max-width: 640px) {
  .gh-navigation-logo,
  .gh-navigation-logo.is-title { font-size: 2.16rem; letter-spacing: .04em; }
  .bb-embed__bar { flex-direction: column; gap: 0.56rem; }
  .bb-t th, .bb-t td { padding: 0.72rem 0.96rem; font-size: 1.28rem; }
  .bb-t .bb-hide { display: none; }
  .bb-t .bb-more { display: table-cell; }
  .bb-t tr.bb-drawer.is-open { display: table-row; }
  .bb-t .sub { white-space: nowrap; }
  .bb-stat__n { font-size: 2.56rem; }
}

@media print {
  .bb-t .bb-hide { display: table-cell !important; }
  .bb-t .bb-more { display: none !important; }
  .bb-t tr.bb-drawer { display: none !important; }
  .bb-embed { break-inside: avoid; }
}

button:focus-visible,
a:focus-visible,
.bb-t th:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   EDITORIAL COMPONENTS
   Translated from the printed pages, not copied from them.
   ========================================================================== */

/* --- Feature opener (custom-feature.hbs) --------------------------------- */

.bb-hero { margin: 0 0 4.8rem; }

/* Section label sits on the paper above the photo, centred under a rule,
   exactly as the printed openers do. */
.bb-hero__label {
  font-family: var(--font-data);
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  text-align: center;
  margin: 2.4rem auto 2.4rem;
  max-width: var(--width-container);
  padding: 0 var(--gap-container);
}
.bb-hero__label span {
  display: inline-block;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--navy);
  min-width: 32rem;
}

.bb-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-deep);
}
.bb-hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  display: block;
}
/* scrim: only as dark as the type needs */
.bb-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,20,40,.45) 0%, rgba(0,20,40,0) 48%);
  pointer-events: none;
}
.bb-hero__inner {
  position: absolute;
  z-index: 2;
  top: 5.6rem; right: 0; left: 0;
  max-width: var(--width-container);
  margin: 0 auto;
  padding: 0 var(--gap-container);
  text-align: right;
}

.bb-hero__byline {
  font-family: var(--font-data);
  font-size: 1.36rem;
  color: #fff;
  margin: 0 0 1.2rem;
}
.bb-hero__byline span {
  display: block;
  width: 6rem;
  margin: 0 0 0.9rem auto;
  border-top: 1px solid rgba(255,255,255,.85);
}
.bb-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.2rem, 7.4vw, 9.6rem);
  line-height: .98;
  max-width: 48%;           /* stacks a short headline, as the print does */
  min-width: min-content;   /* never break inside a word */
  overflow-wrap: normal;
  margin-left: auto;
  letter-spacing: -.005em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 1px 2.4rem rgba(0,20,40,.45);
}
/* The standfirst is the first block of the article, not an overlay:
   Ghost's excerpt field stops at 300 characters and these run longer. */
.gh-content > .bb-standfirst {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.92rem, 2.1vw, 2.4rem);
  line-height: 1.45;
  text-align: center;
  color: var(--navy);
  max-width: 62ch;
  margin: 1.6rem auto 4rem;
  text-wrap: pretty;
}
.gh-content > .bb-standfirst + p::first-letter,
.gh-content.drop-cap > .bb-standfirst + p::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  float: left;
  font-size: 3.9em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--navy);
}
.bb-hero__rule {
  height: 3px;
  background: var(--navy);
  max-width: var(--width-container);
  margin: 0 auto;
}
.bb-hero__credit {
  font-family: var(--font-data);
  font-size: 1.12rem;
  color: var(--muted);
  text-align: right;
  max-width: var(--width-container);
  margin: 0.8rem auto 0;
  padding: 0 var(--gap-container);
}

/* On a phone the overlay stops working — the type comes out from under it. */
@media (max-width: 800px) {
  .bb-hero__media { aspect-ratio: 4 / 3; }
  .bb-hero__media::after {
    background: linear-gradient(to bottom, rgba(0,20,40,.45) 0%, rgba(0,20,40,0) 55%);
  }
  .bb-hero__inner { top: 2.4rem; text-align: center; }
  .bb-hero__label { margin: 1.6rem auto; font-size: 1.12rem; }
  .bb-hero__label span { min-width: 0; }
  .bb-hero__title { max-width: none; }
  .bb-hero__byline { display: none; }
  .bb-hero__title {
    font-size: clamp(3.4rem, 10vw, 5.2rem);
    text-shadow: 0 1px 2rem rgba(0,20,40,.6);
  }
  .bb-hero__byline-below {
    display: block;
    font-family: var(--font-data);
    font-size: 1.28rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 1.2rem var(--gap-container) 0;
  }
}
.bb-hero__byline-below { display: none; }

/* --- Photographs in the body --------------------------------------------
   Styles Ghost's own image card, so authors just use /image and type a
   caption. The label-and-rule is the magazine's caption treatment.
   ------------------------------------------------------------------------ */

.gh-content .kg-image-card img,
.gh-content .kg-gallery-image img { display: block; }

.gh-content .kg-image-card figcaption,
.gh-content .kg-gallery-card figcaption {
  font-family: var(--font-data);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
  padding: 0.9rem 0 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.gh-content .kg-image-card figcaption::after,
.gh-content .kg-gallery-card figcaption::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  background: var(--navy);
}

/* --- End mark ------------------------------------------------------------ */

.bb-end {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: var(--navy);
  padding: 2px 0.7rem 3px;
  margin-left: 0.6rem;
  vertical-align: .05em;
}


/* Static placeholder tables (no Arion yet) */
.gh-content table.bb-static { margin: 3.2rem 0; }
.gh-content table.bb-static caption {
  font-family: var(--font-data);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: left;
  padding-bottom: 0.8rem;
}


/* Source's drop cap targets the first <p>, which is now the standfirst.
   Doubling the class outranks it (4 classes vs 3). */
.gh-content.drop-cap > p.bb-standfirst.bb-standfirst::first-letter {
  font-size: inherit;
  float: none;
  line-height: inherit;
  margin: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
}


/* ==========================================================================
   FEATURE OPENERS — second pass, from seven real articles
   The house pattern is a header block on paper: eyebrow, headline, byline,
   standfirst, heavy rule, then the photograph (or straight into text).
   The headline-over-photo treatment is the exception, not the rule.
   ========================================================================== */

.bb-open {
  max-width: var(--width-container);
  margin: 0 auto;
  padding: 3.2rem var(--gap-container) 0;
  text-align: center;
}

/* eyebrow: section in bold sans, subject in italic serif, on one line */
.bb-open__eyebrow {
  font-family: var(--font-data);
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 auto 3.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--navy);
  display: table;               /* rule hugs the text */
  min-width: 30rem;
}
.bb-open__eyebrow em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-left: 0.6rem;
}

.bb-open__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 6.6vw, 8.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}

/* the two-tone stacked variant: alternate lines change face and colour */
.bb-open__title .alt {
  font-family: var(--font-data);
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
}

.bb-open__byline {
  font-family: var(--font-data);
  font-size: 1.36rem;
  color: var(--ink);
  margin: 2.4rem auto 0;
}
.bb-open__byline::before {
  content: "";
  display: block;
  width: 5.6rem;
  margin: 0 auto 1rem;
  border-top: 1px solid var(--rule-2);
}

.bb-open__standfirst {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.84rem, 2vw, 2.24rem);
  line-height: 1.45;
  color: var(--navy);
  max-width: 66ch;
  margin: 2.4rem auto 0;
  text-wrap: pretty;
}

.bb-open__rule {
  max-width: var(--width-container);
  margin: 3.2rem auto 0;
  border-top: 3px solid var(--navy);
}

/* lead photograph: inset to the container, caption reversed inside it */
.bb-open__figure {
  position: relative;
  max-width: var(--width-container);
  margin: 3.2rem auto 0;
  padding: 0 var(--gap-container);
}
.bb-open__figure img {
  display: block;
  width: 100%;
  height: auto;
}
.bb-open__figure figcaption {
  position: absolute;
  left: calc(var(--gap-container) + 1.6rem);
  bottom: 1.6rem;
  font-family: var(--font-data);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 1rem rgba(0,20,40,.7);
}
.bb-open__figure--caption-top figcaption { bottom: auto; top: 1.6rem; }

/* a graphic-led opener: the image runs first, the headline sits under it */
.bb-open--graphic-first .bb-open__figure { margin-top: 0; order: -1; }

@media (max-width: 800px) {
  .bb-open { padding-top: 2rem; }
  .bb-open__eyebrow { min-width: 0; font-size: 1.12rem; margin-bottom: 2rem; }
  .bb-open__eyebrow em { display: block; margin: 0.4rem 0 0; }
  .bb-open__title { max-width: none; font-size: clamp(3.4rem, 9vw, 5.6rem); }
  .bb-open__figure { padding: 0; }
  .bb-open__figure figcaption { left: 1.2rem; bottom: 1.2rem; font-size: 1.12rem; }
}


/* A composed headline is hidden for the instant before its parts are marked
   up, so the pipe characters are never seen. No-JS falls back after a beat. */
.bb-open__title, .bb-hero__title { visibility: hidden; }
.bb-open__title.is-composed, .bb-hero__title.is-composed { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .bb-open__title, .bb-hero__title { animation: bb-reveal 0s 1.2s forwards; }
}
@keyframes bb-reveal { to { visibility: visible; } }

/* the sans half of a composed headline */
.bb-hero__title .alt {
  font-family: var(--font-data);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.01em;
}
.bb-open__title .alt { display: inline; }


/* ==========================================================================
   HOLDING BOXES
   A pedigree grid is never transcribed out of a press PDF — it comes back
   from Arion. Until then it holds its place and names its subject.
   ========================================================================== */

.gh-content .bb-pedigree {
  margin: 3.2rem 0;
  padding: 3.2rem 2.4rem;
  border: 1px solid var(--rule-2);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 3.4rem,
      var(--rule) 3.4rem 3.45rem);
  background-color: var(--panel);
  text-align: center;
}
.bb-pedigree__kind {
  font-family: var(--font-data);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.8rem;
}
.bb-pedigree__subject {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 3.4vw, 3.6rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 0;
}
.bb-pedigree__note {
  font-family: var(--font-data);
  font-size: 1.12rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.2rem 0 0;
}

/* something the printed page carried that the import cannot */
.gh-content .bb-marker {
  font-family: var(--font-data);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--brass);
  border: 1px dashed var(--brass);
  padding: 1.6rem 2rem;
  margin: 3.2rem 0;
  text-align: center;
}
.gh-content .bb-marker::before { content: "\2726\00a0\00a0"; }

.gh-content .bb-pedigree--unnamed { border-color: var(--brass); border-style: dashed; }
.bb-pedigree--unnamed .bb-pedigree__subject { color: var(--muted); font-style: normal;
  font-family: var(--font-data); font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase; }
.bb-pedigree--unnamed .bb-pedigree__note { color: var(--brass); text-transform: none; letter-spacing: 0; }

.gh-content .bb-pedigree--table { background-image: none; border-style: solid; }
.bb-pedigree--table .bb-pedigree__kind { color: var(--navy); }
.bb-pedigree--table .bb-pedigree__subject {
  font-family: var(--font-data); font-style: normal; font-weight: 700;
  font-size: 1.92rem; letter-spacing: .02em; color: var(--ink);
}


/* ==========================================================================
   SECTION ARTICLES
   The strands that run every issue. One opener for all of them; the section's
   own colour is the defining label. In print each strand had a different
   opener — Stallion Profile a navy colour field, the two profiles a portrait
   over the name — and they are the same shape underneath.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   Feature section banner
   A run of articles gathered under one masthead for an issue — NZ Sires, an
   Inglis sale preview. Print gives each its own device: NZ Sires a centred
   wordmark under a heavy rule, the sale preview a vertical blue spine. On
   screen they share one band, because the articles underneath are meant to
   look like everything else and it is the band that says they belong together.

   The wordmark is the tag's own name, split at the first space: the first word
   in the sans, the rest in the serif italic — the house pairing, and the
   reason "NZ Sires" and "Sale Preview" both read correctly without a setting.
   --------------------------------------------------------------------------- */
.bb-band {
  max-width: 68rem;
  margin: 0 auto 3.2rem;
  padding-top: 1.2rem;
  border-top: 4px solid var(--bb-section, var(--ink));
  text-align: center;
}
.bb-band__mark {
  display: inline-block;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 2.72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bb-section, var(--ink));
  text-decoration: none;
  line-height: 1.1;
}
.bb-band__mark .alt {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: .72;
  margin-left: .12em;
}
.bb-band__note {
  margin: 0.5rem 0 0;
  font-family: var(--font-data);
  font-size: 1.32rem;
  color: var(--muted);
}
.bb-featuresec .bb-sec { padding-top: 0; }

.bb-section { --bb-section: var(--navy); }
/* The section colour comes from the tag's accent_color, set in Ghost Admin.
   These are the same three colours keyed on the tag's own body class, so the
   sections are still told apart if a tag arrives without its colour — an
   import that drops the field, or a tag created by hand. accent_color, when
   present, is injected inline by the template and wins over these. */
/* A strand gets a colour; a kind does not. Feature Stud, First Season Sires
   and Industry Profile are cross-cutting labels that appear inside other
   strands — on a card they take the strand's colour from its primary tag, and
   on their own archive page they sit in the house ink. */
.tag-feature-stud,
.tag-first-season-sires,
.tag-industry-profile    { --bb-section: var(--ink); }

.tag-pedigree-analysis   { --bb-section: var(--section-pedigree-analysis); }
.tag-stud-news           { --bb-section: var(--section-stud-news); }
.tag-industry-news       { --bb-section: var(--section-industry-news); }
.tag-close-encounters    { --bb-section: var(--section-close-encounters); }
.tag-studs-from-the-past { --bb-section: var(--section-studs-from-the-past); }
.tag-vale                { --bb-section: var(--section-vale); }
.tag-nz-sires            { --bb-section: var(--section-nz-sires); }
.tag-sale-preview        { --bb-section: var(--section-sale-preview); }
.tag-stallion-profile    { --bb-section: var(--navy); }
.tag-personality-profile { --bb-section: var(--brass); }
.tag-mover-and-shaker    { --bb-section: var(--section-mover-and-shaker); }

.bb-sec {
  max-width: var(--width-container);
  margin: 0 auto;
  padding: 3.2rem var(--gap-container) 0;
  text-align: center;
}

.bb-sec__label {
  font-family: var(--font-data);
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bb-section);
  margin: 0 auto 2.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 3px solid var(--bb-section);
  display: table;
  min-width: 28rem;
}
.bb-sec__label a { color: inherit; text-decoration: none; }
.bb-sec__label em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-left: 0.6rem;
}

/* the portrait leads, as it does in print */
.bb-sec__figure { margin: 0 0 2.8rem; }
.bb-sec__figure img {
  display: block; width: 100%;
  /* Section leads are often a tall portrait. Left alone one fills the whole
     screen and the name never appears above the fold, which is the opposite
     of what an opener is for. Cap the height and crop rather than scale. */
  height: auto; max-height: 62vh; object-fit: cover; object-position: 50% 30%;
}
/* Captions on these leads are full sentences naming five people, not a
   two-word label, so they are set to be read rather than to be a rule. */
.bb-sec__figure figcaption {
  font-family: var(--font-data);
  font-size: 1.32rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--muted);
  text-align: left;
  max-width: 62rem;
  padding-top: 0.9rem;
}

/* the subject's name, not a headline about them */
.bb-sec__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.6rem, 5.4vw, 6.4rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.bb-sec__byline {
  font-family: var(--font-data);
  font-size: 1.36rem;
  color: var(--ink);
  margin: 2rem auto 0;
}
.bb-sec__byline::before {
  content: "";
  display: block;
  width: 5.6rem;
  margin: 0 auto 1rem;
  border-top: 1px solid var(--rule-2);
}

/* section standfirsts are set in the sans, not the serif — print's own choice */
.bb-sec__standfirst {
  font-family: var(--font-data);
  font-weight: 400;
  font-size: clamp(1.76rem, 1.9vw, 2.08rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
  margin: 2.4rem auto 0;
  text-wrap: pretty;
}

.bb-section .gh-content { margin-top: 4rem; }
/* A standfirst over 300 characters cannot live in Ghost's excerpt field, so
   it becomes the first block of the body instead. It still has to look like
   the standfirst it is — the reader should not be able to tell which field
   it came from. */
.bb-section .gh-content > p.bb-standfirst {
  max-width: 62rem; margin: 0 auto 3.4rem; text-align: center;
  font-family: var(--font-data); font-style: normal; font-weight: 400;
  font-size: 2.08rem; line-height: 1.45; color: var(--muted);
}
.bb-section .gh-content.drop-cap > p.bb-standfirst.bb-standfirst::first-letter {
  font-size: inherit; float: none; line-height: inherit; margin: 0;
  font-family: inherit; color: inherit; font-weight: inherit;
}
.bb-section .gh-content > h3 { border-bottom-color: var(--bb-section); }
.bb-section .gh-content.drop-cap > p:first-of-type::first-letter { color: var(--bb-section); }

/* --- interview questions -------------------------------------------------
   Mover & Shaker runs as a Q&A. The question is furniture, not a heading.
   ------------------------------------------------------------------------ */
.gh-content > p.bb-q {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--bb-section, var(--navy));
  margin: 3.2rem 0 0.8rem;
}
.gh-content > p.bb-q + p { margin-top: 0; }
/* An interview that opens straight on a question would otherwise hand the
   drop cap to the question itself. The drop cap marks where the prose starts,
   and in that layout the question already does that job, so it is cancelled
   rather than moved. */
.gh-content.drop-cap > p.bb-q.bb-q::first-letter {
  font-size: inherit; float: none; line-height: inherit; margin: 0;
  font-family: inherit; color: inherit; font-weight: inherit;
}

@media (max-width: 800px) {
  .bb-sec { padding-top: 2rem; }
  .bb-sec__label { min-width: 0; font-size: 1.12rem; }
  .bb-sec__label em { display: block; margin: 0.4rem 0 0; }
  .bb-sec__title { font-size: clamp(3rem, 8.5vw, 4.8rem); }
}


/* ---------------------------------------------------------------------------
   ARCHIVE AND FEED
   Every category and every feature section is a tag, so a tag's archive is
   that strand's front page — the place a reader lands from a navigation link
   or a search result. Left as the stock design it is the weakest surface on
   the site, and the one that decides whether the magazine reads as a magazine
   or as a blog with nice articles.

   The archive masthead is the same device as a feature section's banner, one
   size up: a heavy rule in the strand's colour, the name in the house pairing.
   The cards below it carry the same colour on their label, so a mixed feed
   reads as a contents page rather than a list.
   --------------------------------------------------------------------------- */

.bb-arch {
  max-width: 74rem;
  margin: 5.6rem auto 4.8rem;
  padding-top: 1.4rem;
  border-top: 4px solid var(--bb-section, var(--ink));
  text-align: center;
}
.bb-arch .bb-band__mark {
  font-size: 3.6rem;
  cursor: default;
}
.bb-arch__desc {
  max-width: 58rem;
  margin: 1.4rem auto 0;
  font-family: var(--font-data);
  font-size: 1.72rem;
  line-height: 1.5;
  color: var(--muted);
}
.bb-arch__count {
  margin-top: 1.6rem;
  font-family: var(--font-data);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rule-2);
}
.bb-arch__figure { margin: 3.2rem auto 0; max-width: 96rem; }
.bb-arch__figure img { width: 100%; max-height: 44vh; object-fit: cover; }

/* The feed --------------------------------------------------------------- */

.gh-container-title {
  display: block;
  font-family: var(--font-data);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 1rem;
  margin-bottom: 3.2rem;
  border-bottom: 1px solid var(--rule);
}

.gh-card { --bb-section: var(--navy); }
.gh-card-link { gap: 1.6rem; }
.gh-card-image { aspect-ratio: 3 / 2; }
.gh-card-image img { filter: saturate(.96); }

/* The label is the whole point of the card: it says which strand this is. */
.gh-card-tag {
  display: block;
  margin: 0 0 0.9rem;
  padding-bottom: 0.7rem;
  font-family: var(--font-data);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bb-section);
  border-bottom: 2px solid var(--bb-section);
}
.gh-card-title {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 2.48rem;
  line-height: 1.16;
  letter-spacing: 0;
  color: var(--ink);
}
.gh-card-excerpt {
  margin-top: 1rem;
  font-family: var(--font-data);
  font-size: 1.48rem;
  line-height: 1.5;
  color: var(--muted);
  -webkit-line-clamp: 3;
}
.gh-card-meta {
  margin-top: 1.4rem !important;
  font-family: var(--font-data);
  font-size: 1.2rem;
  letter-spacing: .04em;
  color: var(--rule-2);
}
.gh-card-author { color: var(--muted); }
.gh-card-author ~ .gh-card-date::before {
  content: "·"; margin: 0 .5em; color: var(--rule-2);
}
/* The label gives way to a bare rule on its own archive — the strand's colour
   still marks the card, without saying the same word nine times. */
.gh-card-tag.is-rule { margin-bottom: 1.3rem; padding-bottom: 0; min-height: 0; }

.gh-more.is-title a {
  font-family: var(--font-data);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}

@media (max-width: 700px) {
  .bb-arch { margin: 3.2rem auto 3.2rem; }
  .bb-arch .bb-band__mark { font-size: 2.6rem; }
  .gh-card-title { font-size: 2.16rem; }
}

.bb-arch__portrait { text-align: center; margin-top: -24px; }
.bb-arch__portrait img {
  display: inline-block; width: 8.8rem; height: 8.8rem;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule);
}


/* ---------------------------------------------------------------------------
   EDITION COVER
   Ghost has no idea what an issue is, so an edition is a tag and this is its
   front door. The contents below are read back out of that tag rather than
   kept by hand: add an article to the edition and the contents page changes
   with it.
   --------------------------------------------------------------------------- */

.bb-cover__figure { margin: 0 0 3.6rem; }
.bb-cover__figure img { width: 100%; max-height: 72vh; object-fit: cover; }

.bb-cover__head { max-width: 72rem; margin: 0 auto; text-align: center; }
.bb-cover__issue {
  margin: 0 0 1.6rem;
  font-family: var(--font-data);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bb-section, var(--ink));
}
.bb-cover__issue a { color: inherit; text-decoration: none; }
.bb-cover__title {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 6vw, 7.2rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
}
.bb-cover__standfirst {
  max-width: 58rem;
  margin: 2.4rem auto 0;
  font-family: var(--font-data);
  font-size: 2.08rem;
  line-height: 1.45;
  color: var(--muted);
}
.bb-cover__note { margin-top: 4rem; }

/* The contents ----------------------------------------------------------- */

.bb-toc { max-width: 74rem; margin: 6rem auto 2rem; }
.bb-toc__head {
  margin: 0 0 2.4rem;
  padding-bottom: 1rem;
  border-bottom: 4px solid var(--bb-section, var(--ink));
  font-family: var(--font-data);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bb-section, var(--ink));
}
.bb-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.bb-toc__item { counter-increment: toc; border-bottom: 1px solid var(--rule); }
.bb-toc__link {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 1.6rem;
  padding: 1.8rem 0;
  text-decoration: none;
  color: inherit;
}
.bb-toc__link:hover .bb-toc__title { color: var(--bb-section); opacity: 1; }
.bb-toc__num {
  font-family: var(--font-data);
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--rule-2);
  padding-top: 0.5rem;
}
.bb-toc__num::before { content: counter(toc, decimal-leading-zero); }
.bb-toc__label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-data);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bb-section, var(--navy));
}
.bb-toc__title {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 2.56rem;
  line-height: 1.15;
  color: var(--ink);
  transition: color .15s;
}
.bb-toc__by {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-data);
  font-size: 1.28rem;
  color: var(--muted);
}

@media (max-width: 700px) {
  .bb-toc__link { grid-template-columns: 3.6rem 1fr; gap: 1.2rem; padding: 1.4rem 0; }
  .bb-toc__title { font-size: 2.08rem; }
  .bb-cover__figure img { max-height: 56vh; }
}

/* A pull quote's attribution. Without this the cite runs straight on from the
   last word of the quote, which is how it first arrived. */
.gh-content blockquote cite {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--font-data);
  font-style: normal;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.gh-content blockquote cite::before { content: "— "; }


/* ---------------------------------------------------------------------------
   MATRIX
   A table where the colour of a cell IS the data — a generational descent
   chart, a better/worse comparison. Print sets these in saturated greens,
   pinks and oranges straight out of the layout program; on screen they are
   translated into the house palette, because the distinction has to survive
   without the page shouting. The subject of a piece takes the navy, its
   counterpart the brass, a warning the claret, and the unclassified nothing
   at all.

   A legend is not decoration here. Without it the colours mean nothing, so
   the block always carries one.
   --------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   THE MATRIX BLOCK — style the TABLE, never anything around it.

   Ghost does not serve the HTML we import. It converts the post into its own
   editor format, and only some of our markup survives the trip:

     survives   the <table> and its class, every cell and its class
     does not   the wrapping <figure>'s classes (Ghost claims a kg-card
                figure as its own), or a plain <div> wrapper

   So every rule below hangs off `table.bb-matrix__table`, `table.bb-matrix__key`
   or a `td.bb-cell--*`, and the caption lives in a <caption> INSIDE the table.
   Two earlier versions scoped through `.bb-matrix` on the figure and through
   the `.bb-matrix__scroll` wrapper; both looked perfect in preview and arrived
   on the site as a bare, colourless table.

   `.gh-content` appears only for weight. The house rule for prose tables —
   `.gh-content table:not(.bb-t) td` — is two classes and two elements, so a
   plainer selector loses to it and everything declared here would be thrown
   away in silence. Do not simplify these selectors.
   -------------------------------------------------------------------------- */

.bb-matrix { margin: 3.6rem 0; }
/* wide content scrolls inside its own box; the page never scrolls sideways.
   This wrapper does not survive import — Ghost supplies its own — so nothing
   load-bearing may depend on it. */
.bb-matrix__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.gh-content table.bb-matrix__table,
.gh-content table.bb-matrix__key { margin: 3.6rem 0 0; }
.gh-content table.bb-matrix__table {
  border-collapse: collapse; width: 100%; min-width: 460px;
  font-family: var(--font-data); font-size: 1.36rem;
}
/* The caption is part of the table, so it cannot be orphaned from it. */
.gh-content table.bb-matrix__table caption.bb-matrix__caption {
  caption-side: top; text-align: left; margin-bottom: 1.2rem;
}
.gh-content table.bb-matrix__table caption.bb-matrix__caption b {
  display: block;
  font-family: var(--font-data);
  font-size: 1.24rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 0.4rem;
}
.gh-content table.bb-matrix__table caption.bb-matrix__caption span {
  display: block;
  font-family: var(--font-data); font-size: 1.4rem; line-height: 1.45;
  color: var(--muted); max-width: 62rem;
}
.gh-content table.bb-matrix__table th {
  text-align: left; padding: 0.8rem 1.2rem 0.8rem 1.8rem;
  font-size: 1.12rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--rule-2);
  white-space: nowrap;
}
/* The left padding is deliberately larger than the right: a coloured cell
   paints its 0.4rem key rule INSIDE its own box, so text set close to the edge
   sits on top of the thing that gives it meaning. Every cell gets the same
   clearance, not only the coloured ones, so the columns still line up. */
.gh-content table.bb-matrix__table td {
  padding: 0.8rem 1.2rem 0.8rem 1.8rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink); vertical-align: top; white-space: nowrap;
}
.gh-content table.bb-matrix__table td small {
  display: block; font-size: .82em; color: var(--muted); }
.gh-content table.bb-matrix__table tbody tr:hover td {
  background: rgba(0,0,0,.015); }
.gh-content table.bb-matrix__table tr.is-rate td {
  font-size: 1.24rem; color: var(--muted); }

/* The fills are keyed on the CELL, not on its table, so they hold even in a
   post imported before the table carried a class of its own. Colour here is
   the content, so it is allowed to be seen; each fill also carries a solid
   left rule, so the distinction survives a colour-blind reader and greyscale
   print. The matrix and its key take the same fills — that is the point of a
   key. Left padding is repeated because these must also clear the rule when
   the table-level rule above has not matched. */
.gh-content table td.bb-cell--home {
  background: var(--fill-stone); box-shadow: inset 0.4rem 0 0 var(--rule-2);
  color: var(--ink); padding-left: 1.8rem; }
.gh-content table td.bb-cell--shuttle {
  background: var(--fill-navy); box-shadow: inset 0.4rem 0 0 var(--navy);
  color: var(--navy-deep); font-weight: 600; padding-left: 1.8rem; }
.gh-content table td.bb-cell--imported {
  background: var(--fill-brass); box-shadow: inset 0.4rem 0 0 var(--brass);
  color: var(--on-fill-brass); font-weight: 600; padding-left: 1.8rem; }
.gh-content table td.bb-cell--both {
  background: var(--fill-both); box-shadow: inset 0.4rem 0 0 var(--brass);
  color: var(--on-fill-brass); font-weight: 600; padding-left: 1.8rem; }
.gh-content table td.bb-cell--better {
  background: var(--fill-navy); box-shadow: inset 0.4rem 0 0 var(--navy);
  color: var(--navy-deep); font-weight: 700; padding-left: 1.8rem; }
.gh-content table td.bb-cell--similar {
  background: var(--fill-stone); box-shadow: inset 0.4rem 0 0 var(--rule-2);
  color: var(--ink); font-weight: 600; padding-left: 1.8rem; }
.gh-content table td.bb-cell--worse {
  background: var(--fill-claret); box-shadow: inset 0.4rem 0 0 var(--section-mover-and-shaker);
  color: var(--on-fill-claret); font-weight: 700; padding-left: 1.8rem; }
.gh-content table td.bb-cell--mark {
  background: var(--fill-brass); box-shadow: inset 0.4rem 0 0 var(--brass);
  color: var(--on-fill-brass); font-weight: 700; padding-left: 1.8rem; }

/* The key is a table, and each label sits INSIDE its own coloured cell.
   It was once a row of empty swatches with the text beside them, which looked
   right in preview and arrived in Ghost as three run-together words — Ghost
   drops empty inline elements. So nothing here is an empty element, and
   nothing depends on flex: with the stylesheet stripped entirely this is still
   three labelled boxes. */
.gh-content table.bb-matrix__key {
  border-collapse: separate; border-spacing: 8px 0;
  margin: 1.6rem 0 0; margin-left: -8px;
  width: auto; min-width: 0; table-layout: auto;
  font-family: var(--font-data);
}
.gh-content table.bb-matrix__key td {
  font-size: 1.24rem; font-weight: 600;
  padding: 0.7rem 1.4rem 0.7rem 2rem;
  border: 1px solid var(--rule);
  white-space: normal; line-height: 1.3;
  vertical-align: middle;
}
@media (max-width: 700px) {
  .gh-content table.bb-matrix__key,
  .gh-content table.bb-matrix__key tbody,
  .gh-content table.bb-matrix__key tr,
  .gh-content table.bb-matrix__key td { display: block; width: 100%; }
  .gh-content table.bb-matrix__key td { margin-bottom: 0.6rem; }
  .gh-content table.bb-matrix__table { font-size: 1.24rem; }
  .gh-content table.bb-matrix__table td,
  .gh-content table.bb-matrix__table th {
    padding: 0.6rem 0.8rem 0.6rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   THE WEEKLY — the heartbeat send, and the data blocks it carries.

   Same survival rules as the matrix: everything hangs off a class on the
   TABLE or on a cell, and each block's heading is a <caption> inside its own
   table. `.gh-content` is present for weight against the house prose-table
   rule, not for structure.
   -------------------------------------------------------------------------- */

.bb-weekly__head { max-width: 72rem; margin: 0 auto 3.2rem; padding: 0 2rem; }
.bb-weekly__mast {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.6rem; margin: 0 0 1.6rem; padding-bottom: 1rem;
  border-bottom: 2px solid var(--navy);
  font-family: var(--font-data);
  font-size: 1.24rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.bb-weekly__mast a { color: var(--navy); text-decoration: none; }
.bb-weekly__mast time { color: var(--muted); letter-spacing: .1em; }
.bb-weekly__title {
  font-size: clamp(3.2rem, 4.4vw, 4.6rem); line-height: 1.1;
  margin: 0 0 1.2rem; color: var(--ink);
}
.bb-weekly__standfirst {
  font-size: 1.9rem; line-height: 1.5; color: var(--muted);
  margin: 0 0 1.2rem; max-width: 58rem;
}
.bb-weekly__byline {
  font-family: var(--font-data); font-size: 1.3rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.bb-weekly__figure { margin: 2.8rem 0 0; }
.bb-weekly__figure img { width: 100%; height: auto; display: block; }
.bb-weekly__figure figcaption {
  font-family: var(--font-data); font-size: 1.28rem; line-height: 1.45;
  color: var(--muted); margin-top: 0.8rem;
}

/* ---- the week's black-type results ---- */

.bb-stakes, .bb-entry, .bb-ped { margin: 3.6rem 0; }
.bb-stakes__scroll, .bb-entry__scroll, .bb-ped__scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; }

.gh-content table.bb-stakes__table {
  border-collapse: collapse; width: 100%; min-width: 520px;
  font-family: var(--font-data); font-size: 1.36rem;
}
.gh-content table.bb-stakes__table caption.bb-stakes__caption,
.gh-content table.bb-entry__table caption.bb-entry__caption,
.gh-content table.bb-ped__table caption.bb-ped__caption {
  caption-side: top; text-align: left; margin-bottom: 1.2rem;
}
.gh-content table.bb-stakes__table caption b,
.gh-content table.bb-entry__table caption b,
.gh-content table.bb-ped__table caption b {
  display: block; font-family: var(--font-data);
  font-size: 1.24rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 0.4rem;
}
.gh-content table.bb-stakes__table caption span,
.gh-content table.bb-entry__table caption span,
.gh-content table.bb-ped__table caption span {
  display: block; font-family: var(--font-data); font-size: 1.4rem;
  line-height: 1.45; color: var(--muted); max-width: 62rem;
}
.gh-content table.bb-stakes__table th {
  text-align: left; padding: 0.8rem 1.2rem;
  font-size: 1.12rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid var(--rule-2);
  white-space: nowrap;
}
.gh-content table.bb-stakes__table td {
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--rule);
  color: var(--ink); vertical-align: top;
}
.gh-content table.bb-stakes__table td b { font-weight: 700; }
.gh-content table.bb-stakes__table td small {
  display: block; font-size: 1.18rem; line-height: 1.35;
  color: var(--muted); margin-top: 2px;
}
.gh-content table.bb-stakes__table td.bb-stakes__when {
  white-space: nowrap; color: var(--muted); font-size: 1.24rem; }
.gh-content table.bb-stakes__table td.bb-stakes__winner b {
  color: var(--navy-deep); }

/* The grade is the one place colour carries meaning here, so it is a chip
   rather than another weight of the same grey. */
.gh-content table.bb-stakes__table td small.bb-grade--g1,
.gh-content table.bb-stakes__table td small.bb-grade--g2,
.gh-content table.bb-stakes__table td small.bb-grade--g3,
.gh-content table.bb-stakes__table td small.bb-grade--l {
  display: inline-block; margin: 0 0 0 0.6rem; padding: 1px 0.6rem;
  font-size: 1.04rem; font-weight: 700; letter-spacing: .08em;
  border-radius: 2px; vertical-align: 2px;
}
.gh-content table.bb-stakes__table td small.bb-grade--g1 {
  background: var(--navy); color: #fff; }
.gh-content table.bb-stakes__table td small.bb-grade--g2 {
  background: var(--fill-navy); color: var(--navy-deep); }
.gh-content table.bb-stakes__table td small.bb-grade--g3 {
  background: var(--fill-stone); color: var(--on-fill-stone); }
.gh-content table.bb-stakes__table td small.bb-grade--l {
  background: transparent; color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--rule-2); }

/* ---- one race, set the way print sets a Group 1 ---- */

.gh-content table.bb-entry__table {
  border-collapse: collapse; width: 100%; min-width: 520px;
  font-family: var(--font-data); font-size: 1.36rem;
}
.gh-content table.bb-entry__table th {
  text-align: left; padding: 0.8rem 1.2rem;
  font-size: 1.12rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--rule-2); white-space: nowrap;
}
.gh-content table.bb-entry__table td {
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--rule);
  color: var(--ink); vertical-align: top;
}
.gh-content table.bb-entry__table td small {
  display: block; font-size: 1.18rem; color: var(--muted); margin-top: 2px; }
.gh-content table.bb-entry__table td.bb-entry__pos {
  font-weight: 700; color: var(--brass); width: 3rem; }
.gh-content table.bb-entry__table tbody tr:first-child td {
  background: var(--tint-sand); }
.gh-content table.bb-entry__table td.bb-entry__margin {
  white-space: nowrap; color: var(--muted); }
.gh-content table.bb-entry__strip {
  border-collapse: separate; border-spacing: 8px 0; margin: 12px 0 0 -8px;
  width: auto; font-family: var(--font-data); }
.gh-content table.bb-entry__strip td {
  padding: 0.6rem 1.2rem; font-size: 1.2rem; font-weight: 600;
  color: var(--navy-deep); background: var(--tint-sky);
  border: 1px solid var(--rule); white-space: nowrap; }
.gh-content table.bb-entry__detail {
  border-collapse: collapse; width: 100%; margin: 20px 0 0;
  font-family: var(--font-data); font-size: 1.3rem; }
.gh-content table.bb-entry__detail caption {
  caption-side: top; text-align: left; margin-bottom: 0.8rem;
  font-size: 1.24rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass); }
.gh-content table.bb-entry__detail th {
  text-align: left; width: 12rem; padding: 0.7rem 1.2rem 0.7rem 0;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--rule); vertical-align: top; }
.gh-content table.bb-entry__detail td {
  padding: 0.7rem 0; border-bottom: 1px solid var(--rule);
  color: var(--ink); vertical-align: top; }

/* ---- the pedigree grid ---- */

.gh-content table.bb-ped__table {
  border-collapse: collapse; width: 100%; min-width: 580px;
  font-family: var(--font-data); font-size: 1.24rem; }
.gh-content table.bb-ped__table td {
  padding: 0.7rem 1rem; border: 1px solid var(--rule);
  vertical-align: middle; color: var(--ink); white-space: nowrap; }
.gh-content table.bb-ped__table td small {
  display: block; font-size: 1.04rem; color: var(--muted); }
/* Generation one is the sire and the dam, and reads as a heading. */
.gh-content table.bb-ped__table td:first-child {
  font-weight: 700; background: var(--tint-sand); }
/* A repeated ancestor is the argument the grid exists to make, so both
   appearances take the same fill. */
.gh-content table.bb-ped__table td.bb-ped__dup--1 {
  background: var(--fill-navy); color: var(--navy-deep); font-weight: 600; }
.gh-content table.bb-ped__table td.bb-ped__dup--2 {
  background: var(--fill-brass); color: var(--on-fill-brass); font-weight: 600; }
.gh-content table.bb-ped__table td.bb-ped__dup--3 {
  background: var(--fill-stone); color: var(--on-fill-stone); font-weight: 600; }

@media (max-width: 700px) {
  .gh-content table.bb-stakes__table,
  .gh-content table.bb-entry__table { font-size: 1.24rem; }
  .gh-content table.bb-stakes__table td,
  .gh-content table.bb-entry__table td { padding: 0.8rem; }
  .bb-weekly__head { padding: 0 1.6rem; }
}

/* --------------------------------------------------------------------------
   An issue's contents, baked into the carrier's own body.

   The cover template used to build this list with a {{#get}} helper. Ghost's
   email renderer does not run the theme, so that list was absent from the one
   email an issue gets -- which is the email's entire purpose. It is now a
   table in the post body, and styled here the way the dynamic list was.
   Everything hangs off the table itself: see the note above .bb-matrix.
-------------------------------------------------------------------------- */
.gh-content table.bb-toc__table {
    width: 100%;
    border-collapse: collapse;
    margin: 3.2rem 0;
    font-family: var(--font-data);
}
.gh-content table.bb-toc__table caption.bb-toc__caption {
    text-align: left;
    padding: 0 0 1.2rem;
    border-bottom: 2px solid currentColor;
}
.gh-content table.bb-toc__table caption.bb-toc__caption b {
    display: block;
    font-size: 1.3rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.gh-content table.bb-toc__table caption.bb-toc__caption span {
    display: block;
    margin-top: 0.4rem;
    font-size: 1.3rem;
    opacity: .62;
}
.gh-content table.bb-toc__table td {
    padding: 1.1rem 0.8rem;
    border-bottom: 1px solid rgba(128, 128, 128, .28);
    vertical-align: baseline;
}
.gh-content table.bb-toc__table td.bb-toc__n {
    width: 3.2rem;
    font-variant-numeric: tabular-nums;
    opacity: .5;
    font-size: 1.4rem;
}
.gh-content table.bb-toc__table td.bb-toc__t a {
    text-decoration: none;
    box-shadow: none;
}
.gh-content table.bb-toc__table td.bb-toc__t a b {
    font-size: 1.8rem;
    line-height: 1.25;
}
.gh-content table.bb-toc__table td.bb-toc__t a:hover b { text-decoration: underline; }
.gh-content table.bb-toc__table td.bb-toc__t small {
    display: block;
    margin-top: 2.5px;
    font-size: 1.2rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
}

/* --------------------------------------------------------------------------
   The stakes explorer's controls.

   Built in JavaScript and inserted before the table, so nothing here has to
   survive Ghost's import. With JavaScript off none of this exists and the
   table below it is still the complete results.
-------------------------------------------------------------------------- */
.bb-explore {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    margin: 2.4rem 0 1.2rem;
}
.bb-explore__q {
    flex: 1 1 24rem;
    min-width: 0;
    padding: 0.9rem 1.2rem;
    font-size: 1.5rem;
    font-family: inherit;
    border: 1px solid rgba(128, 128, 128, .45);
    border-radius: 4px;
    background: transparent;
    color: inherit;
}
.bb-explore__grade,
.bb-explore__sort {
    padding: 0.9rem 1rem;
    font-size: 1.4rem;
    font-family: inherit;
    border: 1px solid rgba(128, 128, 128, .45);
    border-radius: 4px;
    background: transparent;
    color: inherit;
}
.bb-explore__count {
    flex: 1 0 100%;
    margin: 0;
    font-size: 1.3rem;
    opacity: .62;
}
.bb-explore__count.is-empty { opacity: 1; }
@media (max-width: 600px) {
    .bb-explore__q { flex: 1 1 100%; }
}

/* The cover shows ONE contents list. Where the post body carries a baked one
   (the only kind that survives into the email), the template's dynamic list
   stands down. Editions built before this still have no baked table, so
   theirs keeps rendering -- which is why this is a stylesheet rule rather
   than a change to custom-cover.hbs. If :has() is unsupported the worst case
   is the list appearing twice, not a page that breaks. */
.bb-cover__note:has(table.bb-toc__table) ~ .bb-toc { display: none; }

/* --------------------------------------------------------------------------
   A wide statistics table.

   Thirteen columns do not fit the reading column, and the browser's answer to
   that is to break "3.57" after the "3.5" and stack a heading as "STA RTE RS".
   Letting the table size to its own content and scroll inside itself is the
   same disclosure the Arion mobile reports use.

   Everything is declared on the table, never on a wrapper: Ghost keeps the
   table and its class and discards the figure and the div.
-------------------------------------------------------------------------- */
.gh-content table.bb-static--wide {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}
.gh-content table.bb-static--wide th {
    white-space: nowrap;
    vertical-align: bottom;
}
.gh-content table.bb-static--wide td {
    white-space: nowrap;
    padding: 0.7rem 1rem;
}
/* The one column that is prose rather than a figure is allowed to wrap. */
.gh-content table.bb-static--wide td:nth-child(2) {
    white-space: normal;
    min-width: 18rem;
}
.gh-content table.bb-static--wide caption {
    position: sticky;
    left: 0;
    text-align: left;
}

/* PROPOSED: Statistics owns a colour. The theme has no rule for its tag yet. */
.tag-statistics { --bb-section: var(--section-statistics); }

/* ======================================================================
   PART 2 — PROPOSED. Issue furniture, 21 Sep 2026. Rendered by the theme (post.hbs)
   from the issue tag, so these are ordinary elements, not Ghost-proof
   tables. Web only; email keeps the baked bb-toc__table.
   ====================================================================== */
.bb-issue { font-family: var(--font-body); color: var(--ink); background: var(--paper); --bb-section: var(--navy); }
.bb-issue a { color: inherit; text-decoration: none; }
.bb-issue a:hover .bb-issue__title, .bb-issue a:hover .bb-issue-bar__name { text-decoration: underline; text-decoration-color: var(--navy); }
.bb-issue a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.bb-issue .bb-eyebrow { font: 700 1.12rem/1.2 var(--font-data); letter-spacing: .16em; text-transform: uppercase; color: var(--bb-section); }
.bb-issue .bb-meta { font: 400 1.152rem/1.3 var(--font-data); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }

/* Issue badge: sits in the meta line of an article or a card */
.bb-issue-badge {
  display: inline-block; padding: 3px var(--space-2) 2px; border: 1px solid var(--navy); border-radius: var(--radius-badge);
  font: 700 1.04rem/1.3 var(--font-data); letter-spacing: .10em; text-transform: uppercase; color: var(--navy); white-space: nowrap;
}
.bb-issue-badge--filled { background: var(--navy); color: var(--on-navy); }
.bb-issue-badge b { font-weight: 700; }
.bb-issue-badge i { font-style: normal; font-weight: 400; }

/* Back-to-issue bar: the first thing on an article page, under the site nav */
.bb-issue-bar { display: flex; align-items: center; gap: var(--space-4); max-width: var(--width-container); margin: 0 auto; padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.bb-issue-bar__back { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.bb-issue-bar__back .bb-eyebrow { color: var(--navy); white-space: nowrap; }
.bb-issue-bar__name { font: italic 400 1.68rem/1.2 var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-issue-bar__count { margin-left: auto; font: 400 1.152rem/1.3 var(--font-data); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-issue-bar__step { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border: 1px solid var(--rule-2); color: var(--navy); font: 400 1.8rem/1 var(--font-body); }
.bb-issue-bar__step:hover { border-color: var(--navy); }
.bb-issue-bar__step[aria-disabled="true"] { color: var(--rule-2); pointer-events: none; }

/* Next / previous: the end of an article */
.bb-issue-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: var(--width-reading); margin: var(--space-8) auto 0; padding-top: var(--space-5); border-top: 2px solid var(--rule-2); }
.bb-issue-pager__prev, .bb-issue-pager__next { display: block; min-width: 0; }
.bb-issue-pager__next { text-align: right; }
.bb-issue-pager .bb-eyebrow { display: block; margin-bottom: var(--space-2); }
.bb-issue-pager .bb-eyebrow i { font-style: normal; color: var(--muted); }
.bb-issue-pager .bb-issue__title { display: block; font: italic 400 2.48rem/1.16 var(--font-body); color: var(--ink); }
.bb-issue-pager__prev .bb-issue__title::before { content: "← "; color: var(--navy); }
.bb-issue-pager__next .bb-issue__title::after { content: " →"; color: var(--navy); }
.bb-issue-pager__end { color: var(--muted); font: 400 1.152rem/3.6rem var(--font-data); letter-spacing: .10em; text-transform: uppercase; }

/* In this issue: after the pager, the rest of the issue */
.bb-issue-list { max-width: var(--width-reading); margin: var(--space-7) auto 0; }
.bb-issue-list__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--space-3); border-bottom: 2px solid var(--navy); }
.bb-issue-list__head h2 { margin: 0; font: 700 1.36rem/1.3 var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.bb-issue-list__head a { font: 700 1.12rem/1.3 var(--font-data); letter-spacing: .10em; text-transform: uppercase; color: var(--brass); }
.bb-issue-list ol { list-style: none; margin: 0; padding: 0; }
.bb-issue-list li { display: grid; grid-template-columns: 14.8rem 1fr auto; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.bb-issue-list li .bb-issue__title { font: italic 400 1.68rem/1.3 var(--font-body); color: var(--ink); }
.bb-issue-list li .bb-issue__no { font: 400 1.152rem/1.3 var(--font-data); letter-spacing: .10em; color: var(--muted); font-variant-numeric: tabular-nums; }
.bb-issue-list li.kind .bb-eyebrow { color: var(--ink); }
.bb-issue-list li.current { box-shadow: inset 3px 0 0 var(--navy); margin-left: calc(-1 * var(--space-4)); padding-left: var(--space-4); }
.bb-issue-list li.current .bb-issue__title { font-weight: 700; }
.bb-issue-list li.current .bb-issue__no::after { content: " · reading"; letter-spacing: .10em; text-transform: uppercase; }
[data-theme="dark"] .bb-issue [class*="tag-"] .bb-eyebrow { display: inline-block; padding: 3px 0.6rem 2px; background: var(--bb-section); color: var(--on-section); }
[data-theme="dark"] .bb-issue .kind .bb-eyebrow { background: transparent; padding: 0; color: var(--ink); }

/* ======================================================================
   Issue home (custom-cover.hbs) — PROPOSED, 21 Sep 2026. The page an issue
   opens on: masthead, the real cover head, a lead and three features, a
   sticky jump strip, the contents section by section as baked tables, the
   way in. Theme-rendered except the contents tables, which are baked.
   ====================================================================== */
.bb-page { max-width: var(--width-container); margin: 0 auto; padding: 0 var(--gap-container); font-family: var(--font-body); color: var(--ink); --bb-section: var(--navy); }
.bb-page .bb-eyebrow { font: 700 1.12rem/1.2 var(--font-data); letter-spacing: .16em; text-transform: uppercase; color: var(--bb-section); }
.bb-page .bb-meta    { font: 400 1.152rem/1.3 var(--font-data); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
.bb-page .bb-byline  { font: 700 1.28rem/1.3 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.bb-page .bb-byline i { font-style: normal; font-weight: 400; color: var(--muted); letter-spacing: .10em; }
.bb-page a { color: inherit; text-decoration: none; }
.bb-page a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.bb-page__masthead { display: flex; align-items: flex-end; justify-content: space-between; padding: var(--space-5) 0 var(--space-3); border-bottom: 2px solid var(--ink); }
.bb-page__masthead img { display: block; height: 4rem; width: auto; }
.bb-page__masthead .bb-meta { color: var(--ink); }
.bb-page__nav { display: flex; gap: var(--space-6); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); font: 600 1.152rem/1.3 var(--font-data); letter-spacing: .14em; text-transform: uppercase; }
.bb-page__nav a { color: var(--ink); }
.bb-page__nav a.is-current { color: var(--navy); box-shadow: 0 0.6rem 0 -4px var(--navy); }
.bb-page__nav .bb-issue-badge { margin-left: auto; align-self: center; }
.bb-page .bb-cover__head { margin: var(--space-8) auto var(--space-7); }
.bb-page .bb-cover__dates { margin: var(--space-5) 0 0; font: 400 1.152rem/1.3 var(--font-data); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }

/* lead feature + three features: tables, so they survive in the carrier */
.bb-page table.bb-lead { width: 100%; border-collapse: collapse; margin-top: var(--space-7); border-top: 3px solid var(--navy); }
.bb-page table.bb-lead td { padding: var(--space-5) 0 0; border: 0; vertical-align: top; }
.bb-page table.bb-lead td.bb-lead__art { width: 58%; padding-right: var(--space-6); }
.bb-page .bb-art { display: block; aspect-ratio: 3 / 2; background: var(--paper-2); border: 1px solid var(--rule); }
.bb-page .bb-art i { display: block; padding: var(--space-3); font: 400 1.04rem/1.3 var(--font-data); font-style: normal; letter-spacing: .10em; text-transform: uppercase; color: var(--ink); }
.bb-page table.bb-lead .bb-eyebrow { display: block; margin-bottom: var(--space-3); }
.bb-page table.bb-lead h2 { margin: 0 0 var(--space-4); font: italic 400 6.56rem/1.03 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.bb-page table.bb-lead .bb-standfirst { display: block; margin: 0 0 var(--space-5); font: italic 400 2.24rem/1.45 var(--font-display); color: var(--navy); }
.bb-page table.bb-lead .bb-byline { display: block; padding-top: var(--space-3); border-top: 1px solid var(--bb-section); }
.bb-page table.bb-features { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: var(--space-7); border-top: 2px solid var(--rule-2); }
.bb-page table.bb-features td { width: 33.33%; padding: var(--space-5) var(--space-5) var(--space-6) 0; border: 0; border-right: 1px solid var(--rule); vertical-align: top; }
.bb-page table.bb-features td + td { padding-left: var(--space-5); }
.bb-page table.bb-features td:last-child { border-right: 0; padding-right: 0; }
.bb-page table.bb-features .bb-art { aspect-ratio: auto; height: 24rem; margin-bottom: var(--space-4); }
.bb-page table.bb-features .bb-eyebrow { display: block; margin-bottom: var(--space-2); }
.bb-page table.bb-features h3 { margin: 0 0 var(--space-3); font: italic 400 2.48rem/1.16 var(--font-body); color: var(--ink); }
.bb-page table.bb-features p { margin: 0 0 var(--space-3); font: 400 1.48rem/1.5 var(--font-data); color: var(--muted); }

/* jump strip: the issue's sections, sticky */
.bb-page__jump { position: sticky; top: 0; z-index: 2; display: flex; gap: var(--space-5); margin-top: var(--space-8); padding: var(--space-3) 0; background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); font: 700 1.12rem/1.3 var(--font-data); letter-spacing: .16em; text-transform: uppercase; }
.bb-page__jump span:first-child { color: var(--brass); white-space: nowrap; }
.bb-page__jump a { color: var(--navy); }
.bb-page__jump a i { font-style: normal; font-weight: 400; color: var(--muted); letter-spacing: .10em; }
.bb-page__jump a.bb-page__jump-start { margin-left: auto; color: var(--ink); }
.bb-page__jump a.bb-page__jump-start::after { content: " →"; color: var(--navy); }

/* contents by section: the theme's baked table, one per section, at container width */
.bb-page table.bb-toc__table { margin: var(--space-8) 0 0; }
.bb-page table.bb-toc__table caption.bb-toc__caption { border-bottom-color: var(--bb-section); color: var(--ink); }
.bb-page table.bb-toc__table caption.bb-toc__caption b { font: 400 4.8rem/1.05 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--ink); }
.bb-page table.bb-toc__table caption.bb-toc__caption span { font: 400 1.152rem/1.3 var(--font-data); letter-spacing: .10em; text-transform: uppercase; opacity: 1; color: var(--muted); }
.bb-page table.bb-toc__table caption.bb-toc__caption span a { color: var(--navy); }
.bb-page table.bb-toc__table td.bb-toc__t a b { font: italic 400 2.56rem/1.15 var(--font-body); color: var(--ink); }
.bb-page table.bb-toc__table td.bb-toc__t small { opacity: 1; color: var(--bb-section); font-weight: 700; }
.bb-page table.bb-toc__table td.bb-toc__t small i { font-style: normal; font-weight: 400; color: var(--muted); }
.bb-page table.bb-toc__table td.bb-toc__x { font: 300 1.84rem/1.5 var(--font-body); color: var(--ink); }
.bb-page table.bb-toc__table td.bb-toc__min { width: 7.2rem; text-align: right; font: 400 1.152rem/1.3 var(--font-data); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* the way in and out */
.bb-page__foot { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); margin: var(--space-9) 0 var(--space-8); padding-top: var(--space-5); border-top: 2px solid var(--ink); }
.bb-page__foot .bb-eyebrow { display: block; margin-bottom: var(--space-2); color: var(--navy); }
.bb-page__foot .bb-eyebrow i { font-style: normal; color: var(--muted); }
.bb-page__foot .bb-issue__title { display: block; font: italic 400 2.48rem/1.16 var(--font-body); color: var(--ink); }
.bb-page__foot .bb-page__foot-mid { text-align: center; }
.bb-page__foot .bb-page__foot-next { text-align: right; }
.bb-page__foot .bb-page__foot-mid .bb-issue__title::after, .bb-page__foot .bb-page__foot-next .bb-issue__title::after { content: " →"; color: var(--navy); }
.bb-page__foot .bb-page__foot-prev .bb-issue__title::before { content: "← "; color: var(--navy); }
.bb-page__foot .bb-meta { display: block; margin-top: var(--space-2); }
.bb-page__colophon { padding: var(--space-5) 0 var(--space-8); border-top: 1px solid var(--rule); font: 400 1.152rem/1.6 var(--font-data); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
[data-theme="dark"] .bb-page [class*="tag-"] .bb-eyebrow, [data-theme="dark"] .bb-page [class*="tag-"] td.bb-toc__t small { display: inline-block; padding: 3px 0.6rem 2px; margin-bottom: var(--space-2); background: var(--bb-section); color: var(--on-section); }
[data-theme="dark"] .bb-page .kind .bb-eyebrow, [data-theme="dark"] .bb-page .kind td.bb-toc__t small { background: transparent; padding: 0; color: var(--ink); }
[data-theme="dark"] .bb-page [class*="tag-"] td.bb-toc__t small i { color: var(--on-section); opacity: .8; }
.bb-page .bb-page__contents { font-size: 1.68rem; }
.bb-page table.bb-toc__table caption.bb-toc__caption { padding-bottom: var(--space-3); }
.bb-page table.bb-toc__table td { vertical-align: top; padding: var(--space-4) var(--space-2); }
.bb-page table.bb-toc__table td.bb-toc__t { width: 42%; }

/* ======================================================================
   Statistics article — PROPOSED, 21 Sep 2026. Three additions to a long
   statistics piece, each on a table or a details element so it survives
   Ghost: an index of what the article sets, a run line between sets, and
   a fold for the pedigree grid. The details/summary fold needs a Ghost
   round-trip test before it is relied on.
   ====================================================================== */
.gh-content table.bb-index { width: 100%; border-collapse: collapse; margin: 3.2rem 0 4.8rem; font-family: var(--font-data); font-size: 1.36rem; border-top: 3px solid var(--bb-section, var(--navy)); }
.gh-content table.bb-index caption { caption-side: top; text-align: left; padding: 1.2rem 0 1.2rem; }
.gh-content table.bb-index caption b { display: block; font-size: 1.24rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.4rem; }
.gh-content table.bb-index caption span { display: block; font-size: 1.4rem; line-height: 1.45; color: var(--muted); max-width: 62rem; }
.gh-content table.bb-index td { width: 33.33%; padding: 1rem 1.2rem 1rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.gh-content table.bb-index td a { color: var(--ink); text-decoration: none; display: block; }
.gh-content table.bb-index td a b { display: block; font-weight: 700; color: var(--ink); }
.gh-content table.bb-index td a small { display: block; font-size: 1.18rem; color: var(--muted); margin-top: 2px; }
.gh-content table.bb-index td a:hover b { text-decoration: underline; text-decoration-color: var(--brass); }
.gh-content table.bb-run { width: 100%; border-collapse: collapse; margin: 2.4rem auto 5.6rem; font-family: var(--font-data); font-size: 1.12rem; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.gh-content table.bb-run td { padding: 1rem 0; border: 0; white-space: nowrap; }
.gh-content table.bb-run td a { color: var(--navy); text-decoration: none; }
.gh-content table.bb-run td span { color: var(--rule-2); }
.gh-content table.bb-run td.bb-run__up { text-align: center; }
.gh-content table.bb-run td.bb-run__up a { color: var(--brass); }
.gh-content table.bb-run td.bb-run__next { text-align: right; }
.gh-content .bb-fold { margin: 2rem auto 0; border: 1px solid var(--rule-2); background: var(--panel); }
.gh-content .bb-fold summary { cursor: pointer; list-style: none; padding: 1.2rem 1.6rem; font-family: var(--font-data); display: flex; align-items: baseline; gap: 1.2rem; }
.gh-content .bb-fold summary::-webkit-details-marker { display: none; }
.gh-content .bb-fold summary::before { content: "+"; font-weight: 700; color: var(--brass); width: 1.4rem; }
.gh-content .bb-fold[open] summary::before { content: "−"; }
.gh-content .bb-fold summary b { font-size: 1.24rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); }
.gh-content .bb-fold summary span { font-size: 1.24rem; color: var(--muted); }
.gh-content .bb-fold[open] summary { border-bottom: 1px solid var(--rule); }
.gh-content .bb-fold > figure { margin: 0; padding: 1.6rem; }
.gh-content .bb-fold > figure table.bb-ped__table caption { display: none; }

/* ======================================================================
   Pedigree grid — PROPOSED fixes, 22 Sep 2026.
   1. The theme's `td:first-child` rule was meant for generation one but
      hits the first cell of EVERY row, so half the fifth generation came
      out bold on the sand tint. Generation one is found by its rowspan
      instead; the sire and the dam are told apart, sire cool, dam warm
      and lighter, in the pairing the theme already uses for the grid's
      div form (cell--sire navy, cell--dam brass).
   2. Half the height: the fifth generation sets the row pitch, so its
      cells are one line — the note sits beside the name, padding is
      2px, the type a step smaller.
   ====================================================================== */
.gh-content table.bb-ped__table td:first-child { font-weight: inherit; background: none; }
.gh-content table.bb-ped__table td { padding: 2px 0.8rem; font-size: 1.16rem; line-height: 1.3; }
.gh-content table.bb-ped__table td small { display: inline; font-size: 1.04rem; color: var(--muted); margin-left: 0.6rem; }
/* generation one. The sire is the first cell of the first row whatever the
   depth; the dam is the first cell of the row where the bottom half starts
   (17 in five generations, 9 in four, 5 in three), told apart with :has(). */
.gh-content table.bb-ped__table tr:first-child > td:first-child {
  font-weight: 700; background: var(--tint-sky); box-shadow: inset 3px 0 0 var(--navy); padding-left: 1.2rem; }
.gh-content table.bb-ped__table tbody:has(> tr:nth-child(17)) > tr:nth-child(17) > td:first-child,
.gh-content table.bb-ped__table tbody:not(:has(> tr:nth-child(17))):has(> tr:nth-child(9)) > tr:nth-child(9) > td:first-child,
.gh-content table.bb-ped__table tbody:not(:has(> tr:nth-child(9))) > tr:nth-child(5) > td:first-child {
  font-weight: 700; background: var(--tint-sand-2); box-shadow: inset 3px 0 0 var(--brass); padding-left: 1.2rem; }
/* generation one's note goes under the name: there is room */
.gh-content table.bb-ped__table tr:first-child > td:first-child small,
.gh-content table.bb-ped__table tbody:has(> tr:nth-child(17)) > tr:nth-child(17) > td:first-child small,
.gh-content table.bb-ped__table tbody:not(:has(> tr:nth-child(17))):has(> tr:nth-child(9)) > tr:nth-child(9) > td:first-child small,
.gh-content table.bb-ped__table tbody:not(:has(> tr:nth-child(9))) > tr:nth-child(5) > td:first-child small { display: block; margin: 2px 0 0; font-weight: 400; }
/* generation two keeps a little weight so the four lines still read */
.gh-content table.bb-ped__table tr:first-child > td:nth-child(2),
.gh-content table.bb-ped__table tbody:has(> tr:nth-child(17)) > tr:nth-child(17) > td:nth-child(2),
.gh-content table.bb-ped__table tbody:has(> tr:nth-child(17)) > tr:nth-child(9) > td:first-child,
.gh-content table.bb-ped__table tbody:has(> tr:nth-child(17)) > tr:nth-child(25) > td:first-child,
.gh-content table.bb-ped__table tbody:not(:has(> tr:nth-child(17))):has(> tr:nth-child(9)) > tr:nth-child(9) > td:nth-child(2),
.gh-content table.bb-ped__table tbody:not(:has(> tr:nth-child(17))):has(> tr:nth-child(9)) > tr:nth-child(5) > td:first-child,
.gh-content table.bb-ped__table tbody:not(:has(> tr:nth-child(17))):has(> tr:nth-child(9)) > tr:nth-child(13) > td:first-child { font-weight: 600; }

/* ======================================================================
   Bloodlines article — PROPOSED, 22 Sep 2026. A run of pedigree grids
   with nothing between them: the horse moves from an <h3> in the reading
   column into the grid's own caption, so head and grid share the wide
   column and the caption survives Ghost; the run line is the tight form.
   ====================================================================== */
.gh-content table.bb-ped__table caption.bb-ped__caption--entry b {
  font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: 2.56rem; line-height: 1.15;
  letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 2px; }
.gh-content table.bb-ped__table caption.bb-ped__caption--entry span {
  font-family: var(--font-data); font-size: 1.152rem; letter-spacing: .10em; text-transform: uppercase; color: var(--brass); }
.gh-content table.bb-ped__table caption.bb-ped__caption--entry { margin: 4rem 0 1rem; padding-top: 1.2rem; border-top: 2px solid var(--rule-2); }
.gh-content table.bb-run--tight { margin: 1.2rem auto 0.8rem; border-top: 0; font-weight: 400; }
.gh-content table.bb-run--tight td { padding: 0.6rem 0; }
.gh-content table.bb-run--tight td a { font-weight: 700; }

/* ======================================================================
   Advertising — PROPOSED, 22 Sep 2026. Four positions, one component:
   every advertisement is a table (caption above, the creative, a foot row)
   so it survives Ghost and reaches the email. The box is a placeholder
   until a creative replaces it.
   ====================================================================== */
.gh-content table.bb-ad, table.bb-ad { width: 100%; border-collapse: collapse; margin: 3.2rem auto; font-family: var(--font-data); }
.gh-content table.bb-ad caption, table.bb-ad caption { caption-side: top; text-align: center; padding: 0 0 0.8rem; }
.gh-content table.bb-ad caption b, table.bb-ad caption b { font-size: 1.04rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.gh-content table.bb-ad caption span, table.bb-ad caption span { font-size: 1.04rem; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
.gh-content table.bb-ad caption span::before, table.bb-ad caption span::before { content: " · "; color: var(--rule-2); }
.gh-content table.bb-ad td, table.bb-ad td { padding: 0; border: 0; text-align: center; }
.gh-content table.bb-ad tfoot td, table.bb-ad tfoot td { padding: 0.8rem 0 0; font-size: 1.04rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.gh-content table.bb-ad tbody tr:last-child td, table.bb-ad tbody tr:last-child td { border-bottom: 0; }
.bb-ad__box { display: inline-flex; align-items: center; justify-content: center; width: var(--ad-w); max-width: 100%; height: var(--ad-h); background: var(--paper-2); border: 1px dashed var(--rule-2); text-decoration: none; }
.bb-ad__box span { font-size: 1.152rem; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
/* strip and banner: a hairline closes them */
.gh-content table.bb-ad--strip, table.bb-ad--strip, .gh-content table.bb-ad--banner, table.bb-ad--banner { border-bottom: 1px solid var(--rule); padding-bottom: 1.6rem; }
.gh-content table.bb-ad--banner, table.bb-ad--banner { margin: 0.8rem auto 4rem; }
/* inline: hairlines above and below, the furniture lines carry the message */
.gh-content table.bb-ad--inline, table.bb-ad--inline { margin: 4.8rem auto; border-top: 1px solid var(--rule); border-bottom: 2px solid var(--rule-2); padding: 1.4rem 0 1.6rem; }
.gh-content table.bb-ad--inline caption, table.bb-ad--inline caption { padding: 1.4rem 0 1rem; border-top: 1px solid var(--rule); }
/* full page: a band of paper-2 the width of the wide column */
.gh-content table.bb-ad--full, table.bb-ad--full { margin: 6.4rem auto; background: var(--paper-2); border-top: 3px solid var(--navy); border-bottom: 3px solid var(--navy); }
.gh-content table.bb-ad--full caption, table.bb-ad--full caption { background: var(--paper-2); padding: 1.4rem 0 1.2rem; border-top: 3px solid var(--navy); }
.gh-content table.bb-ad--full td, table.bb-ad--full td { padding: 0 0 0.8rem; }
.gh-content table.bb-ad--full tfoot td, table.bb-ad--full tfoot td { padding: 0.8rem 0 1.4rem; }
.gh-content table.bb-ad--full .bb-ad__box, table.bb-ad--full .bb-ad__box { background: var(--panel); }
/* the issue home strip sits between the features and the jump strip */
.bb-page table.bb-ad--strip { margin: 4rem auto 0; }
@media (max-width: 800px) {
  .bb-ad__box { height: auto; aspect-ratio: 4 / 3; }
  table.bb-ad--strip .bb-ad__box, table.bb-ad--banner .bb-ad__box { aspect-ratio: 320 / 50; }
  table.bb-ad--inline .bb-ad__box { width: 30rem; aspect-ratio: 300 / 250; }
}

/* Dark theme: the section colours have light values only, so a strand's
   eyebrow / label becomes a chip (section fill under on-section text)
   instead of coloured text on dark paper. PROPOSED. */
[data-theme="dark"] .bb-sec__label { background: var(--bb-section); color: var(--on-section); padding: 0.4rem 1rem 3px; border-bottom: 0; }
[data-theme="dark"] .bb-section { --bb-section: var(--navy); }
/* navy-deep is a fill in dark, not a text colour: the two places the theme
   uses it as text swap to navy. PROPOSED. */
[data-theme="dark"] .gh-content table.bb-stakes__table td.bb-stakes__winner b,
[data-theme="dark"] .gh-content table.bb-entry__strip td { color: var(--navy); }