/* ==========================================================================
   Bluebloods — house rules. Hand-written; safe to edit.

   Two kinds of thing live here, and nothing else:

     1. Corrections to Ghost Source's own defaults, where Source assumes a
        blog and we are publishing a magazine.
     2. Components that have no entry in the design system yet.

   It must load AFTER built/bluebloods.css, which is generated from the
   design system and is overwritten wholesale every time that system ships.
   Anything hand-written that lived in that file would be lost on the next
   regeneration, which is why it lives here instead.

   UNITS. Ghost Source sets html { font-size: 62.5% }, so 1rem is 10px.
   Write rem at a tenth of the design system's pixels — but a rem inside a
   media query resolves against the INITIAL root size, not this one, so
   breakpoints stay in px.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Scrollbars: only where something actually has to scroll.

   Source's main.js takes every <table> that is a direct child of .gh-content
   and wraps it in <div class="gh-table">, and Source then styles that wrapper

       .gh-content .gh-table       { overflow-x: scroll }
       .gh-content .gh-table table { white-space: nowrap }

   Both are wrong for this publication, and between them they put a bar under
   every table on the site:

     * `scroll` draws the bar whether or not there is anything to scroll to.
       On Windows, and on any machine set to show scrollbars always, that is a
       grey slab under a table that fits its column perfectly well.
     * `nowrap` is meant for a data table and is applied to all of them. Our
       index, run-on and advertisement tables carry prose; forbidding them to
       wrap MAKES the overflow that the bar is then drawn for. Measured on
       the leading-sires article: five tables overflowed by 8 to 282px for no
       reason other than this rule.

   So: the wrapper scrolls only on demand, our tables wrap again, and the
   genuinely wide ones are given a wider column to sit in (below) rather than
   a bar.
-------------------------------------------------------------------------- */
.gh-content .gh-table {
    overflow-x: auto;
}
/* Two classes, an attribute and an element: heavier than Source's
   `.gh-content .gh-table table`, which is what we are overruling. Scoped to
   our own tables so a pasted-in editor table keeps Source's behaviour. */
.gh-content .gh-table > table[class*="bb-"] {
    white-space: normal;
}

/* A wide statistics table is given the grid's wide column instead of a bar.

   .gh-canvas is a grid whose tracks are full | wide | main | wide | full.
   The wide track measures 1120px here and the widest thing we print — a
   thirteen-column sire list — needs 1212, so `wide` is 92px short of it and
   would still scroll. `full` runs to the viewport less the page gutters, so
   on any screen from about 1280px up the table simply fits and nothing
   scrolls at all. A cap keeps it from stretching into a strip on a very wide
   monitor, and margin auto centres it in the track. */
/* Same trick for a full-page advertisement. The importer puts
   `kg-width-wide` on the table so Ghost's grid gives it the wide track — but
   Source's script wraps that table in a div first, and a grid-column on a
   child of a child does nothing. The wrapper has to carry it. */
.gh-canvas > .gh-table:has(> table.kg-width-wide) {
    grid-column: wide;
}

.gh-canvas > .gh-table:has(> table.bb-static--wide),
.gh-canvas > figure:has(> table.bb-static--wide) {
    grid-column: full;
    /* `full` is the bleed track an image uses, gutters included. A table
       running into the edge of the window is not a photograph, so the page's
       own gutter is put back as padding. */
    padding-inline: var(--container-gap, 24px);
}
.gh-content table.bb-static--wide {
    width: max-content;
    max-width: min(100%, 132rem);
    margin-inline: auto;
}
/* Thirteen columns at 10px of side padding spend 260px on air alone. Seven
   buys back 78px, which is most of what stood between the table and the
   column it has to live in. */
.gh-content table.bb-static--wide td { padding: 0.7rem 0.7rem; }
.gh-content table.bb-static--wide th { padding-inline: 0.7rem; }

/* The scroll box Ghost leaves us on a figure-wrapped table.

   Our wide components ship as figure > div.bb-*__scroll > table. Ghost keeps
   the figure (claiming it as a kg-card) and keeps the div, but throws the
   div's class away — so the clipping has to hang off the bare `> div`, which
   is structure Ghost preserves. Without it a 588px pedigree grid or a 520px
   stakes table pushes the WHOLE PAGE sideways on a phone; measured at 390px,
   the bloodlines article overflowed the document by 277px.

   This rule existed before and was lost when bluebloods.css was regenerated
   from the design system. That is exactly why it now lives in this file. */
.gh-content figure.kg-card > div {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* An advertisement never scrolls; it shrinks.

   A table at `width: 100%` still cannot go narrower than its own min-content,
   and the min-content here is the placeholder's declared size — 728px for a
   banner — so `max-width: 100%` on the box never got a chance: the cell just
   grew to 728 and the table overflowed by 8px in the reading column and by
   387px on a phone. `table-layout: fixed` takes the cell's width from the
   table instead of from its contents, and the box's max-width then means
   something. */
.gh-content table.bb-ad, table.bb-ad {
    table-layout: fixed;
}
.bb-ad__box {
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--ad-w) / var(--ad-h);
}

/* The article pager carries article titles, not the word "Next", and a title
   can be long: "Leading Australian Sires by Winners" holds one line to 873px
   in a 720px column. Holding a pager on one line only works when you control
   the words in it, and here the words are the running order of the issue. So
   it wraps, and the three cells keep their alignment while doing it.

   Breakpoints below stay in px: a rem inside a media query resolves against
   the initial 16px root, not this page's 62.5%. */
.gh-content table.bb-run td,
.gh-content table.bb-run--tight td { white-space: normal; }
/* Wrapped, the three-across pager is cramped on a phone; it stacks instead,
   and the middle "up to the index" cell is already in the issue bar. */
@media (max-width: 600px) {
    .gh-content table.bb-run,
    .gh-content table.bb-run tbody,
    .gh-content table.bb-run tr { display: block; }
    .gh-content table.bb-run td { display: block; text-align: left; }
    .gh-content table.bb-run td + td { padding-top: 0; }
    .gh-content table.bb-run td.bb-run__up,
    .gh-content table.bb-run td.bb-run__next { text-align: left; }
}

/* What is left is the small number of boxes that really do overflow — a wide
   table on a phone, a pedigree grid on a narrow laptop. Those keep scrolling;
   they just stop announcing it with a permanent bar. The affordance is the
   content itself, visibly cut off at the edge of the box, which is how every
   horizontally scrolling panel on a touch screen already reads.

   Mac and iOS draw overlay scrollbars that appear on scroll and fade, so this
   only changes what Windows, Linux and a Mac set to "always show" do. */
.gh-content .gh-table,
.gh-content figure.kg-card > div,
.gh-content table.bb-static--wide,
.bb-embed__scroll,
.bb-matrix__scroll,
.bb-stakes__scroll,
.bb-entry__scroll,
.bb-ped__scroll {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* old Edge */
}
.gh-content .gh-table::-webkit-scrollbar,
.gh-content figure.kg-card > div::-webkit-scrollbar,
.gh-content table.bb-static--wide::-webkit-scrollbar,
.bb-embed__scroll::-webkit-scrollbar,
.bb-matrix__scroll::-webkit-scrollbar,
.bb-stakes__scroll::-webkit-scrollbar,
.bb-entry__scroll::-webkit-scrollbar,
.bb-ped__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* --------------------------------------------------------------------------
   A live advertisement.

   An empty slot is a dashed box at the declared size — 728 x 90 and so on —
   because that is what a slot is worth showing as while it is unsold. A slot
   with a creative in it is a different thing: the box takes the picture's own
   proportions, because print advertisements arrive as whatever the page was,
   usually full-page portrait, and cropping one into a web banner throws away
   the advertisement that was paid for.

   `--ad-ar` is the creative's real pixel ratio, written by the importer. It
   reserves the right height before the image has downloaded, so the column
   does not jump as the page settles. `--ad-w` stays as the maximum width: a
   banner creative is not blown up past the size it was supplied at.
-------------------------------------------------------------------------- */
.bb-ad__box--live {
    display: block;
    width: 100%;
    max-width: min(100%, var(--ad-w));
    height: auto;
    margin-inline: auto;
    aspect-ratio: var(--ad-ar, var(--ad-w) / var(--ad-h));
    background: none;
    border: 0;
}
.bb-ad__box--live img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* A full-page creative is the one place the slot may exceed the reading
   column, the same licence a full-width photograph has. */
.gh-content table.bb-ad--full .bb-ad__box--live {
    max-width: min(100%, var(--ad-w));
}
/* An unsold slot keeps its dashed box, but it no longer keeps a fixed pixel
   height on a narrow screen — it shrinks by the same ratio the creative would. */
.bb-ad__box:not(.bb-ad__box--live) {
    aspect-ratio: var(--ad-w) / var(--ad-h);
    height: auto;
}

/* --------------------------------------------------------------------------
   ...and where something really is cut off, it says so.

   arion.js puts .bb-scrolls on a box that genuinely overflows, and --start /
   --end on the sides that still have content beyond them. The fade is a mask
   rather than a gradient overlay, because these boxes are tables whose own
   cell backgrounds would paint straight over an overlay; a mask sits above
   everything the element draws, whatever draws it.

   48px of softening, on the side there is more to come and only while there
   is. Scroll to the end and the edge goes hard again, which is the whole
   signal: a soft edge means keep going.
-------------------------------------------------------------------------- */
.bb-scrolls--end:not(.bb-scrolls--start) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.bb-scrolls--start:not(.bb-scrolls--end) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px);
            mask-image: linear-gradient(to right, transparent, #000 48px);
}
.bb-scrolls--start.bb-scrolls--end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px,
                        #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 48px,
                        #000 calc(100% - 48px), transparent);
}

/* --------------------------------------------------------------------------
   A boxed aside, and a plain list.

   The Tax File brought both: a "Key takeaways" list under the headline and,
   at the foot, a disclaimer and the author's own contact details. Neither had
   a component, and both will come round again — every advisory piece ends in
   a disclaimer and most open with a summary.

   The note is a table, as everything structural here is: a <div> loses its
   class on the way through Ghost and a <p> cannot be told from body text.
-------------------------------------------------------------------------- */
.gh-content table.bb-note {
    width: 100%;
    border-collapse: collapse;
    margin: 3.2rem 0;
    background: var(--tint-sand);
    border-left: 3px solid var(--brass);
    font-family: var(--font-data);
    font-size: 1.36rem;
    line-height: 1.5;
}
.gh-content table.bb-note caption {
    caption-side: top;
    text-align: left;
    padding: 1.6rem 1.8rem 0;
    background: var(--tint-sand);
    border-left: 3px solid var(--brass);
    margin-left: -3px;
}
.gh-content table.bb-note caption b {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass);
}
.gh-content table.bb-note td {
    padding: 0.5rem 1.8rem;
    border: 0;
    color: var(--ink);
}
.gh-content table.bb-note tbody tr:first-child td { padding-top: 1.2rem; }
.gh-content table.bb-note tbody tr:last-child td { padding-bottom: 1.8rem; }

/* A list in the body. Ghost keeps <ul>, <ol> and <li> and throws away any
   class on them, so these are styled by element and nothing else. */
.gh-content ul, .gh-content ol { margin: 2.4rem 0; padding-left: 2.4rem; }
.gh-content ul li, .gh-content ol li {
    margin-bottom: 1.2rem;
    padding-left: 0.6rem;
    line-height: 1.6;
}
.gh-content ul li::marker { color: var(--brass); }
.gh-content ol li::marker { color: var(--brass); font-weight: 700; }

/* --------------------------------------------------------------------------
   A hand-built mini pedigree — two, three or four generations.

   Not an Arion grid and never from the feed: a writer builds one to make a
   point, and the cells carry prose as often as a name. Print sets them as
   hairlines only, no box, with the subject at the left against a vertical
   rule; that is what these rules reproduce.

   Everything hangs off the table, as always: Ghost keeps the table and its
   class and throws the figure away.
-------------------------------------------------------------------------- */
.gh-content table.bb-mini__table {
    width: 100%;
    border-collapse: collapse;
    margin: 2.8rem 0;
    font-family: var(--font-data);
    font-size: 1.24rem;
    line-height: 1.35;
    border-top: 1px solid var(--rule-2);
    border-bottom: 1px solid var(--rule-2);
}
.gh-content table.bb-mini__table caption.bb-mini__caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 .8rem;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brass);
}
.gh-content table.bb-mini__table td {
    padding: .7rem 1.2rem .7rem 0;
    border-bottom: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    vertical-align: middle;
}
.gh-content table.bb-mini__table tr:last-child td { border-bottom: 0; }
.gh-content table.bb-mini__table td:last-child { border-right: 0; }
/* The subject: the horse the grid is about, set apart the way print does it. */
.gh-content table.bb-mini__table td.bb-mini__subject {
    width: 22%;
    padding-right: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    border-right: 1px solid var(--rule-2);
}
.gh-content table.bb-mini--g2 td.bb-mini__subject { width: 26%; }
.gh-content table.bb-mini--g4 td.bb-mini__subject { width: 18%; }
@media (max-width: 600px) {
    .gh-content table.bb-mini__table { font-size: 1.16rem; }
    .gh-content table.bb-mini__table td { padding-right: .8rem; }
}

/* --------------------------------------------------------------------------
   A tail-female descent — one mare a line, each a step further in.

   The depth is carried as a class rather than an indent on the element,
   because a style attribute is the sort of thing Ghost's importer is free to
   drop and a class on a cell is not. The line branches, so the steps are
   stated rather than counted.
-------------------------------------------------------------------------- */
.gh-content table.bb-ladder__table {
    width: 100%;
    border-collapse: collapse;
    margin: 2.4rem 0;
    font-family: var(--font-body);
    font-size: 1.5rem;
    line-height: 1.5;
}
.gh-content table.bb-ladder__table caption.bb-ladder__caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 .6rem;
    font-family: var(--font-data);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brass);
}
.gh-content table.bb-ladder__table td { padding: .15rem 0; border: 0; }
.gh-content table.bb-ladder__table td.bb-ladder__note {
    font-style: italic;
    color: var(--muted);
}
.gh-content table.bb-ladder__table td.bb-ladder__d0 { padding-left: 0; }
.gh-content table.bb-ladder__table td.bb-ladder__d1 { padding-left: 1.6rem; }
.gh-content table.bb-ladder__table td.bb-ladder__d2 { padding-left: 3.2rem; }
.gh-content table.bb-ladder__table td.bb-ladder__d3 { padding-left: 4.8rem; }
.gh-content table.bb-ladder__table td.bb-ladder__d4 { padding-left: 6.4rem; }
.gh-content table.bb-ladder__table td.bb-ladder__d5 { padding-left: 8rem; }
.gh-content table.bb-ladder__table td.bb-ladder__d6 { padding-left: 9.6rem; }
.gh-content table.bb-ladder__table td.bb-ladder__d7 { padding-left: 11.2rem; }
.gh-content table.bb-ladder__table td.bb-ladder__d8 { padding-left: 12.8rem; }
.gh-content table.bb-ladder__table td.bb-ladder__d9 { padding-left: 14.4rem; }
@media (max-width: 600px) {
    /* Ten steps of 16px is wider than a phone. Halve the step rather than
       let the deepest lines wrap into nonsense. */
    .gh-content table.bb-ladder__table td[class*="bb-ladder__d"] {
        padding-left: 0;
    }
    .gh-content table.bb-ladder__table td.bb-ladder__d1 { padding-left: .8rem; }
    .gh-content table.bb-ladder__table td.bb-ladder__d2 { padding-left: 1.6rem; }
    .gh-content table.bb-ladder__table td.bb-ladder__d3 { padding-left: 2.4rem; }
    .gh-content table.bb-ladder__table td.bb-ladder__d4 { padding-left: 3.2rem; }
    .gh-content table.bb-ladder__table td.bb-ladder__d5 { padding-left: 4rem; }
    .gh-content table.bb-ladder__table td.bb-ladder__d6 { padding-left: 4.8rem; }
    .gh-content table.bb-ladder__table td.bb-ladder__d7 { padding-left: 5.6rem; }
    .gh-content table.bb-ladder__table td.bb-ladder__d8 { padding-left: 6.4rem; }
    .gh-content table.bb-ladder__table td.bb-ladder__d9 { padding-left: 7.2rem; }
}

/* ======================================================================
   Index group row — 30 Sep 2026.
   A post that carries a whole printed section (pp.51-54 as one post)
   indexes several components at once, so the component's own heading
   rides in the index as a full-width row. There is no design-system
   entry for it: it is the bb-index caption's type, one step down.
   ====================================================================== */
.gh-content table.bb-index td.bb-index__group {
    width: auto;
    padding: 2rem 0 0.6rem;
    border-bottom: 2px solid var(--bb-section, var(--navy));
}
.gh-content table.bb-index tr:first-child td.bb-index__group { padding-top: 0.4rem; }
.gh-content table.bb-index td.bb-index__group b {
    display: block;
    font-size: 1.24rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bb-section, var(--navy));
}
.gh-content table.bb-index td.bb-index__group span {
    display: block;
    font-size: 1.24rem;
    color: var(--muted);
    margin-top: 2px;
}

/* A folded pedigree grid is a target: the index links straight to it. Give
   the summary somewhere to breathe when it is the thing you just jumped to,
   and let a long line wrap instead of squeezing the name. */
.gh-content .bb-fold { scroll-margin-top: 2.4rem; }
.gh-content .bb-fold summary { flex-wrap: wrap; }

/* ======================================================================
   The winner's notes — 30 Sep 2026, rewritten.

   Print sets three blocks of small type under a Group 1 winner: the race
   record, the sire's summary, and the dam's produce record indented by
   generation. The first attempt used <details> and classed <p>s and Ghost
   threw both away — the fold came back unwrapped, its summary as a body
   paragraph (drop-capped), and the paragraphs lost their classes, so
   catalogue type set as editorial at editorial spacing.

   So they are a table, and the class is on the CELL. The indent level comes
   from the Quark file: @Indent1 is the mare, @Indent2 one of her produce,
   @Indent3 a produce of that produce; @Dam is the "Dam" / "2nd Dam" head.
   ====================================================================== */
.gh-content table.bb-entry__notes {
    width: 100%;
    border-collapse: collapse;
    margin: 1.6rem 0 3.2rem;
    font-family: var(--font-data);
    font-size: 1.26rem;
    line-height: 1.42;
    color: var(--ink);
}
.gh-content table.bb-entry__notes td {
    border: 0;
    padding: 0 0 0.45rem;
    vertical-align: top;
}
.gh-content table.bb-entry__notes td b { font-weight: 700; }
.gh-content table.bb-entry__notes td i { font-style: italic; }

.gh-content table.bb-entry__notes td.bb-entry__sire { padding-bottom: 1.2rem; }
.gh-content table.bb-entry__notes td.bb-entry__damhead {
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brass);
    padding: 1.4rem 0 0.5rem;
}
/* the mare herself, then her produce, then theirs — a step in each time,
   with the year or the name hanging left of the wrap, as print sets it */
.gh-content table.bb-entry__notes td.bb-entry__l1 { padding-bottom: 0.8rem; }
.gh-content table.bb-entry__notes td.bb-entry__l2 {
    padding-left: 3.2rem;
    text-indent: -1.6rem;
}
.gh-content table.bb-entry__notes td.bb-entry__l3 {
    padding-left: 5.2rem;
    text-indent: -1.6rem;
    color: var(--muted);
}

.gh-content table.bb-entry__record {
    margin: 1.6rem 0 1.2rem;
    font-size: 1.3rem;
}
.gh-content table.bb-entry__record caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-data);
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brass);
    padding-bottom: 0.6rem;
}
.gh-content table.bb-entry__record tbody tr:last-child { font-weight: 700; }

/* ======================================================================
   Pedigree grid, table form — 30 Sep 2026.
   The design system's `.bb-ped` is the DIV form: a four-column CSS grid
   with a 608px minimum, made of .bb-ped__col/.bb-ped__cell. The grids the
   importer builds are TABLES, and the <figure> around them was inheriting
   that grid, so its one child was handed a 170px column and the fifth
   generation was clipped. `bb-ped__box` is put on whatever block ends up
   holding the grid — by the theme's own script, since which element that
   is depends on what Ghost made of our figure.
   ====================================================================== */
.gh-content .bb-ped__box,
.gh-content figure.bb-ped:has(> .bb-ped__scroll) {
    display: block;
    grid-template-columns: none;
    min-width: 0;
    gap: 0;
    padding: 0;
    background: none;
}
.gh-content .bb-ped__box table.bb-ped__table,
.gh-content figure.bb-ped:has(> .bb-ped__scroll) table.bb-ped__table {
    width: 100%;
    min-width: 58rem;
}

/* A fold holding a grid takes the wide track. The theme centres a fold with
   `margin: 2rem auto 0`, which on a grid item shrink-wraps it to its summary
   line — so sixty-seven folds came out sixty-seven different widths. */
.gh-canvas > .bb-fold--ped {
    grid-column: wide;
    margin-inline: 0;
    width: 100%;
}
.gh-content .bb-fold--ped > .bb-ped__box,
.gh-content .bb-fold--ped > .bb-ped__box.kg-card.kg-width-wide {
    /* beats the card's own `margin-top: 4.8rem`, which left a white band
       between the summary and the grid */
    margin: 0;
    padding: 0;
}
.gh-content .bb-fold--ped caption { display: none; }

/* Sixty-seven closed folds with a previous/next line between each pair is a
   column of furniture: the next winner is already the next line, and the
   index is one click away. So a run line under a grid shows only when the
   grid is open. With no script there is no fold, and every run line shows. */
.gh-content details.bb-fold:not([open]) + table.bb-run,
.gh-content details.bb-fold:not([open]) + .gh-table:has(> table.bb-run) {
    display: none;
}

/* ======================================================================
   No drop cap in a statistics section — 30 Sep 2026.
   The theme drop-caps the first paragraph of a post body. In a statistics
   section the first paragraph is a note explaining a set of tables, and a
   three-line initial on it reads as an editorial opener. (This is also
   what turned an imported fold's flattened summary into a drop-capped
   line: the summary came back as the first <p> in the post.)
   ====================================================================== */
.tag-statistics .gh-content.drop-cap > p:first-of-type::first-letter,
.tag-statistics .gh-content.drop-cap > p:first-of-type:not(.bb-standfirst)::first-letter,
.tag-statistics .gh-content.drop-cap > .bb-standfirst + p::first-letter,
.tag-statistics .gh-content.drop-cap > p.bb-standfirst.bb-standfirst::first-letter {
    float: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
}

/* The index cell carries the jump as a class, so the whole cell is the
   target the script wires up — give it the cursor to match. */
.gh-content table.bb-index td.bb-index__cell { cursor: pointer; }

/* ======================================================================
   THE WEEKLY — 11 October 2026.
   The heartbeat send: the episode, Andrew's take cut at the paywall, the
   week's racing as rows that open, one race in full, the season so far.
   Every component is a table with its classes on the table and the cells,
   for the reason the rest of this file exists: that is what survives the
   import. Anything that has to behave — the folds — is built by the
   theme's own script from a class, and degrades to "open" without it,
   which is also what the email gets.
   ====================================================================== */

/* ---- the episode ------------------------------------------------------ */
.gh-canvas > table.bb-video,
.gh-canvas > .gh-table:has(> table.bb-video) { grid-column: wide; }
.gh-content table.bb-video {
    width: 100%;
    border-collapse: collapse;
    margin: 3.2rem 0 4rem;
}
.gh-content table.bb-video td { border: 0; padding: 0; }
/* the kicker and the title sit ABOVE the still: a caption can only be top or
   bottom, and at the bottom they landed under the sponsor line */
.gh-content table.bb-video caption.bb-video__cap {
    caption-side: top;
    text-align: left;
    padding: 0 0 1.6rem;
}
.gh-content table.bb-video caption b {
    display: block;
    font-family: var(--font-data);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: .6rem;
}
.gh-content table.bb-video caption span {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 2.6vw, 2.6rem);
    line-height: 1.2;
    color: var(--ink);
}
.gh-content .bb-video__frame a {
    position: relative;
    display: block;
    background: var(--tint-sand);
}
.gh-content .bb-video__frame img {
    display: block;
    width: 100%;
    height: auto;
}
/* the badge is CSS, so the email gets a clean still and the web gets a
   play button over it */
.gh-content .bb-video__frame a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7.2rem;
    height: 7.2rem;
    margin: -3.6rem 0 0 -3.6rem;
    border-radius: 50%;
    background: var(--navy) url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E\
%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/3.2rem no-repeat;
    opacity: .94;
}
.gh-content .bb-video__frame a:hover::after { opacity: 1; }
.gh-content .bb-video__len {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    background: rgba(0, 0, 0, .74);
    color: #fff;
    font-family: var(--font-data);
    font-size: 1.2rem;
    padding: .2rem .7rem;
}
.gh-content .bb-video__meta {
    font-family: var(--font-data);
    font-size: 1.34rem;
    font-weight: 600;
    padding-top: 1.2rem !important;
}
.gh-content .bb-video__meta a { color: var(--navy); }
.gh-content .bb-video__meta span { color: var(--muted); }
.gh-content .bb-video__spon {
    font-family: var(--font-data);
    font-size: 1.3rem;
    color: var(--muted);
    border-left: 3px solid var(--brass);
    padding: .2rem 0 .2rem 1.2rem !important;
    margin-top: 1rem;
}
.gh-content .bb-video__spon b, .gh-content .bb-video__spon a { color: var(--ink); }

/* The subscriber cut: the same component, inverted. A table's background
   does not paint under its caption — the caption is a box of its own — so
   the panel colour goes on both, or the title comes out white on paper. */
.gh-content table.bb-video--members {
    background: var(--navy-deep);
    border-collapse: separate;
    border-spacing: 0;
    padding: 0 0 2.4rem;
}
.gh-content table.bb-video--members caption.bb-video__cap {
    background: var(--navy-deep);
    padding: 2.4rem 2.4rem 1.6rem;
}
.gh-content table.bb-video--members caption span,
.gh-content table.bb-video--members .bb-video__meta a { color: #fff; }
.gh-content table.bb-video--members .bb-video__frame,
.gh-content table.bb-video--members .bb-video__meta,
.gh-content table.bb-video--members .bb-video__spon { padding-inline: 2.4rem !important; }
.gh-content table.bb-video--members .bb-video__meta span,
.gh-content table.bb-video--members .bb-video__spon { color: #CFCBC1; }

/* ---- the week's racing ------------------------------------------------- */
.gh-canvas > table.bb-wk-race,
.gh-canvas > .gh-table:has(> table.bb-wk-race),
.gh-canvas > .bb-fold--race { grid-column: wide; }
.gh-canvas > .bb-fold--race,
.gh-canvas > .bb-fold--race[id] {
    /* Source gives any element carrying an id 5.6rem of air above it
       (`.gh-content > [id]:not(:first-child)`, which is 0,3,0 and beats a
       plain class rule). Every race row carries one, because the index and
       the run lines jump to it — so fourteen rows came out as fourteen
       separate blocks of page. A run of races is one block. */
    margin: 0;
    width: 100%;
}
.gh-canvas > .bb-fold--race:first-of-type,
.gh-canvas > .bb-fold--race[id]:first-of-type { margin-top: 1.6rem; }

.gh-content table.bb-wk-race {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-data);
    font-size: 1.36rem;
    margin: 0 0 1.6rem;
}
.gh-content table.bb-wk-race caption.bb-wk-race__cap {
    caption-side: top;
    text-align: left;
    padding: 0 0 .8rem;
}
.gh-content table.bb-wk-race caption b {
    display: block;
    font-family: var(--font-data);
    font-size: 1.5rem;
    font-weight: 700;
}
.gh-content table.bb-wk-race caption b small {
    font-size: 1.2rem;
    letter-spacing: .1em;
    color: var(--brass);
    margin-left: .8rem;
}
.gh-content table.bb-wk-race caption span {
    display: block;
    font-size: 1.24rem;
    color: var(--muted);
    margin-top: .2rem;
}
.gh-content table.bb-wk-race th {
    width: 11rem;
    text-align: left;
    vertical-align: top;
    padding: .55rem 1.2rem .55rem 0;
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brass);
    border-bottom: 1px solid var(--rule);
}
.gh-content table.bb-wk-race td {
    padding: .55rem 0;
    border-bottom: 1px solid var(--rule);
}
.gh-content table.bb-wk-race .bb-wk-race__win td b { font-weight: 700; }
.gh-content table.bb-wk-race .bb-wk-race__win td small {
    display: block;
    font-size: 1.2rem;
    color: var(--muted);
}

/* folded: the caption and the winner become one scannable line */
.gh-content .bb-fold--race {
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: none;
    margin: 0;
}
.gh-content .bb-fold--race summary {
    display: grid;
    grid-template-columns: 1.3fr 1.5fr auto;
    gap: 1.6rem;
    align-items: baseline;
    padding: 1.4rem 0;
}
/* the theme's fold draws a +/− marker and sets its summary type in brass
   small caps; a race row needs neither — it has its own marker in the third
   column, and the race's name is a name */
.gh-content .bb-fold--race summary::before,
.gh-content .bb-fold--race[open] summary::before { content: none; display: none; }
.gh-content .bb-fold--race summary b,
.gh-content .bb-fold--race summary b b,
.gh-content .bb-fold--race summary span {
    font-family: var(--font-data);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}
.gh-content .bb-fold--race summary:hover { background: var(--tint-sand-2); }
.gh-content .bb-fold--race summary > b {
    font-family: var(--font-data);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}
.gh-content .bb-fold--race summary > b b { display: block; }
.gh-content .bb-fold--race summary > b small {
    display: inline;
    font-size: 1.18rem;
    letter-spacing: .1em;
    color: var(--brass);
    margin-left: .6rem;
}
.gh-content .bb-fold--race summary > b span {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--muted);
}
.gh-content .bb-fold--race summary > span {
    font-size: 1.4rem;
    color: var(--ink);
}
.gh-content .bb-fold--race summary > span small {
    display: block;
    font-size: 1.2rem;
    color: var(--muted);
}
.bb-fold__more {
    font-style: normal;
    font-size: 1.18rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy);
    white-space: nowrap;
}
.bb-fold__more::after { content: "Open +"; }
.bb-fold--race[open] .bb-fold__more::after { content: "Close −"; }
.gh-content .bb-fold--race[open] summary { border-bottom: 1px solid var(--rule); }
.gh-content .bb-fold--race > table.bb-wk-race { margin: 1.6rem 0; }
.gh-content .bb-fold--race > .bb-ped__box,
.gh-content .bb-fold--race > .bb-ped__box.kg-card.kg-width-wide { margin: 0 0 2rem; padding: 0; }
.gh-content .bb-fold--race caption.bb-wk-race__cap { display: none; }

/* ---- also this week ---------------------------------------------------- */
.gh-canvas > table.bb-cards,
.gh-canvas > .gh-table:has(> table.bb-cards) { grid-column: wide; }
.gh-content table.bb-cards { width: 100%; border-collapse: collapse; margin: 4rem 0 0; }
.gh-content table.bb-cards caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-data);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--navy);
    border-bottom: 2px solid var(--navy);
    padding-bottom: .8rem;
    margin-bottom: 2rem;
}
.gh-content table.bb-cards td.bb-cards__cell {
    width: 33.33%;
    vertical-align: top;
    padding: 0 2.4rem 0 0;
    border: 0;
}
.gh-content table.bb-cards td:last-child { padding-right: 0; }
.gh-content table.bb-cards a { text-decoration: none; color: var(--ink); display: block; }
.gh-content table.bb-cards img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin-bottom: 1.2rem;
}
.gh-content table.bb-cards b {
    display: block;
    font-family: var(--font-data);
    font-size: 1.16rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: .4rem;
}
.gh-content table.bb-cards span {
    display: block;
    font-family: var(--font-display);
    font-size: 1.9rem;
    line-height: 1.25;
    margin-bottom: .5rem;
}
.gh-content table.bb-cards a:hover span { text-decoration: underline; text-decoration-color: var(--brass); }
.gh-content table.bb-cards small {
    font-family: var(--font-data);
    font-size: 1.24rem;
    color: var(--muted);
}

/* ---- the close --------------------------------------------------------- */
.gh-content table.bb-close {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--ink);
    margin: 4.8rem 0 0;
    font-family: var(--font-data);
    font-size: 1.4rem;
}
.gh-content table.bb-close td { border: 0; padding: 1.2rem 0 0; }
.gh-content .bb-close__next b { color: var(--brass); letter-spacing: .1em;
    text-transform: uppercase; font-size: 1.2rem; margin-right: .6rem; }
.gh-content .bb-close__links { color: var(--muted); }

/* ---- the masthead, the byline ------------------------------------------ */
.bb-weekly__head { max-width: var(--width-reading, 72rem); margin: 0 auto 3.2rem; }
.bb-weekly__mast {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    align-items: baseline;
    font-family: var(--font-data);
    font-size: 1.24rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--navy);
    padding-bottom: .8rem;
    margin: 0;
}
.bb-weekly__mast a { color: var(--navy); font-weight: 700; text-decoration: none; }
.bb-weekly__ep { color: var(--brass); }
.bb-weekly__mast time { margin-left: auto; color: var(--muted); letter-spacing: .08em; }
.bb-weekly__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3.2rem, 5vw, 4.8rem);
    line-height: 1.08;
    margin: 2.4rem 0 1.2rem;
}
.bb-weekly__standfirst {
    font-family: var(--font-display);
    font-size: 1.9rem;
    line-height: 1.45;
    color: var(--muted);
    margin: 0 0 2rem;
}
.bb-weekly__byline {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-family: var(--font-data);
    font-size: 1.4rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.6rem;
    margin: 0;
}
.bb-weekly__avatar {
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    letter-spacing: .08em;
}
.bb-weekly__byline small { color: var(--muted); font-size: 1.24rem; }

@media (max-width: 640px) {
    .gh-content .bb-fold--race summary { grid-template-columns: 1fr auto; row-gap: .4rem; }
    .gh-content .bb-fold--race summary > span { grid-column: 1 / -1; }
    .gh-content table.bb-cards,
    .gh-content table.bb-cards tbody,
    .gh-content table.bb-cards tr { display: block; }
    .gh-content table.bb-cards td.bb-cards__cell {
        display: block; width: 100%; padding: 0 0 2.4rem;
    }
    .bb-weekly__mast time { margin-left: 0; width: 100%; }
}

/* No drop cap in the weekly either: the first paragraph is Andrew's take,
   and it sits under the episode rather than opening the page. */
.tag-the-weekly .gh-content.drop-cap > p:first-of-type::first-letter,
.tag-the-weekly .gh-content.drop-cap > p:first-of-type:not(.bb-standfirst)::first-letter,
.tag-the-weekly .gh-content.drop-cap > .bb-standfirst + p::first-letter {
    float: none; font-family: inherit; font-size: inherit; font-weight: inherit;
    line-height: inherit; color: inherit; padding: 0; margin: 0;
}