/* =============================================================================
   Barlin Games — public article pages
   -----------------------------------------------------------------------------
   The ONLY stylesheet the article pages load. Self-contained by design.

   These pages used to load homepage.css as well and reuse the homepage navbar
   and footer. That was the wrong dependency: homepage.css does not style the
   navbar's mega-menu at all (32 of its 35 classes have no rule), so the panels
   rendered in normal flow, expanded, on top of the article. It also applies a
   fixed full-viewport gradient layer via .bh-body::before.

   Article pages now bring their own chrome (x-public.article.header / .footer)
   and their own tokens. Nothing here depends on homepage.css, and nothing here
   touches the homepage: every selector is under .ba / .ba-*.

   Palette matches the Barlin homepage system so the two still look like one
   site — the values are duplicated deliberately rather than shared, so a change
   to the homepage sheet can never break an article page again.
   ============================================================================= */

.ba,
.ba-body {
    --ba-red:    #E51B23;
    --ba-ink:    #0F1115;
    --ba-body:   #33383F;
    --ba-muted:  #6B7280;
    --ba-faint:  #9CA3AF;
    --ba-line:   #E9ECF1;
    --ba-canvas: #F7F8FA;
    --ba-radius: 16px;
}

/* ── Document base ───────────────────────────────────────────────────────── */

.ba-body {
    margin: 0;
    background: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--ba-body);
    -webkit-font-smoothing: antialiased;
}
.ba, .ba *, .ba *::before, .ba *::after { box-sizing: border-box; }
.ba img { max-width: 100%; }
.ba a { color: inherit; }

.ba-main { position: relative; padding: 26px 0 72px; }
/* border-box: without it `width:100%` plus this padding overflows the viewport. */
/* The article shell grows far less than a directory does, and its reading
   column is capped separately below: a wider page must not turn into a
   wider line of text. 1180px at 1920 and below. */
.ba-wrap { box-sizing: border-box; width: 100%; max-width: var(--bg-wrap-read, 1180px); margin: 0 auto; padding: 0 24px; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.ba-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--ba-line);
}
.ba-header-in {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 68px;
}

.ba-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.ba-brand img { display: block; width: 40px; height: 40px; object-fit: contain; }
.ba-brand-tx { display: flex; flex-direction: column; line-height: 1; }
.ba-brand-tx b {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .01em;
    color: var(--ba-ink);
}
.ba-brand-tx i {
    font-style: normal;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .01em;
    color: var(--ba-red);
}

.ba-header-nav { display: flex; align-items: center; gap: 4px; }
.ba-header-nav a {
    position: relative;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ba-muted);
    text-decoration: none;
}
.ba-header-nav a:hover { color: var(--ba-ink); background: var(--ba-canvas); }
.ba-header-nav a.is-on { color: var(--ba-red); }
.ba-header-nav a.is-on::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--ba-red);
}

.ba-header-search { position: relative; margin-left: auto; flex: 0 1 300px; min-width: 0; }
.ba-header-search svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--ba-faint);
    pointer-events: none;
}
.ba-header-search input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid var(--ba-line);
    border-radius: 999px;
    background: var(--ba-canvas);
    font: inherit;
    font-size: 13.5px;
    color: var(--ba-ink);
}
.ba-header-search input:focus {
    outline: none;
    border-color: var(--ba-red);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(229, 27, 35, .12);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.ba-footer { margin-top: 64px; border-top: 1px solid var(--ba-line); background: var(--ba-canvas); }
.ba-footer-in {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 40px;
}
.ba-footer-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--ba-muted); max-width: 340px; }
.ba-footer-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ba-footer-socials a {
    padding: 6px 13px;
    border: 1px solid var(--ba-line);
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ba-muted);
    text-decoration: none;
}
.ba-footer-socials a:hover { border-color: var(--ba-red); color: var(--ba-red); }

.ba-footer-col { display: flex; flex-direction: column; gap: 9px; }
.ba-footer-col h2 {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ba-faint);
}
.ba-footer-col a { font-size: 14px; color: var(--ba-muted); text-decoration: none; }
.ba-footer-col a:hover { color: var(--ba-red); }

.ba-footer-bar {
    padding-top: 20px;
    padding-bottom: 24px;
    border-top: 1px solid var(--ba-line);
    font-size: 13px;
    color: var(--ba-faint);
}

/* ── Preview banner ──────────────────────────────────────────────────────── */

.ba-previewbar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: #1F2937;
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
}
.ba-previewbar b { font-weight: 700; }
.ba-previewbar svg { width: 16px; height: 16px; flex: none; }
.ba-previewbar a {
    margin-left: auto;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

/* ── Reading progress ────────────────────────────────────────────────────── */

.ba-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 300;
    background: transparent;
    pointer-events: none;
}
.ba-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ba-red), #F43F5E);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.ba-hero { max-width: 820px; margin: 0 auto 26px; text-align: center; }

.ba-crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: 12.5px;
    color: var(--ba-faint);
}
.ba-crumbs a { color: var(--ba-muted); text-decoration: none; }
.ba-crumbs a:hover { color: var(--ba-red); }

.ba-badges { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ba-type {
    display: inline-flex;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.ba-type-featured { background: #FFFBEB; color: #B45309; }

.ba-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(28px, 4.4vw, 46px);
    font-weight: 900;
    line-height: 1.14;
    letter-spacing: -.025em;
    color: var(--ba-ink);
}
.ba-lede {
    margin: 0 0 22px;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.62;
    color: var(--ba-muted);
}

.ba-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid var(--ba-line);
}
.ba-author { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ba-author img { border-radius: 50%; object-fit: cover; }
.ba-author b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ba-ink); }
.ba-author small { font-size: 12px; color: var(--ba-faint); }
.ba-metabits { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ba-muted); flex-wrap: wrap; }

/* ── Cover ───────────────────────────────────────────────────────────────── */

.ba-cover { margin: 0 0 34px; }
.ba-cover img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--ba-radius);
    box-shadow: 0 18px 44px rgba(16, 24, 40, .12);
    display: block;
}

/* ── Body + TOC ──────────────────────────────────────────────────────────── */

.ba-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
}
.ba-layout.is-full { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.ba-toc { position: sticky; top: 88px; }
.ba-toc h2 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ba-faint);
}
.ba-toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--ba-line); }
.ba-toc a {
    padding: 6px 0 6px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ba-muted);
    text-decoration: none;
}
.ba-toc a:hover { color: var(--ba-red); border-left-color: var(--ba-red); }
.ba-toc a.is-sub { padding-left: 26px; font-size: 12.5px; }

.ba-body { font-size: 17px; line-height: 1.78; color: var(--ba-body); }
.ba-body > *:first-child { margin-top: 0; }
.ba-body h2 {
    margin: 42px 0 14px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--ba-ink);
    scroll-margin-top: 90px;
}
.ba-body h3 {
    margin: 32px 0 12px;
    font-size: 21px;
    font-weight: 800;
    color: var(--ba-ink);
    scroll-margin-top: 90px;
}
.ba-body h4 { margin: 26px 0 10px; font-size: 17.5px; font-weight: 700; color: var(--ba-ink); }
.ba-body p { margin: 0 0 20px; }
.ba-body a { color: var(--ba-red); text-decoration: underline; text-underline-offset: 2px; }
.ba-body ul, .ba-body ol { margin: 0 0 22px; padding-left: 24px; }
.ba-body li { margin-bottom: 9px; }
.ba-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 26px 0;
    display: block;
}
.ba-body figure { margin: 26px 0; }
.ba-body figcaption { margin-top: 9px; font-size: 13px; color: var(--ba-faint); text-align: center; }
.ba-body blockquote {
    margin: 26px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--ba-red);
    font-size: 18px;
    font-style: italic;
    color: var(--ba-ink);
}
.ba-body pre {
    margin: 24px 0;
    padding: 18px;
    border-radius: 12px;
    background: #0F1115;
    color: #E5E7EB;
    font-size: 13.5px;
    line-height: 1.6;
    overflow-x: auto;
}
.ba-body code { font-size: .92em; background: var(--ba-canvas); padding: 2px 6px; border-radius: 5px; }
.ba-body pre code { background: none; padding: 0; }
.ba-body hr { margin: 34px 0; border: 0; border-top: 1px solid var(--ba-line); }
.ba-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; display: block; overflow-x: auto; }
.ba-body th, .ba-body td { padding: 11px 13px; border: 1px solid var(--ba-line); text-align: left; }
.ba-body th { background: var(--ba-canvas); font-weight: 700; color: var(--ba-ink); }
.ba-body iframe { max-width: 100%; border-radius: 12px; margin: 24px 0; }

/* ── Gallery ─────────────────────────────────────────────────────────────── */

/* Was a flat strip of same-sized 4:3 thumbnails under a bare "Gallery"
   heading — every image weighted the same, nothing to look at first, and a
   click threw the reader out to a raw image in a new tab.

   Now: a section head in the article's own voice, a mosaic that gives the
   opening image the room to lead, and a lightbox so browsing the set never
   leaves the article. The tiles stay real links to the full image, so the
   old behaviour is exactly what is left when the script does not run. */

/* The section is a framed panel rather than three tiles floating on the page:
   a tinted surface, a hairline, and one soft red ambient in the corner — the
   same language the rest of the site uses — so the gallery reads as a piece of
   the article instead of leftover images under it. */
.ba-gallery {
    position: relative;
    max-width: 1000px;
    margin: 56px auto 0;
    padding: 26px;
    border: 1px solid var(--ba-line);
    border-radius: 24px;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--ba-canvas) 100%);
    overflow: hidden;
}
.ba-gallery::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 58% at 100% 0%, rgba(229, 27, 35, .07), transparent 62%),
        radial-gradient(38% 46% at 0% 100%, rgba(229, 27, 35, .045), transparent 60%);
}
/* Everything sits above the ambient layer. */
.ba-gallery > * { position: relative; }

.ba-gallery-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 20px;
}
.ba-gallery-head-tx { min-width: 0; }
.ba-gallery-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    background: var(--ba-red-tint, #FFF1F2);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--ba-red);
}
.ba-gallery-kicker::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 2px;
    background: var(--ba-red);
}
/* The red rule the section heads elsewhere on the site carry. */
.ba-gallery h2 {
    margin: 0;
    padding-left: 13px;
    border-left: 4px solid var(--ba-red);
    font-size: clamp(23px, 3.1vw, 30px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--ba-ink);
}
.ba-gallery-head p { margin: 9px 0 0 17px; font-size: 15px; color: var(--ba-muted); }

/* Opens the lightbox at the first image. Hidden until the script un-hides it,
   so it never sits on the page as a control that does nothing. */
.ba-gallery-play {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    margin: 0;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--ba-line);
    border-radius: 999px;
    background: #FFFFFF;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ba-ink);
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ba-gallery-play[hidden] { display: none; }
.ba-gallery-play:hover {
    border-color: rgba(229, 27, 35, .32);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -14px rgba(229, 27, 35, .7);
}
.ba-gallery-play:focus-visible { outline: 3px solid var(--ba-red); outline-offset: 3px; }
.ba-gallery-play-ic {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ba-red);
    color: #fff;
}
.ba-gallery-play em {
    font-style: normal;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ba-red-tint, #FFF1F2);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ba-red);
    font-variant-numeric: tabular-nums;
}

/* Four tracks with the lead image spanning two of them, both ways. Explicit
   rows rather than `auto`, or the tall lead tile would stretch its row and
   leave the single-height tiles beside it floating in dead space. */
.ba-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 158px;
    gap: 12px;
}
.ba-gallery-grid > a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: var(--ba-canvas);
    text-decoration: none;
    transition: transform .26s ease, box-shadow .26s ease;
}
.ba-gallery-grid > a:first-child { grid-column: span 2; grid-row: span 2; }
.ba-gallery-grid > a:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(16, 24, 40, .75); }
.ba-gallery-grid > a:focus-visible { outline: 3px solid var(--ba-red); outline-offset: 3px; }

/* A red ring on hover, drawn inside the tile so it costs no layout and cannot
   nudge its neighbours. */
.ba-gallery-grid > a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 0 rgba(229, 27, 35, 0);
    pointer-events: none;
    transition: box-shadow .26s ease;
}
.ba-gallery-grid > a:hover::after { box-shadow: inset 0 0 0 2.5px rgba(229, 27, 35, .9); }

.ba-gallery-grid img {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.ba-gallery-grid > a:hover img { transform: scale(1.07); }

/* Overlay: dark at the foot so a caption stays readable over any photo. The
   scrim is always faintly there — it is what makes the number legible on a
   light picture — and deepens on hover for the caption. */
.ba-gallery-ov {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    background: linear-gradient(180deg, rgba(15, 17, 21, .34) 0%, rgba(15, 17, 21, 0) 34%, rgba(15, 17, 21, 0) 46%, rgba(15, 17, 21, .82) 100%);
    opacity: .55;
    transition: opacity .24s ease;
}
.ba-gallery-grid > a:hover .ba-gallery-ov,
.ba-gallery-grid > a:focus-visible .ba-gallery-ov { opacity: 1; }

/* Position in the set. Tabular figures so 01…10 stay the same width. */
.ba-gallery-n {
    position: absolute;
    top: 13px; left: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    color: rgba(255, 255, 255, .95);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.ba-gallery-n::after {
    content: '';
    display: block;
    width: 16px; height: 2px;
    margin-top: 6px;
    border-radius: 2px;
    background: var(--ba-red);
    transition: width .26s ease;
}
.ba-gallery-grid > a:hover .ba-gallery-n::after { width: 28px; }
/* The lead tile carries the set's opening number a size up. */
.ba-gallery-grid > a:first-child .ba-gallery-n { font-size: 14px; top: 16px; left: 18px; }

.ba-gallery-zoom {
    position: absolute;
    top: 12px; right: 12px;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    color: var(--ba-ink);
    opacity: 0;
    transform: scale(.8) translateY(-2px);
    transition: transform .24s cubic-bezier(.34, 1.4, .64, 1), opacity .2s ease;
}
.ba-gallery-grid > a:hover .ba-gallery-zoom,
.ba-gallery-grid > a:focus-visible .ba-gallery-zoom { opacity: 1; transform: scale(1) translateY(0); }

/* Credit sits with the caption but reads as attribution, not as copy. */
.ba-gallery-credit {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .74);
}

.ba-gallery-cap {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    /* Two lines at most — a long alt should not paper over the picture. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transform: translateY(6px);
    opacity: 0;
    transition: transform .24s ease, opacity .24s ease;
}
.ba-gallery-grid > a:hover .ba-gallery-cap,
.ba-gallery-grid > a:focus-visible .ba-gallery-cap { transform: translateY(0); opacity: 1; }

@media (max-width: 860px) {
    .ba-gallery { padding: 22px; border-radius: 20px; }
    .ba-gallery-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 760px) {
    .ba-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; }
    /* The lead tile keeps its double height but goes full width, so it still
       opens the set rather than sitting in a lopsided two-up row. */
    .ba-gallery-grid > a:first-child { grid-column: 1 / -1; }
    /* Touch has no hover, so the caption and control are always legible. */
    .ba-gallery-ov { opacity: 1; background: linear-gradient(180deg, rgba(15, 17, 21, .3) 0%, rgba(15, 17, 21, 0) 38%, rgba(15, 17, 21, .76) 100%); }
    .ba-gallery-cap { opacity: 1; transform: none; }
    .ba-gallery-zoom { width: 32px; height: 32px; opacity: 1; transform: none; }
}

@media (max-width: 520px) {
    .ba-gallery { padding: 18px; }
    .ba-gallery-play { width: 100%; justify-content: center; }
}

/* ── Gallery, dark ───────────────────────────────────────────────────────── */
body.theme-dark .ba-gallery,
.theme-dark .ba-gallery {
    background: linear-gradient(180deg, #17171C 0%, #121216 100%);
    border-color: rgba(255, 255, 255, .08);
}
body.theme-dark .ba-gallery::before,
.theme-dark .ba-gallery::before {
    background:
        radial-gradient(46% 58% at 100% 0%, rgba(229, 27, 35, .18), transparent 62%),
        radial-gradient(38% 46% at 0% 100%, rgba(229, 27, 35, .12), transparent 60%);
}
body.theme-dark .ba-gallery h2,
.theme-dark .ba-gallery h2 { color: #F5F5F7; }
body.theme-dark .ba-gallery-head p,
.theme-dark .ba-gallery-head p { color: #A9A9B4; }
body.theme-dark .ba-gallery-kicker,
.theme-dark .ba-gallery-kicker { background: rgba(232, 25, 44, .16); }
body.theme-dark .ba-gallery-play,
.theme-dark .ba-gallery-play {
    background: #1D1D23;
    border-color: rgba(255, 255, 255, .1);
    color: #F5F5F7;
}
body.theme-dark .ba-gallery-play em,
.theme-dark .ba-gallery-play em { background: rgba(232, 25, 44, .18); }
body.theme-dark .ba-gallery-grid > a,
.theme-dark .ba-gallery-grid > a { background: #1D1D23; }

/* ── Lightbox ────────────────────────────────────────────────────────────── */

.ba-lb {
    position: fixed;
    inset: 0;
    z-index: 200;             /* over the sticky header, which sits at 60 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    background: rgba(9, 10, 13, .92);
    backdrop-filter: blur(6px);
}
.ba-lb[hidden] { display: none; }
/* Set on <html> while the box is open so the article cannot scroll behind it. */
.ba-lb-open, .ba-lb-open body { overflow: hidden; }

.ba-lb-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    min-width: 0;
    max-height: 100%;
}
.ba-lb-stage img {
    max-width: min(1100px, 100%);
    max-height: calc(100vh - 150px);
    margin: 0;
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.ba-lb-stage figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
.ba-lb-stage figcaption span { font-size: 14.5px; line-height: 1.5; color: #F2F2F5; }
.ba-lb-stage figcaption small {
    flex: none;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #E6E6EC;
}
/* Without a caption the gap would leave the counter drifting under the image. */
.ba-lb:not(.has-cap) .ba-lb-stage figcaption span { display: none; }

.ba-lb-x,
.ba-lb-nav {
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.ba-lb-x:hover,
.ba-lb-nav:hover { background: var(--ba-red); border-color: var(--ba-red); transform: scale(1.06); }
.ba-lb-x:focus-visible,
.ba-lb-nav:focus-visible { outline: 3px solid var(--ba-red); outline-offset: 3px; }

.ba-lb-x { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; }
.ba-lb-nav { width: 52px; height: 52px; }

@media (max-width: 700px) {
    .ba-lb { padding: 16px; gap: 6px; }
    .ba-lb-nav { position: absolute; bottom: 20px; width: 46px; height: 46px; }
    .ba-lb-nav.is-prev { left: 20px; }
    .ba-lb-nav.is-next { right: 20px; }
    .ba-lb-stage img { max-height: calc(100vh - 190px); }
    .ba-lb-x { top: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ba-gallery-grid > a,
    .ba-gallery-grid > a::after,
    .ba-gallery-grid img,
    .ba-gallery-cap,
    .ba-gallery-n::after,
    .ba-gallery-play,
    .ba-gallery-zoom { transition: none; }
    .ba-gallery-grid > a:hover { transform: none; }
    .ba-gallery-grid > a:hover img { transform: none; }
    .ba-gallery-play:hover { transform: none; }
    /* No motion left to reveal them, so the caption and control are simply
       present rather than sliding in. */
    .ba-gallery-cap { transform: none; }
    .ba-gallery-zoom { transform: none; }
}

/* ── Tags ────────────────────────────────────────────────────────────────── */

.ba-tags { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1000px; margin: 40px auto 0; }
.ba-tags a {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ba-canvas);
    border: 1px solid var(--ba-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--ba-muted);
    text-decoration: none;
}
.ba-tags a:hover { border-color: var(--ba-red); color: var(--ba-red); background: #FEF2F2; }

/* ── Author card ─────────────────────────────────────────────────────────── */

/* Built to assets/img/avatar/author-bottom-card.png. Markup lives in
   components/public/article/author-card.blade.php.

   Every rule is written as a descendant of .ba-abox rather than on the class
   alone. The page-level rules further up this sheet — `.ba-body a`,
   `.ba-body h2`, `.ba-body p`, `.ba-body img` — are all specificity 0,1,1 and
   would otherwise win: the call to action came out as red underlined body text
   and the avatar picked up the 12px radius meant for inline article images. */

.ba-abox {
    position: relative;
    max-width: 1000px;
    margin: 46px auto 0;
    border: 1px solid var(--ba-line);
    border-radius: 24px;
    background:
        radial-gradient(90% 130% at 100% 0%, rgba(255, 241, 242, .95) 0%, rgba(255, 241, 242, 0) 55%),
        radial-gradient(80% 130% at 0% 100%, rgba(255, 241, 242, .8) 0%, rgba(255, 241, 242, 0) 55%),
        linear-gradient(180deg, #FFFDFD 0%, #FFF8F9 100%);
    box-shadow: 0 26px 60px -42px rgba(16, 24, 40, .5);
    overflow: hidden;
}

/* The checkered corners from the reference. Decoration only — pseudo-elements,
   so there is nothing here for a screen reader to read out, and masked so the
   pattern dissolves into the card instead of stopping on a hard edge. */
.ba-abox::before,
.ba-abox::after {
    content: '';
    position: absolute;
    width: 178px; height: 178px;
    background: conic-gradient(rgba(229, 27, 35, .07) 0 25%, transparent 0 50%, rgba(229, 27, 35, .07) 0 75%, transparent 0);
    background-size: 26px 26px;
    pointer-events: none;
}
.ba-abox::before {
    top: 0; left: 0;
    -webkit-mask-image: radial-gradient(115% 115% at 0% 0%, #000 0%, transparent 72%);
            mask-image: radial-gradient(115% 115% at 0% 0%, #000 0%, transparent 72%);
}
.ba-abox::after {
    top: 24%; right: 0;
    -webkit-mask-image: radial-gradient(115% 115% at 100% 50%, #000 0%, transparent 72%);
            mask-image: radial-gradient(115% 115% at 100% 50%, #000 0%, transparent 72%);
}

.ba-abox-top {
    position: relative;          /* above the checkered layers */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    padding: 30px 32px;
}

/* ── Avatar ──────────────────────────────────────────────────────────── */

.ba-abox .ba-abox-av { position: relative; }
.ba-abox .ba-abox-av img {
    display: block;
    width: 132px; height: 132px;
    margin: 0;
    border-radius: 50%;
    border: 3px solid #fff;
    object-fit: cover;
    background: var(--ba-canvas);
    box-shadow: 0 0 0 3px var(--ba-red), 0 16px 32px -18px rgba(229, 27, 35, .75);
}
.ba-abox .ba-abox-dot {
    position: absolute;
    right: 6px; bottom: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #22C55E;
}

/* ── Byline ──────────────────────────────────────────────────────────── */

.ba-abox .ba-abox-tx { min-width: 0; }
.ba-abox .ba-abox-eyebrow {
    display: block;
    margin-bottom: 9px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--ba-red);
}
.ba-abox .ba-abox-name {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-size: clamp(25px, 3.3vw, 33px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--ba-ink);
    scroll-margin-top: 96px;
}
.ba-abox .ba-abox-tick { display: inline-flex; flex: none; color: var(--ba-red); }
.ba-abox .ba-abox-role {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ba-red);
}
.ba-abox .ba-abox-role svg { flex: none; }
.ba-abox .ba-abox-bio {
    margin: 0;
    max-width: 58ch;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ba-body);
}

.ba-abox .ba-abox-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.ba-abox .ba-abox-social a {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--ba-line);
    border-radius: 50%;
    background: #fff;
    color: var(--ba-muted);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ba-abox .ba-abox-social a:hover {
    transform: translateY(-2px);
    border-color: currentColor;
    box-shadow: 0 12px 22px -14px currentColor;
}
/* Brand colours at rest, as in the reference. Unlisted platforms keep the
   neutral chip above rather than borrowing someone else's colour. */
.ba-abox .ba-abox-social a.is-youtube   { color: #FF0000; }
.ba-abox .ba-abox-social a.is-x,
.ba-abox .ba-abox-social a.is-twitter,
.ba-abox .ba-abox-social a.is-tiktok    { color: #0F1115; }
.ba-abox .ba-abox-social a.is-instagram { color: #E1306C; }
.ba-abox .ba-abox-social a.is-discord   { color: #5865F2; }
.ba-abox .ba-abox-social a.is-facebook,
.ba-abox .ba-abox-social a.is-fb        { color: #1877F2; }
.ba-abox .ba-abox-social a.is-linkedin  { color: #0A66C2; }
.ba-abox .ba-abox-social a.is-github    { color: #24292F; }
.ba-abox .ba-abox-social a.is-telegram  { color: #229ED9; }
.ba-abox .ba-abox-social a.is-website   { color: var(--ba-red); }

/* ── Figures rail ────────────────────────────────────────────────────── */

/* `align-self: stretch` so the rule runs the height of the card rather than
   only the height of the figures — the grid centres its columns, which left
   the divider as a short stub floating beside the byline. */
.ba-abox .ba-abox-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    padding-left: 30px;
    border-left: 1px solid var(--ba-line);
}
.ba-abox .ba-abox-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 196px;
    padding: 14px 0;
}
.ba-abox .ba-abox-stat + .ba-abox-stat { border-top: 1px solid var(--ba-line); }
.ba-abox .ba-abox-stat-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--ba-red-tint, #FFF1F2);
    color: var(--ba-red);
}
.ba-abox .ba-abox-stat-tx { min-width: 0; }
.ba-abox .ba-abox-stat-tx b {
    display: block;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--ba-ink);
}
.ba-abox .ba-abox-stat-tx small {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--ba-muted);
}

/* ── Footer strip ────────────────────────────────────────────────────── */

.ba-abox .ba-abox-foot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 32px;
    border-top: 1px solid var(--ba-line);
    background: rgba(255, 241, 242, .6);
}
.ba-abox .ba-abox-foot-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--ba-red-tint, #FFF1F2);
    color: var(--ba-red);
}
.ba-abox .ba-abox-foot-tx { flex: 1; min-width: 0; }
.ba-abox .ba-abox-foot-tx b { display: block; font-size: 16px; font-weight: 800; color: var(--ba-ink); }
.ba-abox .ba-abox-foot-tx small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ba-muted); }

.ba-abox .ba-abox-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding: 13px 22px;
    border-radius: 12px;
    background: var(--ba-red);
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 15px 28px -15px rgba(229, 27, 35, .9);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ba-abox .ba-abox-cta:hover {
    background: #C8151D;
    transform: translateY(-2px);
    box-shadow: 0 19px 32px -15px rgba(229, 27, 35, 1);
}
.ba-abox .ba-abox-cta svg { flex: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */

/* The rail turns into a row under the byline before the columns get too thin
   to hold a 25px figure and its label side by side. */
@media (max-width: 900px) {
    .ba-abox-top { grid-template-columns: auto minmax(0, 1fr); gap: 22px 24px; }
    .ba-abox .ba-abox-stats {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding: 18px 0 0;
        border-left: 0;
        border-top: 1px solid var(--ba-line);
    }
    .ba-abox .ba-abox-stat {
        flex: 1 1 200px;
        min-width: 0;
        padding: 12px 14px;
        border: 1px solid var(--ba-line);
        border-radius: 14px;
        background: rgba(255, 255, 255, .7);
    }
    .ba-abox .ba-abox-stat + .ba-abox-stat { border-top: 1px solid var(--ba-line); }
}

@media (max-width: 640px) {
    .ba-abox { margin-top: 36px; border-radius: 20px; }
    .ba-abox-top {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        padding: 26px 18px;
    }
    .ba-abox .ba-abox-av img { width: 108px; height: 108px; }
    .ba-abox .ba-abox-name,
    .ba-abox .ba-abox-role,
    .ba-abox .ba-abox-social { justify-content: center; }
    .ba-abox .ba-abox-bio { text-align: left; }
    .ba-abox .ba-abox-stat { flex-basis: 100%; text-align: left; }
    .ba-abox .ba-abox-foot { flex-wrap: wrap; padding: 18px; }
    .ba-abox .ba-abox-foot-tx { flex: 1 1 60%; }
    .ba-abox .ba-abox-cta { width: 100%; justify-content: center; }
}

/* ── Dark ────────────────────────────────────────────────────────────── */

body.theme-dark .ba-abox,
.theme-dark .ba-abox {
    background: linear-gradient(180deg, #17171C 0%, #141419 100%);
    border-color: rgba(255, 255, 255, .08);
}
body.theme-dark .ba-abox .ba-abox-name,
.theme-dark .ba-abox .ba-abox-name,
body.theme-dark .ba-abox .ba-abox-stat-tx b,
.theme-dark .ba-abox .ba-abox-stat-tx b,
body.theme-dark .ba-abox .ba-abox-foot-tx b,
.theme-dark .ba-abox .ba-abox-foot-tx b { color: #F5F5F7; }
body.theme-dark .ba-abox .ba-abox-bio,
.theme-dark .ba-abox .ba-abox-bio { color: #C9C9D2; }
body.theme-dark .ba-abox .ba-abox-stats,
.theme-dark .ba-abox .ba-abox-stats,
body.theme-dark .ba-abox .ba-abox-stat + .ba-abox-stat,
.theme-dark .ba-abox .ba-abox-stat + .ba-abox-stat,
body.theme-dark .ba-abox .ba-abox-foot,
.theme-dark .ba-abox .ba-abox-foot { border-color: rgba(255, 255, 255, .08); }
body.theme-dark .ba-abox .ba-abox-foot,
.theme-dark .ba-abox .ba-abox-foot { background: rgba(232, 25, 44, .07); }
body.theme-dark .ba-abox .ba-abox-stat-ic,
.theme-dark .ba-abox .ba-abox-stat-ic,
body.theme-dark .ba-abox .ba-abox-foot-ic,
.theme-dark .ba-abox .ba-abox-foot-ic { background: rgba(232, 25, 44, .16); }
body.theme-dark .ba-abox .ba-abox-social a,
.theme-dark .ba-abox .ba-abox-social a {
    background: #1D1D23;
    border-color: rgba(255, 255, 255, .1);
}
body.theme-dark .ba-abox .ba-abox-social a.is-x,
.theme-dark .ba-abox .ba-abox-social a.is-x,
body.theme-dark .ba-abox .ba-abox-social a.is-twitter,
.theme-dark .ba-abox .ba-abox-social a.is-twitter,
body.theme-dark .ba-abox .ba-abox-social a.is-tiktok,
.theme-dark .ba-abox .ba-abox-social a.is-tiktok,
body.theme-dark .ba-abox .ba-abox-social a.is-github,
.theme-dark .ba-abox .ba-abox-social a.is-github { color: #F5F5F7; }
body.theme-dark .ba-abox .ba-abox-av img,
.theme-dark .ba-abox .ba-abox-av img { border-color: #17171C; }
body.theme-dark .ba-abox .ba-abox-dot,
.theme-dark .ba-abox .ba-abox-dot { border-color: #17171C; }

/* ── Related + listing cards ─────────────────────────────────────────────── */

.ba-related { max-width: 1000px; margin: 52px auto 0; }
.ba-related h2 { margin: 0 0 18px; font-size: 24px; font-weight: 800; color: var(--ba-ink); }
.ba-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }

.ba-rcard { display: block; text-decoration: none; }
.ba-rcard img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 11px;
    display: block;
}
.ba-rcard-b small { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ba-red); margin-bottom: 5px; }
.ba-rcard-b b { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ba-ink); margin-bottom: 6px; }
.ba-rcard-b time { font-size: 12.5px; color: var(--ba-faint); }
.ba-rcard:hover b { color: var(--ba-red); }

/* ── Comments ────────────────────────────────────────────────────────────── */

.ba-comments { max-width: 760px; margin: 52px auto 0; }
.ba-comments h2 { margin: 0 0 20px; font-size: 22px; font-weight: 800; color: var(--ba-ink); }
.ba-comments h2 span { color: var(--ba-faint); font-weight: 600; }
.ba-comment { padding: 16px 0; border-bottom: 1px solid var(--ba-line); }
.ba-comment b { font-size: 14px; font-weight: 700; color: var(--ba-ink); margin-right: 9px; }
.ba-comment time { font-size: 12.5px; color: var(--ba-faint); }
.ba-comment p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ba-body); }
.ba-reply { margin: 14px 0 0 26px; padding: 14px 0 0; border-top: 1px solid var(--ba-line); border-bottom: 0; }
.ba-nocomments { font-size: 14.5px; color: var(--ba-muted); }

/* ── Listing ─────────────────────────────────────────────────────────────── */

.ba-listhead { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.ba-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ba-red);
}
.ba-listhead h1 {
    margin: 0 0 12px;
    font-size: clamp(30px, 4.6vw, 46px);
    font-weight: 900;
    letter-spacing: -.025em;
    color: var(--ba-ink);
}
.ba-listhead p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ba-muted); }

.ba-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.ba-cats a {
    padding: 8px 17px;
    border-radius: 999px;
    border: 1px solid var(--ba-line);
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ba-muted);
    text-decoration: none;
}
.ba-cats a:hover { border-color: var(--ba-red); color: var(--ba-red); }
.ba-cats a.is-on { background: var(--ba-red); border-color: var(--ba-red); color: #fff; }

.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; }

.ba-card {
    display: block;
    background: #fff;
    border: 1px solid var(--ba-line);
    border-radius: var(--ba-radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
    transition: transform .18s, box-shadow .18s;
}
.ba-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16, 24, 40, .11); }
.ba-card-img { position: relative; display: block; }
.ba-card-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ba-card-type {
    position: absolute;
    left: 12px; top: 12px;
    padding: 4px 11px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ba-card-b { display: block; padding: 16px; }
.ba-card-b > b { display: block; font-size: 16.5px; font-weight: 800; line-height: 1.33; color: var(--ba-ink); margin-bottom: 8px; }
.ba-card:hover .ba-card-b > b { color: var(--ba-red); }
.ba-card-ex { display: block; font-size: 13.5px; line-height: 1.58; color: var(--ba-muted); margin-bottom: 13px; }
.ba-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--ba-faint); }
.ba-card-meta img { border-radius: 50%; object-fit: cover; }

.ba-empty { text-align: center; padding: 66px 20px; }
.ba-empty h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--ba-ink); }
.ba-empty p { margin: 0 0 20px; color: var(--ba-muted); }
.ba-btn {
    display: inline-flex;
    padding: 11px 22px;
    border-radius: 10px;
    background: var(--ba-red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.ba-pager { display: flex; justify-content: center; margin-top: 36px; }
.ba-pager ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ba-pager .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px; height: 38px;
    padding: 0 11px;
    border: 1px solid var(--ba-line);
    border-radius: 10px;
    background: #fff;
    color: var(--ba-body);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.ba-pager .page-item.active .page-link { background: var(--ba-red); border-color: var(--ba-red); color: #fff; }
.ba-pager .page-item.disabled .page-link { opacity: .45; }
.ba-pager nav > div:first-child { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .ba-layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
    .ba-toc { position: static; margin-bottom: 26px; }
    .ba-toc nav { flex-direction: row; flex-wrap: wrap; border-left: 0; gap: 8px; }
    .ba-toc a { padding: 6px 12px; border: 1px solid var(--ba-line); border-radius: 999px; margin-left: 0; }
    .ba-toc a.is-sub { padding-left: 12px; }
}
@media (max-width: 860px) {
    .ba-footer-in { grid-template-columns: 1fr 1fr; gap: 32px; }
    .ba-footer-brand { grid-column: 1 / -1; }
    .ba-header-search { flex-basis: 200px; }
}
@media (max-width: 640px) {
    .ba-main { padding: 18px 0 52px; }
    .ba-wrap { padding: 0 16px; }
    .ba-body { font-size: 16px; }
    .ba-body h2 { font-size: 23px; margin-top: 34px; }
    .ba-previewbar { flex-wrap: wrap; }
    .ba-previewbar a { margin-left: 0; }

    /* The header wraps to two rows rather than shrinking the search away. */
    .ba-header-in { flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; min-height: 0; }
    .ba-header-nav { order: 3; width: 100%; overflow-x: auto; }
    .ba-header-nav a { padding: 8px 12px; white-space: nowrap; }
    .ba-header-search { flex: 1 1 auto; margin-left: 0; }
    .ba-footer-in { grid-template-columns: 1fr; gap: 28px; }
}

/* =============================================================================
   "On This Page" — authored in the article HTML
   -----------------------------------------------------------------------------
   The frontend no longer builds a table of contents by scanning headings. The
   component is written into the article's own body HTML as a <details> element,
   so the author controls the wording, the order and which sections appear, and
   there is exactly one TOC on the page.

   Built from <details>/<summary> on purpose:

     • Opening and closing are native. No JavaScript is required for the
       interaction itself, so it works on mobile, with JS disabled, and via the
       keyboard (summary is focusable; Enter/Space toggles) for free.
     • The platform's AntiXSS filter escapes <button> and <svg> in article
       bodies but passes <details>, <summary>, <nav>, <span>, class, id, aria-*
       and data-*. So the caret and the bars icon are drawn in CSS rather than
       shipped as inline SVG, which would be stripped.

   Only smooth-scrolling and auto-close are scripted; see article-show.blade.php.
   ============================================================================= */

/* Scoped to .ba rather than .ba-body: the panel is emitted by the renderer
   between the cover and the copy, so it is a sibling of .ba-body now, not a
   child of it. Keeping the same class names means the finalised design carries
   over untouched — and a legacy hand-written block inside an old body still
   matches, though ArticleContent removes those before they reach the page. */
.ba .bgtoc {
    max-width: 1000px;
    margin: 0 auto 30px;
    border: 1px solid var(--ba-line);
    border-radius: 14px;
    background: var(--ba-card, #fff);
    box-shadow: 0 1px 2px rgba(16, 16, 24, .04);
    overflow: hidden;
}
/* Inside the body it keeps the body's own width and rhythm. */
.ba .ba-body .bgtoc { max-width: none; margin: 0 0 30px; }

/* ── Closed state: one clean horizontal card ─────────────────────────── */
.ba .bgtoc__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;                 /* kill the default disclosure triangle */
    user-select: none;
    transition: background .16s ease;
}
.ba .bgtoc__bar::-webkit-details-marker { display: none; }
.ba .bgtoc__bar::marker { content: ''; }
.ba .bgtoc__bar:hover { background: var(--ba-red-tint, #FFF1F2); }
.ba .bgtoc__bar:focus-visible { outline: 2px solid var(--ba-red); outline-offset: -2px; }

/* Bars glyph, drawn rather than an <svg> the sanitiser would strip. */
.ba .bgtoc__ic {
    position: relative;
    flex: none;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--ba-red-tint, #FFF1F2);
}
.ba .bgtoc__ic::before,
.ba .bgtoc__ic::after {
    content: '';
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 15px; height: 2px; border-radius: 2px;
    background: var(--ba-red);
}
.ba .bgtoc__ic::before { top: 11px; box-shadow: 0 5px 0 var(--ba-red); }
.ba .bgtoc__ic::after  { bottom: 11px; }

.ba .bgtoc__t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ba .bgtoc__t b {
    font-size: 15.5px; font-weight: 750; color: var(--ba-ink);
    letter-spacing: -.01em; line-height: 1.3;
}
.ba .bgtoc__t span { font-size: 13.5px; color: var(--ba-muted); }

/* Caret, also CSS-drawn. Rotates when the panel is open. */
.ba .bgtoc__car {
    flex: none;
    width: 9px; height: 9px;
    margin-inline-end: 4px;
    border-right: 2px solid var(--ba-muted);
    border-bottom: 2px solid var(--ba-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .22s ease, border-color .16s ease;
}
.ba .bgtoc[open] .bgtoc__car { transform: rotate(-135deg) translate(-3px, -3px); }
.ba .bgtoc__bar:hover .bgtoc__car { border-color: var(--ba-red); }

/* ── Open state: a vertical list, not a row of pills ─────────────────── */
.ba .bgtoc__list {
    display: flex;
    flex-direction: column;
    padding: 6px 10px 12px;
    border-top: 1px solid var(--ba-line);
}
.ba .bgtoc__list a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ba-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    transition: background .15s ease, color .15s ease;
}
.ba .bgtoc__list a:hover { background: var(--ba-red-tint, #FFF1F2); color: var(--ba-red); }

/* Numbered badge */
.ba .bgtoc__n {
    flex: none;
    display: inline-grid; place-items: center;
    min-width: 30px; height: 26px;
    padding-inline: 7px;
    border-radius: 8px;
    background: var(--ba-red-tint, #FFF1F2);
    color: var(--ba-red);
    font-size: 12.5px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ba .bgtoc__list a:hover .bgtoc__n { background: var(--ba-red); color: #fff; }

/* The reveal. details cannot transition its own height, so the list slides. */
@media (prefers-reduced-motion: no-preference) {
    .ba .bgtoc[open] .bgtoc__list { animation: bgtoc-open .24s ease both; }
    @keyframes bgtoc-open {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* Sections land clear of the sticky header when jumped to directly. */
.ba-body [id^="mojang-"],
.ba-body section[id],
/* Anchored headings clear the sticky header when jumped to. Every h2/h3 now
   carries an id (ArticleContent assigns them), so both levels are covered —
   a deep link to a sub-heading lands as cleanly as a section jump. */
.ba-body h2[id],
.ba-body h3[id] { scroll-margin-top: 96px; }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .ba .bgtoc__bar { padding: 13px 14px; gap: 11px; }
    .ba .bgtoc__t { gap: 2px; flex-direction: column; align-items: flex-start; }
    .ba .bgtoc__t b { font-size: 15px; }
    .ba .bgtoc__t span { font-size: 12.5px; }
    .ba .bgtoc__list a { font-size: 14.5px; padding: 11px 8px; }
}

/* ── Dark ────────────────────────────────────────────────────────────── */
body.theme-dark .ba .bgtoc,
.theme-dark .ba .bgtoc {
    background: #17171C;
    border-color: rgba(255, 255, 255, .08);
}
body.theme-dark .ba .bgtoc__bar:hover,
.theme-dark .ba .bgtoc__bar:hover { background: rgba(232, 25, 44, .12); }
body.theme-dark .ba .bgtoc__list,
.theme-dark .ba .bgtoc__list { border-top-color: rgba(255, 255, 255, .08); }
body.theme-dark .ba .bgtoc__ic,
.theme-dark .ba .bgtoc__ic,
body.theme-dark .ba .bgtoc__n,
.theme-dark .ba .bgtoc__n { background: rgba(232, 25, 44, .16); }
body.theme-dark .ba .bgtoc__t b,
.theme-dark .ba .bgtoc__t b { color: #F5F5F7; }
body.theme-dark .ba .bgtoc__list a,
.theme-dark .ba .bgtoc__list a { color: #E3E3E9; }
body.theme-dark .ba .bgtoc__list a:hover,
.theme-dark .ba .bgtoc__list a:hover { background: rgba(232, 25, 44, .12); }

/* =============================================================================
   FAQ accordion — authored in the article HTML
   -----------------------------------------------------------------------------
   These items used to be <button class="barlin-faq-btn">, which the platform's
   AntiXSS filter escapes in article bodies — so the tags rendered as visible
   text on the page and the accordion never opened. They are now
   <details>/<summary>, which the filter passes untouched, and which give the
   open/close behaviour natively: no JavaScript, works on mobile, and the
   summary is focusable so it works from the keyboard too.

   The original class names are kept, so anything keyed to them still applies.
   Styled to sit with the rest of the article: same red accent, same radii, same
   card treatment as the "On This Page" component above it.
   ============================================================================= */

.ba-body .barlin-faq { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 8px; }

.ba-body .barlin-faq-item {
    border: 1px solid var(--ba-line);
    border-radius: 14px;
    background: var(--ba-card, #fff);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ba-body .barlin-faq-item:hover { border-color: rgba(232, 25, 44, .28); }
.ba-body .barlin-faq-item[open] {
    border-color: rgba(232, 25, 44, .34);
    box-shadow: 0 10px 28px -18px rgba(232, 25, 44, .5);
}

/* ── Question row ────────────────────────────────────────────────────── */
.ba-body .barlin-faq-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;                 /* remove the default disclosure triangle */
    user-select: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ba-ink);
    transition: background .16s ease, color .16s ease;
}
.ba-body .barlin-faq-btn::-webkit-details-marker { display: none; }
.ba-body .barlin-faq-btn::marker { content: ''; }
.ba-body .barlin-faq-btn:hover { background: var(--ba-red-tint, #FFF1F2); color: var(--ba-red); }
.ba-body .barlin-faq-btn:focus-visible { outline: 2px solid var(--ba-red); outline-offset: -2px; }
.ba-body .barlin-faq-item[open] .barlin-faq-btn { color: var(--ba-red); }

.ba-body .barlin-faq-q { flex: 1; min-width: 0; }

/* ── Plus / minus marker, drawn rather than typed ────────────────────── */
.ba-body .barlin-plus {
    position: relative;
    flex: none;
    width: 28px; height: 28px;
    border-radius: 9px;
    background: var(--ba-red-tint, #FFF1F2);
    transition: background .18s ease, transform .28s ease;
}
.ba-body .barlin-plus::before,
.ba-body .barlin-plus::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background: var(--ba-red);
    transition: transform .28s ease, opacity .2s ease;
}
/* The vertical stroke rotates away, turning + into − as the item opens. */
.ba-body .barlin-plus::after { transform: rotate(90deg); }
.ba-body .barlin-faq-item[open] .barlin-plus { background: var(--ba-red); transform: rotate(180deg); }
.ba-body .barlin-faq-item[open] .barlin-plus::before,
.ba-body .barlin-faq-item[open] .barlin-plus::after { background: #fff; }
.ba-body .barlin-faq-item[open] .barlin-plus::after { transform: rotate(0deg); opacity: 0; }

/* ── Answer ──────────────────────────────────────────────────────────── */
.ba-body .barlin-faq-answer {
    padding: 0 18px 16px;
    border-top: 1px solid var(--ba-line);
    padding-top: 14px;
    margin-top: 0;
}
.ba-body .barlin-faq-answer p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ba-body); }
.ba-body .barlin-faq-answer p + p { margin-top: 12px; }

/* details cannot animate its own height, so the answer slides in instead. */
@media (prefers-reduced-motion: no-preference) {
    .ba-body .barlin-faq-item[open] .barlin-faq-answer { animation: barlin-faq-open .26s ease both; }
    @keyframes barlin-faq-open {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .ba-body .barlin-faq-btn { padding: 14px; gap: 11px; font-size: 15px; }
    .ba-body .barlin-faq-answer { padding: 12px 14px 14px; }
    .ba-body .barlin-faq-answer p { font-size: 15px; }
    .ba-body .barlin-plus { width: 26px; height: 26px; }
}

/* ── Dark ────────────────────────────────────────────────────────────── */
body.theme-dark .ba-body .barlin-faq-item,
.theme-dark .ba-body .barlin-faq-item {
    background: #17171C;
    border-color: rgba(255, 255, 255, .08);
}
body.theme-dark .ba-body .barlin-faq-btn,
.theme-dark .ba-body .barlin-faq-btn { color: #F5F5F7; }
body.theme-dark .ba-body .barlin-faq-btn:hover,
.theme-dark .ba-body .barlin-faq-btn:hover { background: rgba(232, 25, 44, .12); }
body.theme-dark .ba-body .barlin-plus,
.theme-dark .ba-body .barlin-plus { background: rgba(232, 25, 44, .16); }
body.theme-dark .ba-body .barlin-faq-answer,
.theme-dark .ba-body .barlin-faq-answer { border-top-color: rgba(255, 255, 255, .08); }
body.theme-dark .ba-body .barlin-faq-answer p,
.theme-dark .ba-body .barlin-faq-answer p { color: #A9A9B4; }

/* =============================================================================
   Long-form article blocks — the `barlin-*` system authored in article HTML
   -----------------------------------------------------------------------------
   Long articles are written with their own block vocabulary: numbered sections,
   fact strips, timelines, pull quotes, comparison cards and a closing note. Only
   two of those blocks (the TOC and the FAQ, above) had ever been given rules, so
   everything else rendered as bare stacked text — a fact strip read as six loose
   lines, and a section opened with one grey line of text above a heading with
   nothing at all to say that a new part had started.

   That separation is the point of this block. Every `.barlin-section` opens with
   a rule across the column and a numbered marker, so the boundary the "On This
   Page" links jump between is something the reader can actually see. The section
   heads also carry a deeper `scroll-margin-top` than a bare heading needs, so a
   jump lands with the divider and the marker on screen above the heading rather
   than with the heading pinned to the header.

   Scoped under .ba-body throughout: these names only ever appear inside article
   body HTML, so nothing outside an article page can pick them up.
   ============================================================================= */

.ba-body .barlin-article,
.ba-body .barlin-inner { margin: 0; }

/* The body carries its own reading bar, but nothing fills it — the page-level
   one (.ba-progress) is the bar that is actually wired up. Left in the markup,
   kept off the page, so it cannot render as a stray empty strip. */
.ba-body .barlin-progress { display: none; }

/* ── Opening block ───────────────────────────────────────────────────── */

.ba-body .barlin-intro { margin: 0 0 6px; }

.ba-body .barlin-kicker {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ba-red);
}
.ba-body .barlin-title {
    margin: 0 0 14px;
    font-size: clamp(27px, 4.2vw, 38px);
    font-weight: 900;
    line-height: 1.17;
    letter-spacing: -.03em;
    color: var(--ba-ink);
}
.ba-body .barlin-lead {
    margin: 0 0 18px;
    font-size: 18.5px;
    line-height: 1.68;
    color: var(--ba-muted);
}
/* flex rather than plain text: the authored markup runs the meta bits together
   with no separator between them, and each becomes its own flex item here. */
.ba-body .barlin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ba-line);
    font-size: 13.5px;
    color: var(--ba-faint);
}
.ba-body .barlin-meta strong { font-weight: 700; color: var(--ba-ink); }

/* ── Section: the unit the table of contents jumps between ───────────── */

.ba-body .barlin-section { position: relative; padding: 46px 0 44px; }

/* The boundary line. A hairline across the column with a short red segment at
   its left end — the mark that says one part has ended and another begins. */
.ba-body .barlin-section::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--ba-line);
}
.ba-body .barlin-section::after {
    content: '';
    position: absolute;
    left: 0; top: -1px;
    width: 54px; height: 3px;
    border-radius: 2px;
    background: var(--ba-red);
}
/* Nothing precedes the first section, so it gets no divider: either it opens
   the article outright, or it follows the intro, which closes on its own rule. */
.ba-body .barlin-article > .barlin-section:first-child::before,
.ba-body .barlin-article > .barlin-section:first-child::after,
.ba-body .barlin-intro + .barlin-section::before,
.ba-body .barlin-intro + .barlin-section::after { content: none; }

.ba-body .barlin-section-head { margin: 0 0 22px; }

/* The section marker — "02 — The beginning". A red chip rather than a line of
   grey text, so it reads as a signpost for the section instead of as prose. */
.ba-body .barlin-number {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    background: var(--ba-red-tint, #FFF1F2);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--ba-red);
}
.ba-body .barlin-number::before {
    content: '';
    flex: none;
    width: 6px; height: 6px;
    border-radius: 2px;
    background: var(--ba-red);
}

.ba-body .barlin-section-head h2 {
    margin: 0;
    font-size: clamp(25px, 3.4vw, 33px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--ba-ink);
    /* Deeper than the 96px a bare heading uses. The sticky header is 85px and
       the section's divider plus its marker take another ~105px above the
       heading, so a shallower offset jumped clean past the boundary and landed
       on the heading alone — which is what made one section run into the next.
       Measured, not guessed: at 205 the divider sits ~15px clear of the header. */
    scroll-margin-top: 205px;
}
.ba-body .barlin-section-head > p {
    margin: 14px 0 0;
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--ba-muted);
}

.ba-body .barlin-content > *:first-child { margin-top: 0; }
.ba-body .barlin-content > *:last-child,
.ba-body .barlin-section > .barlin-inner > *:last-child { margin-bottom: 0; }

/* ── Fact strip ──────────────────────────────────────────────────────── */

.ba-body .barlin-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 28px 0 0;
}
.ba-body .barlin-fact {
    padding: 18px;
    border: 1px solid var(--ba-line);
    border-radius: 14px;
    background: var(--ba-canvas);
}
.ba-body .barlin-fact-value {
    font-size: 27px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--ba-red);
}
.ba-body .barlin-fact-label {
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ba-muted);
}

/* ── Highlight note ──────────────────────────────────────────────────── */

.ba-body .barlin-highlight {
    margin: 28px 0;
    padding: 20px 22px;
    border: 1px solid rgba(229, 27, 35, .16);
    border-left: 3px solid var(--ba-red);
    border-radius: 4px 14px 14px 4px;
    background: linear-gradient(180deg, var(--ba-red-tint, #FFF1F2), rgba(255, 241, 242, .3));
}
.ba-body .barlin-highlight h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: var(--ba-ink);
}
.ba-body .barlin-highlight p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--ba-body);
}

/* ── Pull quote ──────────────────────────────────────────────────────── */

.ba-body .barlin-quote {
    margin: 30px 0;
    padding: 24px 26px 22px;
    border: 1px solid var(--ba-line);
    border-radius: 16px;
    background: var(--ba-card, #fff);
    box-shadow: 0 16px 36px -26px rgba(16, 24, 40, .55);
    text-align: center;
}
.ba-body .barlin-quote-mark {
    font-size: 54px;
    font-weight: 900;
    line-height: .62;
    color: var(--ba-red);
    opacity: .26;
}
.ba-body .barlin-quote p {
    margin: 12px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -.015em;
    color: var(--ba-ink);
}
.ba-body .barlin-quote small {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ba-faint);
}

/* ── Card grid ───────────────────────────────────────────────────────── */

.ba-body .barlin-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 14px;
    margin: 28px 0;
}
.ba-body .barlin-card {
    padding: 20px;
    border: 1px solid var(--ba-line);
    border-radius: 16px;
    background: var(--ba-card, #fff);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ba-body .barlin-card:hover {
    border-color: rgba(229, 27, 35, .26);
    box-shadow: 0 16px 34px -24px rgba(229, 27, 35, .55);
    transform: translateY(-2px);
}
.ba-body .barlin-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--ba-red-tint, #FFF1F2);
    font-size: 18px;
    font-weight: 800;
    color: var(--ba-red);
}
.ba-body .barlin-card h3 {
    margin: 0 0 7px;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--ba-ink);
}
.ba-body .barlin-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ba-muted);
}

/* ── Timeline ────────────────────────────────────────────────────────── */

.ba-body .barlin-timeline { position: relative; margin: 28px 0 0; padding-left: 28px; }
.ba-body .barlin-timeline::before {
    content: '';
    position: absolute;
    left: 5px; top: 8px; bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--ba-red), rgba(229, 27, 35, .1));
}
.ba-body .barlin-timeline-item { position: relative; padding-bottom: 26px; }
.ba-body .barlin-timeline-item:last-child { padding-bottom: 0; }
/* The marker carries a non-breaking space in the markup; zeroing the font
   keeps it from setting the dot's height. */
.ba-body .barlin-dot {
    position: absolute;
    left: -28px; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--ba-red);
    box-shadow: 0 0 0 4px var(--ba-red-tint, #FFF1F2);
    font-size: 0;
    line-height: 0;
}
.ba-body .barlin-year {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ba-red);
}
.ba-body .barlin-timeline-item h3 {
    margin: 7px 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: var(--ba-ink);
}
.ba-body .barlin-timeline-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ba-muted);
}

/* ── Table ───────────────────────────────────────────────────────────── */

/* `overflow: auto` rather than `hidden`: the base .ba-body table rule makes
   tables scroll sideways on narrow screens, and hiding overflow to get the
   rounded corners would have taken that away. */
.ba-body .barlin-table {
    margin: 28px 0;
    border: 1px solid var(--ba-line);
    border-radius: 14px;
    overflow: auto;
    font-size: 15px;
}
.ba-body .barlin-table th,
.ba-body .barlin-table td {
    padding: 13px 16px;
    border: 0;
    border-bottom: 1px solid var(--ba-line);
}
.ba-body .barlin-table thead th {
    background: var(--ba-canvas);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ba-muted);
}
.ba-body .barlin-table tbody td:first-child { font-weight: 700; color: var(--ba-ink); }
.ba-body .barlin-table tbody tr:last-child td { border-bottom: 0; }
.ba-body .barlin-table tbody tr:hover td { background: var(--ba-red-tint, #FFF1F2); }

/* ── Closing note ────────────────────────────────────────────────────── */

.ba-body .barlin-final {
    padding: 30px 28px;
    border: 1px solid var(--ba-line);
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 0% 0%, var(--ba-red-tint, #FFF1F2) 0%, rgba(255, 241, 242, 0) 58%),
        var(--ba-card, #fff);
}
.ba-body .barlin-final h2 {
    margin: 0 0 14px;
    font-size: clamp(21px, 2.9vw, 27px);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -.025em;
    color: var(--ba-ink);
}
.ba-body .barlin-final p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.72;
    color: var(--ba-body);
}
.ba-body .barlin-final p:last-child { margin-bottom: 0; }

/* `.barlin-reveal` is deliberately left with no rule.

   The class marks blocks for a scroll-in animation, and wiring one up means
   the block starts at opacity 0 and waits to be observed. That was tried and
   reverted: arriving from a table-of-contents link drops the reader straight
   onto a section whose blocks have not been revealed yet, so the destination
   is blank for the length of the fade — worst of all in exactly the jump this
   design is meant to serve. Article text does not get an invisible state. */

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .ba-body .barlin-section { padding: 34px 0 32px; }
    /* The section head is shorter here, so the offset comes down with it.
       Measured at both ends of the range: the header is still 85px until
       540px and 71px below it, and 160 clears the divider either way. */
    .ba-body .barlin-section-head h2 { scroll-margin-top: 160px; }
    .ba-body .barlin-section-head > p { font-size: 16.5px; }
    .ba-body .barlin-lead { font-size: 17px; }
    .ba-body .barlin-facts { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .ba-body .barlin-fact-value { font-size: 24px; }
    .ba-body .barlin-highlight { padding: 17px 18px; }
    .ba-body .barlin-quote { padding: 20px 18px 18px; }
    .ba-body .barlin-quote p { font-size: 17.5px; }
    .ba-body .barlin-final { padding: 24px 19px; }
}

/* ── Dark ────────────────────────────────────────────────────────────── */

body.theme-dark .ba-body .barlin-section::before,
.theme-dark .ba-body .barlin-section::before,
body.theme-dark .ba-body .barlin-meta,
.theme-dark .ba-body .barlin-meta { border-color: rgba(255, 255, 255, .08); background-color: transparent; }
body.theme-dark .ba-body .barlin-section::before,
.theme-dark .ba-body .barlin-section::before { background: rgba(255, 255, 255, .08); }
body.theme-dark .ba-body .barlin-title,
.theme-dark .ba-body .barlin-title,
body.theme-dark .ba-body .barlin-section-head h2,
.theme-dark .ba-body .barlin-section-head h2,
body.theme-dark .ba-body .barlin-highlight h3,
.theme-dark .ba-body .barlin-highlight h3,
body.theme-dark .ba-body .barlin-quote p,
.theme-dark .ba-body .barlin-quote p,
body.theme-dark .ba-body .barlin-card h3,
.theme-dark .ba-body .barlin-card h3,
body.theme-dark .ba-body .barlin-timeline-item h3,
.theme-dark .ba-body .barlin-timeline-item h3,
body.theme-dark .ba-body .barlin-final h2,
.theme-dark .ba-body .barlin-final h2 { color: #F5F5F7; }
body.theme-dark .ba-body .barlin-number,
.theme-dark .ba-body .barlin-number,
body.theme-dark .ba-body .barlin-card-icon,
.theme-dark .ba-body .barlin-card-icon { background: rgba(232, 25, 44, .16); }
body.theme-dark .ba-body .barlin-fact,
.theme-dark .ba-body .barlin-fact,
body.theme-dark .ba-body .barlin-card,
.theme-dark .ba-body .barlin-card,
body.theme-dark .ba-body .barlin-quote,
.theme-dark .ba-body .barlin-quote,
body.theme-dark .ba-body .barlin-final,
.theme-dark .ba-body .barlin-final {
    background: #17171C;
    border-color: rgba(255, 255, 255, .08);
}
body.theme-dark .ba-body .barlin-highlight,
.theme-dark .ba-body .barlin-highlight {
    background: rgba(232, 25, 44, .1);
    border-color: rgba(232, 25, 44, .28);
    border-left-color: var(--ba-red);
}
body.theme-dark .ba-body .barlin-table,
.theme-dark .ba-body .barlin-table { border-color: rgba(255, 255, 255, .08); }
body.theme-dark .ba-body .barlin-table th,
.theme-dark .ba-body .barlin-table th,
body.theme-dark .ba-body .barlin-table td,
.theme-dark .ba-body .barlin-table td { border-bottom-color: rgba(255, 255, 255, .08); }
body.theme-dark .ba-body .barlin-table thead th,
.theme-dark .ba-body .barlin-table thead th { background: rgba(255, 255, 255, .04); }
body.theme-dark .ba-body .barlin-table tbody td:first-child,
.theme-dark .ba-body .barlin-table tbody td:first-child { color: #F5F5F7; }
body.theme-dark .ba-body .barlin-table tbody tr:hover td,
.theme-dark .ba-body .barlin-table tbody tr:hover td { background: rgba(232, 25, 44, .12); }
body.theme-dark .ba-body .barlin-highlight p,
.theme-dark .ba-body .barlin-highlight p,
body.theme-dark .ba-body .barlin-final p,
.theme-dark .ba-body .barlin-final p { color: #C9C9D2; }
body.theme-dark .ba-body .barlin-dot,
.theme-dark .ba-body .barlin-dot { box-shadow: 0 0 0 4px rgba(232, 25, 44, .16); }

/* =============================================================================
   Article FAQ — rendered from `article_faqs`
   -----------------------------------------------------------------------------
   Built to assets/img/articles/faq-section.png. Markup lives in
   components/public/article/faq.blade.php; the section only exists on the page
   when the article actually has questions.

   Reuses this sheet's tokens and the numbered-section language from the body
   above — same red chip, same heading weight, same radii — so the section reads
   as part of the article rather than as a widget bolted to the end of it.

   Motion: 300ms ease-out on the answer, 300ms on the mark, 180ms on hover.
   Everything non-essential is dropped under prefers-reduced-motion at the foot
   of the block; the accordion still opens and closes, it just does it at once.
   ============================================================================= */

.ba-faq { max-width: 1000px; margin: 52px auto 0; }

/* ── Section head ────────────────────────────────────────────────────── */

.ba-faq-head { margin: 0 0 22px; }

.ba-faq-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    background: var(--ba-red-tint, #FFF1F2);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--ba-red);
}
.ba-faq-kicker::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 2px;
    background: var(--ba-red);
}

.ba-faq h2 {
    margin: 0;
    font-size: clamp(25px, 3.4vw, 33px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--ba-ink);
    scroll-margin-top: 110px;
}
.ba-faq-intro {
    margin: 14px 0 0;
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ba-muted);
}

/* ── Rows ────────────────────────────────────────────────────────────── */

.ba-faq-list { display: flex; flex-direction: column; gap: 10px; }

.ba-faq-item {
    border: 1px solid var(--ba-line);
    border-radius: 14px;
    background: var(--ba-card, #fff);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.ba-faq-item:hover { border-color: rgba(229, 27, 35, .3); background: #FFFDFD; }
/* Open: the accent the reference gives the active row. */
.ba-faq-item[open] {
    border-color: var(--ba-red);
    box-shadow: 0 10px 30px -22px rgba(229, 27, 35, .75);
}

.ba-faq-q {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 18px;
    cursor: pointer;
    list-style: none;                 /* kill the native disclosure triangle */
    user-select: none;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ba-ink);
    transition: color .18s ease;
}
.ba-faq-q::-webkit-details-marker { display: none; }
.ba-faq-q::marker { content: ''; }
.ba-faq-q > span:first-child { flex: 1; min-width: 0; }
.ba-faq-q:focus-visible { outline: 3px solid var(--ba-red); outline-offset: -3px; border-radius: 14px; }
.ba-faq-item[open] .ba-faq-q { color: var(--ba-red); }

/* ── The + / − mark ──────────────────────────────────────────────────── */

/* Two strokes in one box. Opening rotates the box and turns the vertical
   stroke onto the horizontal one, so the plus resolves into a minus in a
   single movement instead of swapping glyphs.

   The box turns 180° rather than 45°: at 45° the surviving stroke would come
   to rest on the diagonal, which reads as a half-finished cross rather than
   the minus the reference ends on. */
.ba-faq-mark {
    position: relative;
    flex: none;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--ba-red-tint, #FFF1F2);
    transition: background .2s ease, transform .3s cubic-bezier(.22, .7, .3, 1);
}
.ba-faq-mark::before,
.ba-faq-mark::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 13px; height: 2px;
    margin: -1px 0 0 -6.5px;
    border-radius: 2px;
    background: var(--ba-red);
    transition: transform .3s cubic-bezier(.22, .7, .3, 1), opacity .2s ease, background .2s ease;
}
.ba-faq-mark::after { transform: rotate(90deg); }

.ba-faq-item:hover .ba-faq-mark { background: #FDE3E5; }
.ba-faq-item[open] .ba-faq-mark { background: var(--ba-red); transform: rotate(180deg); }
.ba-faq-item[open] .ba-faq-mark::before,
.ba-faq-item[open] .ba-faq-mark::after { background: #fff; }
.ba-faq-item[open] .ba-faq-mark::after { transform: rotate(0deg); opacity: 0; }

/* Closing has to start looking closed straight away, but `open` cannot come
   off the <details> until the collapse has finished or the content would
   vanish mid-animation. So while the script is driving, `.is-open` is the
   visual state and these put a closing row back to its resting look on the
   first frame — transitions still apply, so it eases back rather than snaps. */
.ba-faq.is-enhanced .ba-faq-item:not(.is-open) { border-color: var(--ba-line); box-shadow: none; }
.ba-faq.is-enhanced .ba-faq-item:not(.is-open) .ba-faq-q { color: var(--ba-ink); border-bottom-color: transparent; }
.ba-faq.is-enhanced .ba-faq-item:not(.is-open) .ba-faq-mark { background: var(--ba-red-tint, #FFF1F2); transform: none; }
.ba-faq.is-enhanced .ba-faq-item:not(.is-open) .ba-faq-mark::before,
.ba-faq.is-enhanced .ba-faq-item:not(.is-open) .ba-faq-mark::after { background: var(--ba-red); }
.ba-faq.is-enhanced .ba-faq-item:not(.is-open) .ba-faq-mark::after { transform: rotate(90deg); opacity: 1; }
.ba-faq.is-enhanced .ba-faq-item:not(.is-open):hover .ba-faq-mark { background: #FDE3E5; }

/* ── Answer ──────────────────────────────────────────────────────────── */

/* Height is animated by the script (see article-show.blade.php), which sets
   an explicit height and clears it once the transition lands, so the row is
   never left with a height that stops the text reflowing. Padding and opacity
   are animated here so the copy lifts in rather than appearing. */
/* The divider sits on the question, not on the answer, so it stays pinned
   under the heading instead of sliding down with the copy. Always present and
   transparent when closed, so gaining a colour cannot shift the row by a pixel. */
.ba-faq-q { border-bottom: 1px solid transparent; }
.ba-faq-item[open] .ba-faq-q { border-bottom-color: rgba(229, 27, 35, .18); }

/* Height animation without measuring anything.
   A grid row interpolates from 0fr to 1fr, which the browser resolves against
   the content's own height — so there is no scrollHeight read, no forced
   reflow on click, and no inline height left on the element afterwards. The
   previous version animated `height` and had to measure; it also put the
   padding on the animating box, which cannot compress below itself, so every
   open began with a 33px jump before the transition started. */
.ba-faq-a {
    display: grid;
    grid-template-rows: 1fr;          /* the no-JS state: open means visible */
    transition: grid-template-rows .34s cubic-bezier(.32, .72, 0, 1);
}
.ba-faq-a-in { overflow: hidden; min-height: 0; }

/* Only once the script has taken over does closed mean collapsed. Without it
   an open <details> would render its answer at zero height and the section
   would look broken with JavaScript off. */
.ba-faq.is-enhanced .ba-faq-a { grid-template-rows: 0fr; }
.ba-faq.is-enhanced .ba-faq-item.is-open .ba-faq-a { grid-template-rows: 1fr; }

.ba-faq-a p {
    margin: 0;
    padding: 15px 18px 17px;
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--ba-body);
}
.ba-faq-a p + p { padding-top: 0; }

/* The copy lifts in slightly behind the opening row rather than arriving with
   it, which is what stops the movement reading as one flat slab. */
.ba-faq.is-enhanced .ba-faq-a-in {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .24s ease, transform .3s cubic-bezier(.32, .72, 0, 1);
}
.ba-faq.is-enhanced .ba-faq-item.is-open .ba-faq-a-in {
    opacity: 1;
    transform: none;
    transition-delay: .06s;
}

/* ── Closing prompt ──────────────────────────────────────────────────── */

.ba-faq-more {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(229, 27, 35, .16);
    border-radius: 16px;
    background: var(--ba-red-tint, #FFF1F2);
}
.ba-faq-more-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--ba-red);
    color: #fff;
}
.ba-faq-more-tx { flex: 1; min-width: 0; }
.ba-faq-more-tx b { display: block; font-size: 16px; font-weight: 800; color: var(--ba-ink); }
.ba-faq-more-tx span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--ba-muted); }

.ba-faq .ba-faq-more-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding: 12px 20px;
    border-radius: 11px;
    background: var(--ba-red);
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ba-faq .ba-faq-more-cta:hover {
    background: #C8151D;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(229, 27, 35, .95);
}
.ba-faq .ba-faq-more-cta svg { flex: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .ba-faq { margin-top: 40px; }
    .ba-faq-intro { font-size: 16px; }
    .ba-faq-q { padding: 15px; gap: 12px; font-size: 15.5px; }
    /* Stays a 32px target on the smallest screens rather than shrinking. */
    .ba-faq-mark { width: 32px; height: 32px; border-radius: 8px; }
    .ba-faq-a p { padding: 13px 15px 15px; font-size: 15px; }
    .ba-faq-more { flex-wrap: wrap; padding: 16px; }
    .ba-faq-more-tx { flex: 1 1 60%; }
    .ba-faq .ba-faq-more-cta { width: 100%; justify-content: center; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

/* The accordion keeps working; only the movement goes. Height is left alone
   entirely here — the script checks the same query and skips the animation,
   so rows open instantly instead of transitioning. */
@media (prefers-reduced-motion: reduce) {
    .ba-faq-item,
    .ba-faq-q,
    .ba-faq-mark,
    .ba-faq-mark::before,
    .ba-faq-mark::after,
    .ba-faq .ba-faq-more-cta { transition: none; }
    /* The script does not run at all under reduced motion, so `is-enhanced` is
       never set and <details> opens instantly on its own. These only matter if
       the preference is switched on after the page has loaded. */
    .ba-faq-a,
    .ba-faq.is-enhanced .ba-faq-a-in { transition: none; }
    .ba-faq-item[open] .ba-faq-mark { transform: none; }
    .ba-faq .ba-faq-more-cta:hover { transform: none; }
}

/* ── Dark ────────────────────────────────────────────────────────────── */

body.theme-dark .ba-faq-item,
.theme-dark .ba-faq-item { background: #17171C; border-color: rgba(255, 255, 255, .08); }
body.theme-dark .ba-faq-item:hover,
.theme-dark .ba-faq-item:hover { background: #1B1B21; border-color: rgba(232, 25, 44, .35); }
body.theme-dark .ba-faq h2,
.theme-dark .ba-faq h2,
body.theme-dark .ba-faq-q,
.theme-dark .ba-faq-q,
body.theme-dark .ba-faq-more-tx b,
.theme-dark .ba-faq-more-tx b { color: #F5F5F7; }
body.theme-dark .ba-faq-item[open] .ba-faq-q,
.theme-dark .ba-faq-item[open] .ba-faq-q { color: var(--ba-red); }
body.theme-dark .ba-faq-mark,
.theme-dark .ba-faq-mark { background: rgba(232, 25, 44, .16); }
body.theme-dark .ba-faq-a,
.theme-dark .ba-faq-a { border-top-color: rgba(255, 255, 255, .08); }
body.theme-dark .ba-faq-a p,
.theme-dark .ba-faq-a p { color: #C9C9D2; }
body.theme-dark .ba-faq-more,
.theme-dark .ba-faq-more { background: rgba(232, 25, 44, .1); border-color: rgba(232, 25, 44, .26); }

/* =============================================================================
   Author profile — /authors/{slug}
   -----------------------------------------------------------------------------
   Markup in livewire/public/author-profile.blade.php. A template for any author,
   so nothing here assumes a particular record: every block is written to look
   right whether the field behind it is long, short or absent, and the view drops
   the ones with nothing to show rather than leaving a gap.

   Reuses this sheet's tokens and the card language already established by the
   article page. The old `.ba-profile*` rules it replaces are removed.
   ============================================================================= */

.ba-ap,
.ba-ap-stats,
.ba-ap-about,
.ba-ap-work { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.ba-ap {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 8px 0 36px;
}

.ba-ap-av img {
    display: block;
    width: 220px; height: 220px;
    margin: 0;
    border: 1px solid var(--ba-line);
    border-radius: 26px;
    padding: 8px;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 22px 50px -30px rgba(16, 24, 40, .55);
    transition: transform .24s ease, box-shadow .24s ease;
}
.ba-ap-av img:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -30px rgba(16, 24, 40, .65); }

.ba-ap-tx { min-width: 0; }

.ba-ap-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--ba-red);
}
.ba-ap-eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ba-red);
}

/* The name is the strongest thing on the page; the red stays an accent. */
.ba-ap h1 {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    font-size: clamp(30px, 4.6vw, 46px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.035em;
    color: var(--ba-ink);
}
.ba-ap-tick { display: inline-flex; color: var(--ba-red); }

.ba-ap-role {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ba-red);
}
.ba-ap-tagline {
    margin: 0 0 12px;
    font-size: 17.5px;
    line-height: 1.55;
    font-style: italic;
    color: var(--ba-ink);
}
.ba-ap-bio {
    margin: 0;
    max-width: 62ch;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ba-muted);
}

.ba-ap-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ba-ap .ba-ap-social a {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--ba-line);
    border-radius: 50%;
    background: #fff;
    color: var(--ba-muted);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.ba-ap .ba-ap-social a:hover {
    transform: translateY(-2px);
    border-color: currentColor;
    box-shadow: 0 12px 22px -14px currentColor;
}
.ba-ap .ba-ap-social a:focus-visible { outline: 3px solid var(--ba-red); outline-offset: 3px; }
.ba-ap .ba-ap-social a.is-youtube   { color: #FF0000; }
.ba-ap .ba-ap-social a.is-x,
.ba-ap .ba-ap-social a.is-twitter,
.ba-ap .ba-ap-social a.is-tiktok,
.ba-ap .ba-ap-social a.is-github    { color: #0F1115; }
.ba-ap .ba-ap-social a.is-instagram { color: #E1306C; }
.ba-ap .ba-ap-social a.is-linkedin  { color: #0A66C2; }
.ba-ap .ba-ap-social a.is-discord   { color: #5865F2; }
.ba-ap .ba-ap-social a.is-facebook  { color: #1877F2; }
.ba-ap .ba-ap-social a.is-telegram  { color: #229ED9; }
.ba-ap .ba-ap-social a.is-twitch    { color: #9146FF; }
.ba-ap .ba-ap-social a.is-website   { color: var(--ba-red); }

/* ── Stats ───────────────────────────────────────────────────────────── */

/* auto-fit rather than a fixed four, because the view only emits the figures
   the record actually supports — three stats must fill the row, not leave a
   hole where "Years Experience" would have been. */
.ba-ap-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin-bottom: 44px;
    border: 1px solid var(--ba-line);
    border-radius: 18px;
    background: var(--ba-line);
    overflow: hidden;
}
.ba-ap-stat { padding: 22px 24px; background: #fff; }
.ba-ap-stat b {
    display: block;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.035em;
    color: var(--ba-ink);
}
/* A place name is not a figure, so it does not get the numeral treatment. */
.ba-ap-stat b.is-text { font-size: 19px; letter-spacing: -.02em; line-height: 1.3; }
.ba-ap-stat span {
    display: block;
    margin-top: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ba-ink);
}
.ba-ap-stat small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ba-faint); }

/* ── About ───────────────────────────────────────────────────────────── */

.ba-ap-about { margin-bottom: 46px; }
.ba-ap-about h2,
.ba-ap-work-head h2 {
    margin: 0;
    font-size: clamp(22px, 2.9vw, 28px);
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--ba-ink);
}
.ba-ap-about h2 { margin-bottom: 16px; }
.ba-ap-about-tx { max-width: 74ch; }
.ba-ap-about-tx p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.78; color: var(--ba-body); }
.ba-ap-about-tx p:last-child { margin-bottom: 0; }

.ba-ap-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.ba-ap-topics li {
    padding: 7px 14px;
    border: 1px solid var(--ba-line);
    border-radius: 999px;
    background: var(--ba-canvas);
    font-size: 13px;
    font-weight: 600;
    color: var(--ba-muted);
}

/* ── Articles ────────────────────────────────────────────────────────── */

.ba-ap-work { padding-bottom: 20px; }
.ba-ap-work-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.ba-ap .ba-ap-all,
.ba-ap-work .ba-ap-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--ba-red);
    text-decoration: none;
    white-space: nowrap;
}
.ba-ap-work .ba-ap-all svg { transition: transform .2s ease; }
.ba-ap-work .ba-ap-all:hover svg { transform: translateX(4px); }
.ba-ap-work .ba-ap-all:focus-visible { outline: 3px solid var(--ba-red); outline-offset: 4px; border-radius: 6px; }

/* Author-page work grid: three across at Full HD, more as the shell widens. */
.ba-ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; }

.ba-ap-card {
    border: 1px solid var(--ba-line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ba-ap-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 27, 35, .24);
    box-shadow: 0 24px 46px -30px rgba(16, 24, 40, .6);
}
.ba-ap-card > a { display: block; text-decoration: none; height: 100%; }
.ba-ap-card > a:focus-visible { outline: 3px solid var(--ba-red); outline-offset: -3px; border-radius: 18px; }

.ba-ap-card-img { display: block; overflow: hidden; background: var(--ba-canvas); }
.ba-ap-card-img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.ba-ap-card:hover .ba-ap-card-img img { transform: scale(1.04); }

.ba-ap-card-b { display: block; padding: 17px 18px 16px; }
.ba-ap-card-kind {
    display: inline-block;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ba-red);
}
.ba-ap-card-t {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.34;
    letter-spacing: -.02em;
    color: var(--ba-ink);
    /* Clamped so a long headline cannot push the cards out of alignment. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ba-ap-card:hover .ba-ap-card-t { color: var(--ba-red); }
.ba-ap-card-ex {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ba-muted);
}
.ba-ap-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 13px;
    border-top: 1px solid var(--ba-line);
    font-size: 12.5px;
    color: var(--ba-faint);
}
.ba-ap-card-go {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ba-red-tint, #FFF1F2);
    color: var(--ba-red);
    transition: background .22s ease, transform .22s ease;
}
.ba-ap-card:hover .ba-ap-card-go { background: var(--ba-red); color: #fff; transform: translateX(3px); }

.ba-ap-empty {
    margin: 0;
    padding: 42px 24px;
    border: 1px dashed var(--ba-line);
    border-radius: 18px;
    background: var(--ba-canvas);
    font-size: 15px;
    color: var(--ba-muted);
    text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .ba-ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .ba-ap { grid-template-columns: 168px minmax(0, 1fr); gap: 28px; }
    .ba-ap-av img { width: 168px; height: 168px; border-radius: 22px; }
}

@media (max-width: 640px) {
    /* One column, and the avatar leads rather than shrinking into a corner. */
    .ba-ap {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-bottom: 28px;
        text-align: center;
        justify-items: center;
    }
    .ba-ap-av img { width: 150px; height: 150px; }
    .ba-ap h1 { justify-content: center; }
    .ba-ap-social { justify-content: center; }
    .ba-ap-bio { text-align: left; }

    .ba-ap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 34px; }
    .ba-ap-stat { padding: 18px; }
    .ba-ap-stat b { font-size: 25px; }
    .ba-ap-stat b.is-text { font-size: 17px; }

    .ba-ap-about { margin-bottom: 34px; }
    .ba-ap-about-tx p { font-size: 16px; }

    .ba-ap-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .ba-ap-work-head { gap: 10px; }
}

@media (max-width: 380px) {
    /* Below this a two-up stat is narrower than its own label. */
    .ba-ap-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ba-ap-av img,
    .ba-ap .ba-ap-social a,
    .ba-ap-card,
    .ba-ap-card-img img,
    .ba-ap-card-go,
    .ba-ap-work .ba-ap-all svg { transition: none; }
    .ba-ap-av img:hover,
    .ba-ap .ba-ap-social a:hover,
    .ba-ap-card:hover { transform: none; }
    .ba-ap-card:hover .ba-ap-card-img img,
    .ba-ap-card:hover .ba-ap-card-go,
    .ba-ap-work .ba-ap-all:hover svg { transform: none; }
}

/* ── Dark ────────────────────────────────────────────────────────────── */

body.theme-dark .ba-ap h1, .theme-dark .ba-ap h1,
body.theme-dark .ba-ap-tagline, .theme-dark .ba-ap-tagline,
body.theme-dark .ba-ap-about h2, .theme-dark .ba-ap-about h2,
body.theme-dark .ba-ap-work-head h2, .theme-dark .ba-ap-work-head h2,
body.theme-dark .ba-ap-stat b, .theme-dark .ba-ap-stat b,
body.theme-dark .ba-ap-stat span, .theme-dark .ba-ap-stat span,
body.theme-dark .ba-ap-card-t, .theme-dark .ba-ap-card-t { color: #F5F5F7; }
body.theme-dark .ba-ap-stats, .theme-dark .ba-ap-stats { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); }
body.theme-dark .ba-ap-stat, .theme-dark .ba-ap-stat,
body.theme-dark .ba-ap-card, .theme-dark .ba-ap-card,
body.theme-dark .ba-ap-av img, .theme-dark .ba-ap-av img,
body.theme-dark .ba-ap .ba-ap-social a, .theme-dark .ba-ap .ba-ap-social a { background: #17171C; border-color: rgba(255,255,255,.08); }
body.theme-dark .ba-ap-about-tx p, .theme-dark .ba-ap-about-tx p { color: #C9C9D2; }
body.theme-dark .ba-ap-card-meta, .theme-dark .ba-ap-card-meta { border-top-color: rgba(255,255,255,.08); }
body.theme-dark .ba-ap-empty, .theme-dark .ba-ap-empty { background: #17171C; border-color: rgba(255,255,255,.12); }

/* =========================================================
   ARTICLE SECTION DIVIDERS
   ========================================================= */

.barlin-article-content .article-section-divider {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 72px 0 28px;
    padding-top: 22px;
}

.barlin-article-content .article-section-divider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e9e9e9;
}

.barlin-article-content .article-section-divider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 3px;
    background: #ed1c24;
    border-radius: 999px;
}

.barlin-article-content .article-section-divider .article-kicker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff1f2;
    color: #ed1c24;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.barlin-article-content .article-section-divider .article-kicker::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ed1c24;
    flex: 0 0 5px;
}

.barlin-article-content section:first-child .article-section-divider {
    margin-top: 48px;
}

.barlin-article-content h2 {
    margin-top: 0;
}

.barlin-article-content .article-section-divider + h2 {
    margin-bottom: 20px;
}

.barlin-article-content .article-lead {
    font-size: 18px;
    line-height: 1.75;
    color: #5f6b7a;
}

/* =========================================================
   BARLIN GAMES — ON THIS PAGE
   Collapsible article table of contents
   ========================================================= */

.barlin-article-content .barlin-on-this-page {
    width: 100%;
    margin: 0 0 58px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
}

/* Header button */

.barlin-article-content .barlin-on-this-page-toggle {
    width: 100%;
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 22px;

    border: 0;
    background: #fff;

    color: #111827;

    cursor: pointer;
    text-align: left;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.barlin-article-content .barlin-on-this-page-toggle:hover {
    background: #fff8f8;
}

/* Left side */

.barlin-article-content .barlin-on-this-page-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Menu icon */

.barlin-article-content .barlin-on-this-page-icon {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #fff0f1;
    color: #ed1c24;

    font-size: 15px;
    line-height: 1;
}

/* Main title */

.barlin-article-content .barlin-on-this-page-toggle strong {
    font-size: 15px;
    font-weight: 700;
}

/* Subtitle */

.barlin-article-content .barlin-on-this-page-subtitle {
    color: #7b8491;
    font-size: 14px;
    font-weight: 400;
}

/* Arrow */

.barlin-article-content .barlin-on-this-page-arrow {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #6b7280;

    font-size: 18px;

    transition: transform 0.25s ease;
}

/* Open state */

.barlin-article-content
.barlin-on-this-page-toggle[aria-expanded="true"]
.barlin-on-this-page-arrow {
    transform: rotate(180deg);
}

/* Dropdown content */

.barlin-article-content .barlin-on-this-page-list {
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

/* Individual links */

.barlin-article-content .barlin-on-this-page-list a {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;

    padding: 14px 22px;

    color: #20242b;
    text-decoration: none;

    box-sizing: border-box;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        padding-left 0.18s ease;
}

/* Number */

.barlin-article-content .barlin-on-this-page-list a > span {
    flex: 0 0 auto;

    min-width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #fff0f1;
    color: #ed1c24;

    font-size: 12px;
    font-weight: 700;
}

/* Link title */

.barlin-article-content .barlin-on-this-page-list a strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

/* Hover */

.barlin-article-content .barlin-on-this-page-list a:hover {
    background: #fff8f8;
    color: #ed1c24;
    padding-left: 27px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .barlin-article-content .barlin-on-this-page {
        margin-bottom: 42px;
        border-radius: 12px;
    }

    .barlin-article-content .barlin-on-this-page-toggle {
        min-height: 56px;
        padding: 0 16px;
    }

    .barlin-article-content .barlin-on-this-page-left {
        gap: 9px;
    }

    .barlin-article-content .barlin-on-this-page-subtitle {
        display: none;
    }

    .barlin-article-content .barlin-on-this-page-list a {
        padding: 13px 16px;
    }

    .barlin-article-content .barlin-on-this-page-list a:hover {
        padding-left: 20px;
    }
}

/* =========================================================
   UBISOFT ARTICLE — EDITORIAL SECTION VARIATION
   ========================================================= */

.barlin-article .ubisoft-editorial-section {
    position: relative;
    padding: 72px 0 82px;
}

.barlin-article .ubisoft-editorial-section + .ubisoft-editorial-section {
    border-top: 1px solid #eeeeee;
}

/* Wider and more deliberate section heading */
.barlin-article .ubisoft-editorial-head {
    position: relative;
    margin-bottom: 42px;
    padding-left: 24px;
}

.barlin-article .ubisoft-editorial-head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: calc(100% - 8px);
    background: #ed1c24;
    border-radius: 3px;
}

/* Keep your existing red number styling */
.barlin-article .ubisoft-editorial-head .barlin-number {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
}

/* Heading gets a little more editorial breathing room */
.barlin-article .ubisoft-editorial-head h2 {
    max-width: 820px;
    margin: 0;
    letter-spacing: -0.035em;
}

/* Optional introductory line under selected headings */
.barlin-article .ubisoft-editorial-lead {
    max-width: 760px;
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 1.7;
}

/* Main content becomes slightly narrower than heading */
.barlin-article .ubisoft-editorial-content {
    max-width: 760px;
    margin-left: 24px;
}

/* Paragraph spacing */
.barlin-article .ubisoft-editorial-content p {
    margin: 0 0 24px;
}

.barlin-article .ubisoft-editorial-content p:last-child {
    margin-bottom: 0;
}

/* Small editorial pullout */
.barlin-article .ubisoft-editorial-note {
    margin: 38px 0 8px;
    padding: 25px 28px;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    background: #fafafa;
}

.barlin-article .ubisoft-editorial-note strong {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
}

.barlin-article .ubisoft-editorial-note p {
    margin: 0;
}

/* Three-card historical facts */
.barlin-article .ubisoft-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 42px 0 0 24px;
}

.barlin-article .ubisoft-fact {
    padding: 22px;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    background: #fff;
}

.barlin-article .ubisoft-fact strong {
    display: block;
    margin-bottom: 8px;
    font-size: 25px;
    line-height: 1;
}

.barlin-article .ubisoft-fact span {
    display: block;
    font-size: 14px;
    line-height: 1.55;
}

/* Franchise cards */
.barlin-article .ubisoft-franchise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 38px 0 0 24px;
}

.barlin-article .ubisoft-franchise-card {
    padding: 24px;
    border: 1px solid #e9e9e9;
    border-radius: 15px;
    background: #fff;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.barlin-article .ubisoft-franchise-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.barlin-article .ubisoft-franchise-card h3 {
    margin: 0 0 9px;
}

.barlin-article .ubisoft-franchise-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Pull quote variation */
.barlin-article .ubisoft-pullquote {
    position: relative;
    margin: 42px 0 42px 24px;
    padding: 30px 34px;
    border-left: 3px solid #ed1c24;
    background: #fafafa;
    border-radius: 0 14px 14px 0;
}

.barlin-article .ubisoft-pullquote p {
    margin: 0;
    font-size: 21px;
    line-height: 1.55;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.barlin-article .ubisoft-pullquote small {
    display: block;
    margin-top: 14px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Final section */
.barlin-article .ubisoft-final-section {
    padding-bottom: 30px;
}

.barlin-article .ubisoft-final-box {
    margin: 10px 0 0 24px;
    padding: 34px;
    border: 1px solid #e9e9e9;
    border-radius: 18px;
    background: #fafafa;
}

.barlin-article .ubisoft-final-box h3 {
    margin: 0 0 14px;
}

.barlin-article .ubisoft-final-box p {
    margin: 0;
    max-width: 720px;
}

/* Mobile */
@media (max-width: 768px) {

    .barlin-article .ubisoft-editorial-section {
        padding: 52px 0 60px;
    }

    .barlin-article .ubisoft-editorial-head {
        padding-left: 18px;
        margin-bottom: 32px;
    }

    .barlin-article .ubisoft-editorial-content {
        margin-left: 18px;
        margin-right: 0;
    }

    .barlin-article .ubisoft-facts,
    .barlin-article .ubisoft-franchise-grid {
        grid-template-columns: 1fr;
        margin-left: 18px;
    }

    .barlin-article .ubisoft-pullquote,
    .barlin-article .ubisoft-final-box {
        margin-left: 18px;
    }

    .barlin-article .ubisoft-editorial-lead {
        font-size: 16px;
    }

    .barlin-article .ubisoft-pullquote p {
        font-size: 18px;
    }
}
/* =============================================================================
   ARTICLE — DARK MODE, BASE LAYER
   -----------------------------------------------------------------------------
   This sheet already carries 182 dark rules for the article's COMPONENTS — the
   FAQ blocks, tables, cards, timeline, pull quotes, section markers. What it
   never had was a dark base underneath them:

     * the eight --ba-* tokens were declared once, in light, and never
       redefined, so all 288 var(--ba-*) lookups stayed light whatever the
       theme said;
     * `.ba-body` set `background: #FFFFFF` as a literal with no dark override.

   The result was the worst of both: switching to dark repainted every card and
   table dark and left the page they sit on pure white. Measured live, `.ba-body`
   rendered 760x8854 in solid #FFFFFF with `theme-dark` applied.

   WHY BOTH SELECTOR FORMS. `layouts/article.blade.php` puts the theme class on
   <body>, which is the SAME element that carries `.ba-body` — so a descendant
   selector like `.theme-dark .ba-body` cannot match it, while `.ba-body` inside
   a themed wrapper needs exactly that form. Both are written for every rule
   here. game-ui.css hit this and documented it; article.css had not been
   through the same correction.

   Two tokens are also promoted from var() fallbacks to real declarations:
   `--ba-card` and `--ba-red-tint` were only ever read as `var(--ba-card, #fff)`,
   which meant the literal always won and no theme could reach them.

   The dark card colour is #17171C — the value the existing component rules in
   this file already use — so the base agrees with the 182 rules above it
   instead of introducing a second dark palette.
   ============================================================================= */

.ba,
.ba-body {
    --ba-card:     #FFFFFF;
    --ba-red-tint: #FFF1F2;
    --ba-page:     #FFFFFF;
}

.theme-dark .ba,   .ba.theme-dark,
.theme-dark .ba-body, .ba-body.theme-dark {
    --ba-ink:      #F3F5F8;
    --ba-body:     #C3C8D2;
    --ba-muted:    #8B93A2;
    --ba-faint:    #6B7280;
    --ba-line:     rgba(255, 255, 255, .10);
    --ba-canvas:   #17171C;
    --ba-card:     #17171C;
    --ba-red-tint: rgba(232, 25, 44, .12);
    --ba-page:     #0F0F13;
}

/* The page itself. The literal is replaced by the token so the two selector
   forms above are the only place the colour is decided. */
.ba-body { background: var(--ba-page, #FFFFFF); }

.theme-dark .ba-body,
.ba-body.theme-dark {
    background: var(--ba-page);
    color: var(--ba-body);
}

/* Surfaces that named a literal white instead of the card token. */
.theme-dark .ba-card,
.ba-body.theme-dark .ba-card,
.theme-dark .ba-pager .page-link,
.ba-body.theme-dark .ba-pager .page-link {
    background: var(--ba-card);
    border-color: var(--ba-line);
    color: var(--ba-body);
}

/* The header search field went white-on-white when focused. */
.theme-dark .ba-header-search input:focus,
.ba-body.theme-dark .ba-header-search input:focus {
    background: var(--ba-card);
    color: var(--ba-ink);
}

/* Editorial chips that were pale pastels. Same treatment as the admin's:
   a translucent tint of the chip's own hue so the dark ground shows through. */
.theme-dark .ba-type-featured,
.ba-body.theme-dark .ba-type-featured {
    background: rgba(245, 158, 11, .18);
    color: #FBBF24;
}

/* The divider rule and its kicker were drawn in near-white greys. */
.theme-dark .barlin-article-content .article-section-divider::before,
.ba-body.theme-dark .barlin-article-content .article-section-divider::before {
    background: var(--ba-line);
}
.theme-dark .barlin-article-content .article-section-divider .article-kicker,
.ba-body.theme-dark .barlin-article-content .article-section-divider .article-kicker {
    background: var(--ba-red-tint);
    color: var(--ba-red);
}

/* Browser-rendered UI — scrollbars, form controls, the caret — follows the
   theme only when it is told to. */
.theme-dark .ba-body, .ba-body.theme-dark { color-scheme: dark; }
.theme-light .ba-body, .ba-body.theme-light { color-scheme: light; }