/*  VYNILYN — single blog posts.

    Ben switched the Avada single-post layout to a white background with dark body text on
    2026-09-03. The theme's heading and link colours were chosen for the DARK pages, and both
    become unreadable against white:

        h2   #ffffff on #ffffff   invisible
        a    #fff4c1 on #ffffff   roughly 1.2:1, effectively invisible

    Paragraphs and list items were already black, so only headings and links need correcting.

    SPECIFICITY — why the selectors look heavy.
    Avada sets heading colour with "#wrapper .post-content h2": one ID, one class, one type.
    A plain ".fusion-content-tb h2" is (0,1,1) and loses to it. Everything below carries one ID
    and two classes, i.e. (1,2,2), which wins cleanly without reaching for !important.
    Verified against the real DOM: the post h2 sits in
    #wrapper > main#main > section#content > .post-content > ... > .fusion-content-tb > h2,
    and is NOT inside .fusion-title, so Avada's heavier (2,2,1) title rule never applies here.

    Colours are Avada's own palette variables so this follows the theme if the palette is retuned.
    Fallbacks are those variables' current values.
*/

/* ---------------------------------------------------------------- headings */
body.single-post #wrapper .fusion-content-tb h1,
body.single-post #wrapper .fusion-content-tb h2,
body.single-post #wrapper .fusion-content-tb h3,
body.single-post #wrapper .fusion-content-tb h4,
body.single-post #wrapper .fusion-content-tb h5,
body.single-post #wrapper .fusion-content-tb h6 {
    color: var(--awb-color8, #101016);
}

/* ---------------------------------------------------------------- links
   #434b56 is not a new colour: it is the slate Avada already paints main#main with on the dark
   pages, so it stays on-brand. About 8.9:1 on white, comfortably past AA for body text.
   Hover goes near-black, which is the dark grey Ben asked for and the darkest step that still
   reads as a change of state. Underline thickness stays 1px in both states — Ben, 2026-09-03 —
   so the colour carries the hover on its own and the text does not shift under the cursor.
   Underlined because colour alone should not be the only thing marking a link — these two greys
   are close, and some readers cannot separate them at all. */
body.single-post #wrapper .fusion-content-tb a {
    color: #434b56;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

body.single-post #wrapper .fusion-content-tb a:hover,
body.single-post #wrapper .fusion-content-tb a:focus {
    color: var(--awb-color8, #101016);
    text-decoration-thickness: 1px;
}

/* Bold runs inside a paragraph must not end up lighter than the text around them if the palette
   ever moves. */
body.single-post #wrapper .fusion-content-tb strong,
body.single-post #wrapper .fusion-content-tb b {
    color: inherit;
}

/* ------------------------------------------------------------------ reading rhythm
   Ben, 2026-09-03: "less margin under headings" and "make them look better".

   The theme's post headings are sized for the big dark landing pages, not for reading:
   35px at weight 800 with 2px letter-spacing and 38.5px of margin underneath, sitting over
   15px body copy. That is a 2.3x jump from body to heading and a gap wide enough that a
   heading reads as detached from the text it introduces.

   These stay H2 on purpose. The post title is the H1, so H2 is the correct next level —
   dropping to H3 to make them smaller would skip a level for screen readers and for Google.
   Size is a styling problem, so it is fixed with styling.

   SPECIFICITY, again. Avada sizes these with
   "#wrapper #main .post h2" — TWO IDs, so (2,1,1). The colour rules above win at (1,2,2) because
   that Avada rule sets only font-size, but font-size itself needs #main in the chain to reach
   (2,2,2). Margin and line-height below would have won either way; the extra ID is for the size.

   Space is moved from BELOW the heading to ABOVE it: a heading belongs to the text that
   follows it, so the larger gap should separate it from the section before. */

body.single-post #wrapper #main .fusion-content-tb h2 {
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: 0;
    margin: 46px 0 12px;
}

body.single-post #wrapper #main .fusion-content-tb h3 {
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: 0;
    margin: 34px 0 10px;
}

/* The first heading should not push a big gap under the intro paragraph. */
body.single-post #wrapper #main .fusion-content-tb > h2:first-child {
    margin-top: 0;
}

/* 15px is small for long-form reading. 17px at a looser line-height is the usual comfortable
   setting and keeps roughly 65-75 characters per line at this column width. */
body.single-post #wrapper #main .fusion-content-tb p,
body.single-post #wrapper #main .fusion-content-tb li {
    font-size: 17px;
    line-height: 1.7;
}

body.single-post #wrapper #main .fusion-content-tb p { margin: 0 0 20px; }
body.single-post #wrapper #main .fusion-content-tb li { margin: 0 0 10px; }
body.single-post #wrapper #main .fusion-content-tb ul,
body.single-post #wrapper #main .fusion-content-tb ol { margin: 0 0 24px; }

/* Avada wraps the embed in its own div; give it real breathing room on both sides rather than
   letting it butt against the paragraph above. */
body.single-post #wrapper #main .fusion-content-tb iframe { display: block; }

@media (max-width: 640px) {
    body.single-post #wrapper #main .fusion-content-tb h2 { font-size: 23px; margin: 34px 0 10px; }
    body.single-post #wrapper #main .fusion-content-tb h3 { font-size: 19px; margin: 26px 0 8px; }
    body.single-post #wrapper #main .fusion-content-tb p,
    body.single-post #wrapper #main .fusion-content-tb li { font-size: 16px; }
}

/* ------------------------------------------------------------------ mobile top gap
   Ben, 2026-09-03: "reduce padding on mobile here to 30px".

   On a 375px screen the content container carried 70px of padding top and bottom, and
   .fusion-content-tb adds a further 30px margin on top of that — 100px of white between the
   title bar and the first line of the post.

   Targeted by what the container HOLDS rather than by its Avada class. Avada numbers containers
   positionally (this one is .fusion-builder-row-5), so that class moves the moment a container is
   added or removed anywhere above it in the layout. :has() is supported by every browser this
   site sees, and where it is not the rule simply does not apply and the old padding stands. */

@media (max-width: 640px) {
    body.single-post #wrapper #main .fusion-fullwidth:has(.fusion-content-tb) {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* ------------------------------------------------------------------ visible playlist
   A /embed/videoseries iframe looks like one video. These thumbnails, drawn under the player by
   vy-playlist.js, are what tell a reader there are more — and let them jump straight to one.
   Count and tiles both come from the player at runtime, so they follow the playlist as cb adds
   to it and never show a video that cannot play. */

body.single-post #wrapper #main .vy-playlist {
    margin: -8px 0 26px;
}

body.single-post #wrapper #main .vy-playlist__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 10px;
}

body.single-post #wrapper #main .vy-playlist__count {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0;
}

/* Grid / List. Two buttons rather than a single switch, because a switch does not say what the
   other state is until you flip it. Grid is the default; the choice is kept per browser. */
body.single-post #wrapper #main .vy-playlist__toggle {
    display: inline-flex;
    border: 1px solid #d5d8dd;
    border-radius: 4px;
    overflow: hidden;
}

body.single-post #wrapper #main .vy-playlist__view {
    appearance: none;
    border: 0;
    background: #fff;
    color: #6b7280;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .03em;
    padding: 6px 12px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

body.single-post #wrapper #main .vy-playlist__view + .vy-playlist__view {
    border-left: 1px solid #d5d8dd;
}

body.single-post #wrapper #main .vy-playlist__view:hover { color: #101016; }

body.single-post #wrapper #main .vy-playlist__view.is-on {
    background: #434b56;
    color: #fff;
}

/* ---- list view ---- */
body.single-post #wrapper #main .vy-playlist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e6e8eb;
}

body.single-post #wrapper #main .vy-playlist__list li { margin: 0; }

body.single-post #wrapper #main .vy-playlist__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    text-align: left;
    appearance: none;
    border: 0;
    border-bottom: 1px solid #e6e8eb;
    background: none;
    font: inherit;
    font-size: 16px;
    line-height: 1.45;
    color: #101016;
    padding: 11px 6px;
    cursor: pointer;
    transition: background .12s ease;
}

body.single-post #wrapper #main .vy-playlist__row:hover,
body.single-post #wrapper #main .vy-playlist__row:focus-visible { background: #f4f5f7; }

body.single-post #wrapper #main .vy-playlist__rownum {
    flex: 0 0 auto;
    min-width: 22px;
    color: #8a90a0;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

body.single-post #wrapper #main .vy-playlist__row.is-playing {
    background: #fbf7e6;
    font-weight: 600;
}

body.single-post #wrapper #main .vy-playlist__row.is-playing .vy-playlist__rownum { color: #9a6e12; }

/* The [hidden] attribute only hides via the UA stylesheet's display:none, which ANY author
   display rule outranks — and the strip below sets display:grid. Without this the grid stayed
   visible underneath the list when the two were toggled. The attribute selector adds a class's
   worth of specificity, so it beats the rules it is guarding. */
body.single-post #wrapper #main .vy-playlist__strip[hidden],
body.single-post #wrapper #main .vy-playlist__list[hidden] {
    display: none;
}

body.single-post #wrapper #main .vy-playlist__strip {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}

body.single-post #wrapper #main .vy-playlist__strip li { margin: 0; }

body.single-post #wrapper #main .vy-playlist__item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    transition: border-color .15s ease, opacity .15s ease;
}

body.single-post #wrapper #main .vy-playlist__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

body.single-post #wrapper #main .vy-playlist__item:hover,
body.single-post #wrapper #main .vy-playlist__item:focus-visible {
    border-color: #434b56;
}

/* The one playing is marked with the brand gold, which reads on these dark thumbnails where the
   slate used for links would not. */
body.single-post #wrapper #main .vy-playlist__item.is-playing {
    border-color: var(--awb-color4, #fff4c1);
}

body.single-post #wrapper #main .vy-playlist__n {
    position: absolute;
    left: 6px;
    bottom: 6px;
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(16, 16, 22, .82);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    body.single-post #wrapper #main .vy-playlist__strip {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: 8px;
    }
}

/* ---------------------------------------------------------------------------
   Copy placeholders. cb, 2026-09-05: "I'd rather just have nonsensical text
   than text I need to approve and then try to rewrite." So where a section was
   written by us rather than by him, it now carries a placeholder instead — and
   the placeholder has to be unmistakable, or it becomes the exact thing he
   objected to. Hatched amber, monospace, never something you would skim past
   as body copy.
   --------------------------------------------------------------------------- */
body.single-post #wrapper #main .vy-placeholder {
    margin: 28px 0;
    padding: 14px 16px;
    border: 1px dashed #b58900;
    border-left-width: 4px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        135deg, #fdf6e3, #fdf6e3 10px, #faeecd 10px, #faeecd 20px);
    color: #6b5300;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1.55;
}

body.single-post #wrapper #main .vy-placeholder strong {
    color: #8a6100;
    letter-spacing: .02em;
}

/* Headings still waiting on cb get the same treatment, so an unwritten heading
   cannot be mistaken for a written one. */
body.single-post #wrapper #main h2:has(+ .vy-placeholder),
body.single-post #wrapper #main .fusion-content-tb h2:has(+ .vy-placeholder) {
    color: #8a6100;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16px;
    letter-spacing: .02em;
}

/* Related links: navigation, not prose. Kept visually quieter than body copy. */
body.single-post #wrapper #main .vy-related {
    margin: 34px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(16, 16, 22, .12);
    font-size: 15px;
    color: #4b5260;
}

/* A placeholder HEADING, standing on its own rather than above a box. cb, 2026-09-13:
   "I would prefer garbled text that makes no sense at all, or something like 'A TITLE GOES
   HERE'." So it has to be impossible to mistake for a real heading at a glance. */
body.single-post #wrapper #main h2.vy-placeholder-h,
body.single-post #wrapper #main .fusion-content-tb h2.vy-placeholder-h {
    margin: 34px 0 10px;
    padding: 8px 12px;
    border: 1px dashed #b58900;
    border-left-width: 4px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        135deg, #fdf6e3, #fdf6e3 10px, #faeecd 10px, #faeecd 20px);
    color: #8a6100;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Reading measure.

   The single-post column went from 2/3 to full width on 2026-09-14 so the
   playlist embed could match the homepage videos, which is what cb asked for:
   "the playlists playing area need to be at least the size of the large videos
   we already have embedded on the homepage". That worked — 745px to 1140px —
   but it dragged the body text out with it, from 88 characters per line to 134.
   Twice the comfortable measure.

   So the TEXT is capped back at the old column width and the EMBED keeps the
   full 1140. Thumbnails stay wide too, since "thumbnails bigger, 3-4 per row"
   is the same request.

   Desktop only. Below 1025px the column is already full width and the cap
   would do nothing but it is scoped anyway, so nothing can shift on a phone.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    body.single-post #wrapper #main .fusion-content-tb > p,
    body.single-post #wrapper #main .fusion-content-tb > h1,
    body.single-post #wrapper #main .fusion-content-tb > h2,
    body.single-post #wrapper #main .fusion-content-tb > h3,
    body.single-post #wrapper #main .fusion-content-tb > h4,
    body.single-post #wrapper #main .fusion-content-tb > h5,
    body.single-post #wrapper #main .fusion-content-tb > h6,
    body.single-post #wrapper #main .fusion-content-tb > ul,
    body.single-post #wrapper #main .fusion-content-tb > ol,
    body.single-post #wrapper #main .fusion-content-tb > blockquote {
        max-width: 745px;
    }
}

/* ---------------------------------------------------------------------------
   The playlist's own link.

   cb, 2026-09-05: "'Watch on YouTube' must open the playlist, not one video ...
   our manager has made that mistake COUNTLESS times, he sends the individual
   video, and tells the people it's a playlist, and then looks like an idiot
   when they ask why it was only one video."

   That button is YouTube's own chrome, inside a cross-origin iframe. Its href
   cannot be read or rewritten from this page, and no embed URL changes it:
   measured 2026-09-14 across eleven URL forms and all four playlists, every one
   backs that button with urlEndpoint https://www.youtube.com/watch?v=<videoId>
   and no list= on it. (An earlier note here cited watchEndpoint {videoId}; that
   node is the play overlay, not this button. Right conclusion, wrong element.)

   So ours sits directly under the player, deliberately heavier than YouTube's
   small pill so it is the one a hand reaches for, and it copies the
   /playlist?list= URL in a tap — the thing that actually gets pasted into an
   email. Drawn by vy-playlist.js.
   --------------------------------------------------------------------------- */
body.single-post #wrapper #main .vy-pl-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: -14px 0 22px;
}

/* Two IDs and two classes, so it clears the single-post link rule at the top of this file
   (#wrapper .fusion-content-tb a) without reaching for !important. */
body.single-post #wrapper #main .vy-pl-link__open {
    display: inline-block;
    text-align: center;
    background: #101016;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    padding: 13px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background .15s ease;
}

/* The glyph flows INLINE with the label rather than sitting beside it as a flex item. On a phone
   the label wraps to two lines, and as a flex item the triangle was left stranded 90px from the
   text it belongs to. */
body.single-post #wrapper #main .vy-pl-link__open::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 10px;
    vertical-align: 1px;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}

body.single-post #wrapper #main .vy-pl-link__open:hover,
body.single-post #wrapper #main .vy-pl-link__open:focus {
    background: #434b56;
    color: #fff;
    text-decoration: none;
}

body.single-post #wrapper #main .vy-pl-link__copy {
    appearance: none;
    background: #fff;
    border: 1px solid #d5d8dd;
    border-radius: 4px;
    color: #434b56;
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

body.single-post #wrapper #main .vy-pl-link__copy:hover {
    border-color: #434b56;
    color: #101016;
}

body.single-post #wrapper #main .vy-pl-link__copy.is-done {
    border-color: #1e7a3c;
    color: #1e7a3c;
}

/* Only revealed when the clipboard write fails, so the page is not carrying a 50-character URL
   for every visitor who will never need to read it. */
body.single-post #wrapper #main .vy-pl-link__url {
    flex: 1 0 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
    word-break: break-all;
}

@media (max-width: 520px) {
    body.single-post #wrapper #main .vy-pl-link {
        gap: 8px;
    }
    body.single-post #wrapper #main .vy-pl-link__open,
    body.single-post #wrapper #main .vy-pl-link__copy {
        width: 100%;
        text-align: center;
    }
}