/* =============================================================================
   Barlin Games — Homepage design system
   -----------------------------------------------------------------------------
   Scoped under .bh- so nothing here can leak into the admin shell or the rest
   of the public site. Built to match assets/img/homepage/homepage.png.

   Reference canvas: 1536 x 1024. The card column spans x 118 → 1420, i.e.
   1302px of content, which every proportion below is derived from.

   SCALE PASS (refinement, not redesign): every dimension is the reference
   measurement × ~1.09, the container widened 1342 → 1450, and section rhythm
   opened up. Layout, order, colours, radii and shadows are untouched — the
   page is the same design with more room to breathe.

   Section order (do not reorder):
     navbar · hero · stats · categories · featured/trending/games ·
     articles/newsletter/cta · footer
   ============================================================================= */

/* ── Ambient page lighting ───────────────────────────────────────────────────
   Pure-CSS soft red glow: five very large, very low-opacity radial gradients
   on one fixed layer behind the content. The page still reads white; the red
   only adds depth. No images, no SVG, no noise, no texture — a single
   composited layer, so it costs nothing on scroll. */
.bh-body {
    margin: 0;
    background: #FFFFFF;
}
.bh-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(58vw 46vh at 10% -8%, rgba(229,  27, 35, .055), transparent 60%),
        radial-gradient(50vw 44vh at 94%  2%, rgba(244,  63, 94, .045), transparent 58%),
        radial-gradient(46vw 40vh at 80% 44%, rgba(229,  27, 35, .032), transparent 60%),
        radial-gradient(52vw 42vh at  4% 70%, rgba(244,  63, 94, .034), transparent 60%),
        radial-gradient(44vw 38vh at 98% 92%, rgba(229,  27, 35, .038), transparent 60%);
}

.bh {
    /* ── Palette (sampled from the reference) ───────────────────────────── */
    --bh-red:          #E51B23;
    --bh-red-bright:   #F32E36;
    --bh-red-deep:     #C7070F;
    --bh-red-grad:     linear-gradient(135deg, #EF1B24 0%, #C8080F 100%);
    --bh-red-tint:     #FEEFEE;
    --bh-red-tint-2:   #FDE4E4;

    --bh-ink:          #0A0A0B;
    --bh-ink-2:        #1F1F23;
    --bh-muted:        #6B6B75;
    --bh-muted-2:      #8E8E98;

    --bh-page:         #FBFAFB;
    --bh-card:         #FFFFFF;
    --bh-line:         #EFEFF2;
    --bh-line-2:       #E6E6EB;

    --bh-shadow-sm:    0 1px 2px rgba(16, 16, 24, .04);
    --bh-shadow:       0 2px 10px rgba(16, 16, 24, .05), 0 1px 3px rgba(16, 16, 24, .03);
    --bh-shadow-md:    0 6px 22px rgba(16, 16, 24, .07), 0 2px 6px rgba(16, 16, 24, .04);
    --bh-shadow-red:   0 10px 24px -8px rgba(229, 27, 35, .45);

    /* ── Geometry ───────────────────────────────────────────────────────── */
    --bh-r-sm:  8px;
    --bh-r:     12px;
    --bh-r-lg:  16px;
    --bh-r-xl:  20px;
    --bh-gap:   14px;   /* gutter inside a row  */
    --bh-sec:   24px;   /* rhythm between rows  */
    /* The container ceiling now comes from the global responsive layer
       (assets/css/responsive.css). It returns exactly 1450px at 1920 and
       below — so the Full HD design is untouched — and grows with the
       viewport above that instead of stopping dead. The literal stays as
       the fallback for any context that loads this sheet alone. */
    --bh-max:   var(--bg-wrap-page, 1450px);
    --bh-pad:   24px;

    /* Transparent so the ambient layer reads through; cards stay solid white. */
    position: relative;
    z-index: 1;
    color: var(--bh-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bh *,
.bh *::before,
.bh *::after { box-sizing: border-box; }

.bh img { max-width: 100%; display: block; }

.bh a { text-decoration: none; color: inherit; }

/* This page renders on the bare `layouts.home` shell, so Bootstrap's utility
   sheet isn't present — define the one helper the markup relies on. */
.bh .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bh :focus-visible { outline: 2px solid var(--bh-red); outline-offset: 2px; border-radius: 4px; }

.bh-wrap {
    width: 100%;
    max-width: var(--bh-max);
    margin: 0 auto;
    padding: 0 var(--bh-pad);
}

/* Shared card shell — every white panel on the page uses this. */
.bh-card {
    background: var(--bh-card);
    border-radius: var(--bh-r-lg);
    box-shadow: var(--bh-shadow);
    padding: 20px;
}

/* Section eyebrow: red icon + bold uppercase label. */
.bh-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bh-ink);
}
.bh-eyebrow svg { width: 18px; height: 18px; color: var(--bh-red); flex: none; }

/* "View All →" link. */
.bh-viewall {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bh-red);
    white-space: nowrap;
    transition: gap .18s ease;
}
.bh-viewall svg { width: 15px; height: 15px; }
.bh-viewall:hover { gap: 11px; color: var(--bh-red-deep); }

.bh-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

/* Meta line: "3.5K Views • 4 Days Ago" */
.bh-meta {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 12.5px;
    color: var(--bh-muted);
}
.bh-meta span { display: inline-flex; align-items: center; gap: 6px; }
.bh-meta svg { width: 14px; height: 14px; color: var(--bh-red); flex: none; }
.bh-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--bh-red); flex: none; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.bh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    white-space: nowrap;
    border-radius: var(--bh-r);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.bh-btn:active { transform: translateY(0); }

.bh-btn-red {
    background: var(--bh-red-grad);
    color: #fff;
    box-shadow: var(--bh-shadow-red);
}
.bh-btn-red:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 30px -10px rgba(229, 27, 35, .55);
    color: #fff;
}

.bh-btn-white {
    background: #fff;
    color: var(--bh-ink);
    box-shadow: var(--bh-shadow-md);
}
.bh-btn-white:hover { transform: translateY(-2px); color: var(--bh-ink); }

/* =============================================================================
   NAVBAR — moved to assets/css/navigation.css
   -----------------------------------------------------------------------------
   The header is now a GLOBAL component, rendered on /games, /articles and
   /login as well as here. Its rules lived in this file, and its palette tokens
   were declared on `.bh` (the homepage wrapper), so the same markup rendered
   unstyled anywhere else. Both moved to navigation.css, which re-declares the
   tokens on `.bh-nav` itself and is loaded by every layout that shows the
   header — including this one. The homepage bar is visually unchanged.
   ============================================================================= */

/* =============================================================================
   SECTION EYEBROW  (shared)
   -----------------------------------------------------------------------------
   Used by categories, trending, popular games, featured video, discovery and
   articles. It lived inside the old hero block; the hero no longer uses it, but
   six other components do, so it stays — just somewhere honest.
   ============================================================================= */
.bh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--bh-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.bh-eyebrow i { display: block; width: 30px; height: 2px; background: currentColor; flex: none; }

/* =============================================================================
   HERO — SECTION 02
   -----------------------------------------------------------------------------
   A centred, discovery-first composition: eyebrow, headline, lede, the brand
   mark on its lit stage, one large search field, popular searches, two CTAs —
   with real cover art from the game directory floating either side.

   THE ONE RULE THIS FILE EXISTS TO ENFORCE
   ----------------------------------------
   Artwork never covers copy. Not "usually" — never, at any viewport width.
   That is structural, not a set of hand-tuned numbers: the content column has
   a fixed max-width (--h2-safe) and every floating card is positioned FROM ITS
   EDGE, e.g.

        right: calc(50% + var(--h2-safe) / 2 + var(--g));

   so a card's inner edge is always --g pixels outside the text column however
   wide the window is. Resizing the browser moves the cards and the keep-out
   boundary together; nothing can drift over the headline.

   Cards that no longer fit their side band are dropped by breakpoint rather
   than shrunk, and below 1024px the stage stops floating altogether and
   becomes a deliberate fanned row beneath the buttons — a recomposition, not
   a scaled-down desktop.

   Motion is transform/opacity only (no layout thrash, GPU-friendly) and the
   whole lot is behind prefers-reduced-motion.
   ============================================================================= */
.bh-h2 {
    /* Width of the protected centre column. Every keep-out calculation below
       is derived from this one number. */
    --h2-safe: 820px;

    /* Floating-card geometry, overridden per slot further down. */
    --h2-w:  200px;   /* card width           */
    --h2-g:  16px;    /* gap outside the safe column */
    --h2-t:  12%;     /* top offset           */
    --h2-rz: 0deg;    /* in-plane tilt        */
    --h2-ry: 0deg;    /* turn toward centre   */

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(26px, 3.6vw, 52px) 0 clamp(34px, 4vw, 62px);

    /* Manrope carries the hero's UI and body text; Sora carries the headline.
       Scoped to this section on purpose — the rest of the page is still Inter,
       and Section 02 is the only thing being redesigned here. */
    font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Atmosphere ────────────────────────────────────────────────────────────
   Everything here is drawn, not downloaded. A photographic backdrop is used
   only when an editor supplies one, and it still sits under the same veil so
   it can never take the contrast out from under the type. */
.bh-h2-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 78% at 50% 0%,   #FFFFFF 0%, rgba(255,255,255,0) 62%),
        radial-gradient(90% 62% at 50% 104%,  rgba(229,27,35,.10) 0%, rgba(229,27,35,0) 70%),
        linear-gradient(180deg, #FBFAFB 0%, #F6F5F8 46%, #FBFAFB 100%);
}

.bh-h2-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .5;
}

/* Fine grid, faded out at the edges so it reads as depth rather than as a
   table. Masked both axes — a hard cut-off would look like a bug. */
.bh-h2-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right,  rgba(16,16,24,.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16,16,24,.055) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(78% 66% at 50% 42%, #000 0%, transparent 100%);
            mask-image: radial-gradient(78% 66% at 50% 42%, #000 0%, transparent 100%);
    opacity: .8;
}

/* Two soft red light sources. Blurred radial gradients rather than images, so
   they cost nothing and scale to any viewport. */
.bh-h2-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .45;
    will-change: transform;
}
/* Capped in px as well as vw: on a very wide monitor an unbounded vw would
   turn one corner into a solid pink wash rather than a light source. */
.bh-h2-aurora-a {
    width: min(680px, 48vw); height: min(460px, 34vw);
    left: -6%; top: -20%;
    background: radial-gradient(circle, rgba(229,27,35,.26) 0%, rgba(229,27,35,0) 70%);
}
.bh-h2-aurora-b {
    width: min(660px, 46vw); height: min(520px, 38vw);
    right: -8%; bottom: -24%;
    background: radial-gradient(circle, rgba(255,74,80,.24) 0%, rgba(255,74,80,0) 70%);
}

/* Sparse particle field: three offset dot layers, no canvas, no library. */
.bh-h2-dust {
    position: absolute;
    inset: -10% 0;
    background-image:
        radial-gradient(rgba(229,27,35,.34) 1.5px, transparent 1.6px),
        radial-gradient(rgba(16,16,24,.16)  1.2px, transparent 1.3px),
        radial-gradient(rgba(229,27,35,.20) 1px,   transparent 1.1px);
    background-size: 220px 190px, 320px 260px, 170px 240px;
    background-position: 0 0, 90px 60px, 40px 130px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
            mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
    opacity: .5;
}

/* The contrast guarantee: a soft scrim over the centre so the copy always has
   a calm ground under it, whatever the layers above are doing. */
.bh-h2-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(58% 52% at 50% 46%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 76%);
}

/* ── Floating artwork layer ───────────────────────────────────────────────── */
.bh-h2-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    perspective: 1400px;
    /* Dead space between cards must never eat a click meant for the page. */
    pointer-events: none;
}

.bh-h2-card {
    position: absolute;
    top: var(--h2-t);
    width: var(--h2-w);
    pointer-events: auto;
}

.bh-h2-card-a {
    position: relative;   /* containing block for .bh-h2-card-name */
    display: block;
    transform: rotateY(var(--h2-ry)) rotateZ(var(--h2-rz));
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1),
                filter   .5s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

/* Before → after. At rest the card is turned slightly away and sits back in
   the scene; on hover (and on keyboard focus, which must never show less) it
   squares up to the reader and comes forward. */
.bh-h2-card-a:hover,
.bh-h2-card-a:focus-visible {
    transform: rotateY(0deg) rotateZ(0deg) translateY(-12px) scale(1.055);
}

.bh-h2-card-art {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    border-radius: 18px;
    background: var(--bh-line);
    box-shadow:
        0 2px 4px rgba(16,16,24,.06),
        0 18px 34px -14px rgba(16,16,24,.34),
        0 42px 70px -34px rgba(229,27,35,.30);
    transition: box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}

/* The bezel.
   -----------------------------------------------------------------------------
   Key art is whatever the studio shipped: Minecraft's cover is bright, and
   VALORANT's is nearly black. A card has to keep its SHAPE against the page in
   both cases, and on the dark theme a near-black cover with no edge simply
   disappears. So the frame is drawn by the card, not borrowed from the
   artwork: a full hairline rim plus a brighter highlight along the top edge,
   which is what makes the thing read as a lit object rather than a hole. */
.bh-h2-card-art::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0  1px 0    rgba(255,255,255,.42),
        inset 0  0   0 1px rgba(255,255,255,.24),
        inset 0 -1px 0    rgba(16,16,24,.20);
    pointer-events: none;
}
.bh-h2-card-a:hover .bh-h2-card-art,
.bh-h2-card-a:focus-visible .bh-h2-card-art {
    box-shadow:
        0 2px 4px rgba(16,16,24,.08),
        0 26px 46px -16px rgba(16,16,24,.40),
        0 54px 90px -34px rgba(229,27,35,.55);
}

.bh-h2-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.02);
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.bh-h2-card-a:hover .bh-h2-card-art img { transform: scale(1.09); }

/* Diagonal gloss that sweeps across the art on hover — the one flourish, and
   it is a single transform on a gradient, not an animation loop. */
.bh-h2-card-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.42) 50%, transparent 66%);
    transform: translateX(-115%);
    transition: transform .85s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}
.bh-h2-card-a:hover .bh-h2-card-sheen,
.bh-h2-card-a:focus-visible .bh-h2-card-sheen { transform: translateX(115%); }

/* The optional title treatment. Hidden at rest so the artwork is the card —
   assistive tech gets the title unconditionally from the link's aria-label, so
   nothing is being withheld from anyone here. */
.bh-h2-card-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 34px 14px 12px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,.86) 62%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    text-align: center;
    /* Long titles wrap to a second line rather than being clipped. */
    overflow-wrap: anywhere;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .38s ease, transform .38s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}
.bh-h2-card-a:hover .bh-h2-card-name,
.bh-h2-card-a:focus-visible .bh-h2-card-name { opacity: 1; transform: translateY(0); }

/* ── Slot table ───────────────────────────────────────────────────────────
   Position only. Which game lands in which slot is decided by the loop index
   in the Blade component, so adding a seventh position means adding a rule
   here — never another template.

   Slot order is chosen so a SMALL catalogue still looks composed: the first
   two slots are a balanced pair flanking the mark, which is what a site with
   exactly two published games will render. Later slots add asymmetry. */
.bh-h2-card[data-slot="0"] { --h2-w: 202px; --h2-g:  14px; --h2-t: 15%; --h2-rz: -7deg; --h2-ry:  10deg; }
.bh-h2-card[data-slot="1"] { --h2-w: 202px; --h2-g:  14px; --h2-t:  9%; --h2-rz:  6deg; --h2-ry: -10deg; }
.bh-h2-card[data-slot="2"] { --h2-w: 164px; --h2-g:  74px; --h2-t: 56%; --h2-rz: -5deg; --h2-ry:  -9deg; }
.bh-h2-card[data-slot="3"] { --h2-w: 164px; --h2-g:  66px; --h2-t: 60%; --h2-rz:  6deg; --h2-ry:   9deg; }
.bh-h2-card[data-slot="4"] { --h2-w: 130px; --h2-g: 196px; --h2-t: 26%; --h2-rz:  9deg; --h2-ry:  12deg; }
.bh-h2-card[data-slot="5"] { --h2-w: 130px; --h2-g: 204px; --h2-t: 31%; --h2-rz: -9deg; --h2-ry: -12deg; }

/* Left column: pinned to the LEFT edge of the protected centre column. */
.bh-h2-card[data-slot="0"],
.bh-h2-card[data-slot="3"],
.bh-h2-card[data-slot="4"] { right: calc(50% + (var(--h2-safe) / 2) + var(--h2-g)); }

/* Right column: pinned to its RIGHT edge. */
.bh-h2-card[data-slot="1"],
.bh-h2-card[data-slot="2"],
.bh-h2-card[data-slot="5"] { left:  calc(50% + (var(--h2-safe) / 2) + var(--h2-g)); }

/* Cards appear only where their side band can actually hold them. Dropping a
   card beats letting it slide under the headline or hang half off-screen. */
.bh-h2-card[data-slot="2"],
.bh-h2-card[data-slot="3"],
.bh-h2-card[data-slot="4"],
.bh-h2-card[data-slot="5"] { display: none; }

@media (min-width: 1400px) {
    .bh-h2-card[data-slot="2"],
    .bh-h2-card[data-slot="3"] { display: block; }
}
@media (min-width: 1680px) {
    .bh-h2-card[data-slot="4"],
    .bh-h2-card[data-slot="5"] { display: block; }
}

/* ── Content column ───────────────────────────────────────────────────────── */
/* Qualified with `.bh-h2` deliberately. This max-width is the whole keep-out
   contract — it is what makes the text column exactly --h2-safe wide, which
   every card position is measured against. `.bh-wrap` also sets a max-width
   (1450px) at the same specificity, so this would otherwise be winning on
   source order alone: move the hero block above the layout block and the
   column silently widens to 1450px and the cards start crossing the
   headline. One extra class removes that possibility. */
.bh-h2 .bh-h2-in {
    position: relative;
    z-index: 2;
    max-width: calc(var(--h2-safe) + (var(--bh-pad) * 2));
    text-align: center;
}

/* Eyebrow: a rule either side of the label, centred — the Section 02
   treatment, distinct from the shared left-ruled `.bh-eyebrow`. */
.bh-h2-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0;
    color: var(--bh-red);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.bh-h2-eyebrow::before,
.bh-h2-eyebrow::after {
    content: '';
    width: clamp(20px, 4vw, 40px);
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .75;
}

.bh-h2-h1 {
    margin: clamp(16px, 2vw, 24px) 0 0;
    font-family: 'Sora', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(38px, 6.4vw, 78px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: var(--bh-ink);
    text-wrap: balance;
}
.bh-h2-h1-line { color: inherit; }

/* "INSPIRE." in Barlin red. A gradient fill on top of a solid colour, so a
   browser without background-clip still gets red text rather than none. */
.bh-h2-h1-red {
    font-style: normal;
    color: var(--bh-red);
    background: linear-gradient(100deg, #FF3D45 0%, #E51B23 44%, #B90810 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bh-h2-lede {
    margin: clamp(14px, 1.8vw, 22px) auto 0;
    max-width: 60ch;
    font-size: clamp(15px, 1.1vw, 17.5px);
    line-height: 1.66;
    font-weight: 500;
    color: var(--bh-muted);
    text-wrap: pretty;
}

/* ── Brand mark on its stage ──────────────────────────────────────────────
   The official red 3D Barlin B, lit from below on a shallow disc with two
   energy rings. Nothing here redraws or restyles the mark itself — it is the
   shipped asset, placed. */
.bh-h2-mark {
    position: relative;
    width: fit-content;
    margin: clamp(10px, 1.4vw, 20px) auto 0;
    isolation: isolate;
}

/* The mark is the only thing in normal flow here, so it — and nothing else —
   sets the block's height. The stage elements are positioned against that
   height, which is what keeps them attached to the B's base instead of
   drifting to the bottom of whatever the largest glow happens to be. */
.bh-h2-mark-img {
    position: relative;
    z-index: 3;
    display: block;
    width: auto;
    height: clamp(118px, 13.6vw, 208px);
    object-fit: contain;
    filter: drop-shadow(0 16px 22px rgba(183, 8, 16, .34));
}

.bh-h2-mark-halo,
.bh-h2-mark-disc,
.bh-h2-mark-ring {
    position: absolute;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
}

/* Big soft glow, centred on the mark itself. */
.bh-h2-mark-halo {
    z-index: 0;
    top: 48%;
    transform: translate(-50%, -50%);
    width:  clamp(250px, 27vw, 420px);
    height: clamp(250px, 27vw, 420px);
    background: radial-gradient(circle, rgba(229,27,35,.22) 0%, rgba(229,27,35,.06) 44%, rgba(229,27,35,0) 68%);
    filter: blur(6px);
}

/* Ground light, pooled just under the mark's base. `top: 100%` is the B's
   baseline; translating up by half its own height centres the ellipse on
   that line, so the mark reads as standing in it. */
.bh-h2-mark-disc {
    z-index: 1;
    top: calc(100% + 5px);
    transform: translate(-50%, -50%);
    width:  clamp(215px, 23vw, 350px);
    height: clamp(48px, 5.2vw, 80px);
    background: radial-gradient(closest-side, rgba(229,27,35,.36) 0%, rgba(229,27,35,.11) 58%, rgba(229,27,35,0) 100%);
    filter: blur(3px);
}

.bh-h2-mark-ring {
    z-index: 2;
    top: 100%;
    transform: translate(-50%, -50%);
    width:  clamp(196px, 21vw, 318px);
    height: clamp(42px, 4.6vw, 68px);
    border: 1px solid rgba(229, 27, 35, .38);
    opacity: .85;
}
.bh-h2-mark-ring-2 {
    width:  clamp(258px, 28vw, 424px);
    height: clamp(54px, 6vw, 90px);
    border-color: rgba(229, 27, 35, .19);
}

/* Light/dark asset swap. The theme class is on <body> from a cookie at first
   paint, so this is a CSS swap, never a JS one — a JS swap would guarantee a
   flash of the wrong image.

   Every selector here is qualified with `.bh-h2` for a reason: the page-wide
   `.bh img { display: block }` scores (0,1,1), so a bare `.bh-h2-dark
   { display: none }` at (0,1,0) LOSES to it and both images render — stacking
   two marks and doubling the block's height. */
.bh-h2 .bh-h2-dark  { display: none; }
body.theme-dark .bh-h2 .bh-h2-light { display: none; }
body.theme-dark .bh-h2 .bh-h2-dark  { display: block; }

/* ── Search ───────────────────────────────────────────────────────────────
   The primary action of the whole page, so it gets the most weight after the
   headline: full pill, real elevation, and a red ring the moment it is
   focused. It overlaps the mark's stage slightly, which is what ties the two
   together instead of stacking them. */
.bh-h2-search {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 720px;
    /* Sits close enough under the mark to overlap the lower half of its stage
       rings — that overlap is what binds the two into one object instead of
       stacking a logo above a search box. */
    margin: clamp(18px, 2.2vw, 30px) auto 0;
    padding: 9px 9px 9px 22px;
    border: 1px solid var(--bh-line-2);
    border-radius: 999px;
    background: var(--bh-card);
    box-shadow:
        0 1px 2px rgba(16,16,24,.05),
        0 14px 30px -12px rgba(16,16,24,.20),
        0 30px 60px -30px rgba(229,27,35,.28);
    transition: transform .3s cubic-bezier(.22,1,.36,1),
                box-shadow .3s ease,
                border-color .3s ease;
}
.bh-h2-search:hover {
    transform: translateY(-2px);
    border-color: var(--bh-line-2);
    box-shadow:
        0 1px 2px rgba(16,16,24,.05),
        0 20px 40px -14px rgba(16,16,24,.24),
        0 40px 74px -34px rgba(229,27,35,.36);
}
/* Focus is the loudest state — a branded ring, not the browser default, and
   it fires for keyboard and pointer alike because it is the field that is
   focused, not the page. */
.bh-h2-search:focus-within {
    transform: translateY(-2px);
    border-color: rgba(229, 27, 35, .55);
    box-shadow:
        0 0 0 4px rgba(229, 27, 35, .14),
        0 20px 42px -14px rgba(16,16,24,.26),
        0 44px 80px -34px rgba(229,27,35,.44);
}

.bh-h2-search-ic {
    width: 21px; height: 21px;
    flex: none;
    color: var(--bh-muted-2);
    transition: color .3s ease;
}
.bh-h2-search:focus-within .bh-h2-search-ic { color: var(--bh-red); }

.bh-h2-search-in {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bh-ink);
    font-family: inherit;
    font-size: 16px;   /* 16px stops iOS zooming the page on focus */
    font-weight: 500;
    letter-spacing: -.005em;
}
.bh-h2-search-in::placeholder { color: var(--bh-muted-2); opacity: 1; }
/* The page-wide `:focus-visible` outline would draw a second red rectangle
   INSIDE the pill, on top of the ring the pill already grows on
   :focus-within. Suppressed here only — the focus indicator is not removed,
   it moved to the enclosing control, which is louder and higher contrast than
   the default ever was. */
.bh-h2-search-in:focus-visible { outline: none; }
/* The UA's own clear button is a second, unstyled control inside a carefully
   built pill; the form already has a submit and Escape already clears. */
.bh-h2-search-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Ctrl+K hint. Rendered hidden and revealed by hero.js only once it knows a
   physical keyboard is plausible — a phone is never shown a key it cannot
   press, and the binding it advertises is real. */
.bh-h2-kbd {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    margin-inline-end: 2px;
}
.bh-h2-kbd kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 25px;
    padding: 0 7px;
    border: 1px solid var(--bh-line-2);
    border-bottom-width: 2px;
    border-radius: 7px;
    background: var(--bh-page);
    color: var(--bh-muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}

.bh-h2-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: none;
    height: 50px;
    padding: 0 27px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: var(--bh-red-grad);
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.005em;
    white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(229,27,35,.65);
    transition: filter .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.bh-h2-search-btn svg { width: 17px; height: 17px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.bh-h2-search-btn:hover { filter: brightness(1.07); box-shadow: 0 14px 28px -8px rgba(229,27,35,.75); }
.bh-h2-search-btn:hover svg { transform: translateX(4px); }
.bh-h2-search-btn:active { transform: scale(.975); }

/* ── Popular searches ─────────────────────────────────────────────────────── */
.bh-h2-pop {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: clamp(18px, 2.2vw, 26px) auto 0;
    max-width: 760px;
}

.bh-h2-pop-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--bh-muted);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}
.bh-h2-pop-label svg { width: 16px; height: 16px; color: var(--bh-red); flex: none; }

.bh-h2-pop-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-h2-chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 15px;
    border: 1px solid var(--bh-line-2);
    border-radius: 999px;
    background: var(--bh-card);
    color: var(--bh-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--bh-shadow-sm);
    transition: color .22s ease, border-color .22s ease, background-color .22s ease,
                transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
.bh-h2-chip:hover,
.bh-h2-chip:focus-visible {
    color: var(--bh-red);
    border-color: rgba(229, 27, 35, .45);
    background: var(--bh-red-tint);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(229,27,35,.45);
}

/* ── CTAs ─────────────────────────────────────────────────────────────────
   Deliberately quieter than the search field: same red, but smaller, flatter
   and lower in the stack, so the hierarchy stays headline → search → buttons.
   Defined here rather than reusing `.bh-btn` because the hero's buttons are
   full pills against a lit background; the shared button is a 12px-radius
   control on flat cards. */
.bh-h2-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(22px, 2.6vw, 32px);
}

.bh-h2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 27px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.005em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.22,1,.36,1),
                box-shadow .25s ease, filter .25s ease,
                background-color .25s ease, border-color .25s ease, color .25s ease;
}
.bh-h2-btn svg { width: 17px; height: 17px; flex: none; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.bh-h2-btn:hover svg { transform: translateX(4px); }
.bh-h2-btn:active { transform: translateY(0) scale(.98); }

.bh-h2-btn-red {
    background: var(--bh-red-grad);
    color: #fff;
    box-shadow: 0 8px 20px -9px rgba(229,27,35,.60);
}
.bh-h2-btn-red:hover {
    color: #fff;
    filter: brightness(1.07);
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -10px rgba(229,27,35,.70);
}

.bh-h2-btn-ghost {
    background: var(--bh-card);
    border-color: var(--bh-line-2);
    color: var(--bh-ink);
    box-shadow: var(--bh-shadow-sm);
}
.bh-h2-btn-ghost:hover {
    color: var(--bh-red);
    border-color: rgba(229, 27, 35, .45);
    transform: translateY(-3px);
    box-shadow: 0 14px 26px -12px rgba(16,16,24,.30);
}

/* =============================================================================
   HERO — DARK THEME
   -----------------------------------------------------------------------------
   The same composition, lit differently: a deep charcoal ground with the red
   coming up from below, brighter type, and shadows that read as depth instead
   of as grey smudges. Not an inversion — the light sources stay where they
   are, they just have somewhere darker to fall.
   ============================================================================= */
body.theme-dark .bh-h2-bg {
    background:
        radial-gradient(120% 80% at 50% -6%,  #17171C 0%, rgba(23,23,28,0) 60%),
        radial-gradient(94% 66% at 50% 106%,  rgba(229,27,35,.20) 0%, rgba(229,27,35,0) 70%),
        linear-gradient(180deg, #0C0C0E 0%, #121216 48%, #0C0C0E 100%);
}
body.theme-dark .bh-h2-bg-img { opacity: .34; }
body.theme-dark .bh-h2-grid {
    background-image:
        linear-gradient(to right,  rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
}
body.theme-dark .bh-h2-aurora { opacity: .42; }
body.theme-dark .bh-h2-dust {
    background-image:
        radial-gradient(rgba(255,90,96,.42) 1.5px, transparent 1.6px),
        radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.3px),
        radial-gradient(rgba(255,90,96,.26) 1px,   transparent 1.1px);
    opacity: .55;
}
body.theme-dark .bh-h2-veil {
    background: radial-gradient(58% 52% at 50% 46%, rgba(12,12,14,.72) 0%, rgba(12,12,14,0) 76%);
}

body.theme-dark .bh-h2-h1-red {
    background: linear-gradient(100deg, #FF6169 0%, #FF3038 46%, #D8121B 100%);
    -webkit-background-clip: text;
            background-clip: text;
}

/* Dark art on a dark ground is the hard case. The rim brightens and a close
   red glow is added under the card, so a near-black cover still separates
   from the page instead of dissolving into it. */
body.theme-dark .bh-h2-card-art::after {
    box-shadow:
        inset 0  1px 0    rgba(255,255,255,.30),
        inset 0  0   0 1px rgba(255,255,255,.15),
        inset 0 -1px 0    rgba(0,0,0,.5);
}
body.theme-dark .bh-h2-card-art {
    box-shadow:
        0 2px 4px rgba(0,0,0,.5),
        0 10px 26px -8px rgba(229,27,35,.30),
        0 20px 38px -14px rgba(0,0,0,.72),
        0 46px 76px -34px rgba(229,27,35,.44);
}
body.theme-dark .bh-h2-card-a:hover .bh-h2-card-art,
body.theme-dark .bh-h2-card-a:focus-visible .bh-h2-card-art {
    box-shadow:
        0 2px 4px rgba(0,0,0,.55),
        0 28px 50px -16px rgba(0,0,0,.78),
        0 60px 96px -34px rgba(229,27,35,.62);
}
body.theme-dark .bh-h2-card-sheen {
    background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.22) 50%, transparent 66%);
}

body.theme-dark .bh-h2-mark-img { filter: drop-shadow(0 20px 34px rgba(229, 27, 35, .55)); }
body.theme-dark .bh-h2-mark-halo {
    background: radial-gradient(circle, rgba(229,27,35,.36) 0%, rgba(229,27,35,.10) 42%, rgba(229,27,35,0) 68%);
}
body.theme-dark .bh-h2-mark-disc {
    background: radial-gradient(closest-side, rgba(255,58,66,.44) 0%, rgba(229,27,35,.14) 58%, rgba(229,27,35,0) 100%);
}
body.theme-dark .bh-h2-mark-ring   { border-color: rgba(255, 74, 80, .52); }
body.theme-dark .bh-h2-mark-ring-2 { border-color: rgba(255, 74, 80, .26); }

body.theme-dark .bh-h2-search {
    background: #16161B;
    border-color: #2C2C34;
    box-shadow:
        0 1px 2px rgba(0,0,0,.5),
        0 18px 36px -14px rgba(0,0,0,.7),
        0 40px 72px -30px rgba(229,27,35,.34);
}
body.theme-dark .bh-h2-search:hover  { background: #1A1A20; }
body.theme-dark .bh-h2-search:focus-within {
    background: #1A1A20;
    border-color: rgba(255, 74, 80, .60);
    box-shadow:
        0 0 0 4px rgba(229, 27, 35, .20),
        0 22px 44px -14px rgba(0,0,0,.72),
        0 50px 88px -32px rgba(229,27,35,.50);
}
body.theme-dark .bh-h2-kbd kbd { background: #101014; border-color: #33333C; color: #9C9CA8; }

body.theme-dark .bh-h2-chip {
    background: #16161B;
    border-color: #2C2C34;
    color: var(--bh-ink-2);
}
body.theme-dark .bh-h2-chip:hover,
body.theme-dark .bh-h2-chip:focus-visible {
    color: #FF7176;
    border-color: rgba(255, 74, 80, .55);
    background: rgba(229, 27, 35, .16);
}

body.theme-dark .bh-h2-btn-ghost { background: #16161B; border-color: #2C2C34; }
body.theme-dark .bh-h2-btn-ghost:hover {
    color: #FF7176;
    border-color: rgba(255, 74, 80, .55);
    box-shadow: 0 14px 26px -12px rgba(0,0,0,.65);
}

/* =============================================================================
   HERO — MOTION
   -----------------------------------------------------------------------------
   Two loops and one entrance, all transform/opacity. Nothing spins, nothing
   bounces, nothing runs faster than a slow breath. Everything is inside a
   no-preference query, so a visitor who has asked their OS for less motion
   gets the composition with none of it — not a degraded version of it.
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {

    /* Slow vertical drift. Applied to the <li>, while hover transforms live on
       the <a> inside it, so the two never fight over one transform. */
    @keyframes bh-h2-drift {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50%      { transform: translate3d(0, var(--h2-dy, -14px), 0); }
    }
    /* Two animations on one element, and they must NOT share their timing.
       -------------------------------------------------------------------
       Written as longhands on purpose. The `animation` shorthand takes one
       set of values and applies it to every name in the list, so declaring
       `animation: bh-h2-drift 11s infinite` and then adding bh-h2-fade to
       `animation-name` hands the fade `infinite` too — the cards then cycle
       from transparent to opaque forever instead of appearing once. Each
       longhand below carries one value per animation, in order. */
    .bh-h2-card {
        animation-name:            bh-h2-drift,          bh-h2-fade;
        animation-duration:        var(--h2-dur, 11s),   .8s;
        animation-timing-function: ease-in-out,          cubic-bezier(.22, 1, .36, 1);
        animation-iteration-count: infinite,             1;
        animation-delay:           var(--h2-delay, 0s),  var(--h2-fade-delay, 0s);
        animation-fill-mode:       none,                 both;
    }
    /* Prime numbers-ish durations so the cards never fall into lockstep. */
    .bh-h2-card[data-slot="0"] { --h2-dy: -16px; --h2-dur: 11s;   --h2-delay: -1s;   --h2-fade-delay: .20s; }
    .bh-h2-card[data-slot="1"] { --h2-dy:  14px; --h2-dur: 12.5s; --h2-delay: -4s;   --h2-fade-delay: .26s; }
    .bh-h2-card[data-slot="2"] { --h2-dy: -12px; --h2-dur: 10s;   --h2-delay: -2.5s; --h2-fade-delay: .32s; }
    .bh-h2-card[data-slot="3"] { --h2-dy:  13px; --h2-dur: 13.5s; --h2-delay: -6s;   --h2-fade-delay: .38s; }
    .bh-h2-card[data-slot="4"] { --h2-dy: -10px; --h2-dur:  9.5s; --h2-delay: -3s;   --h2-fade-delay: .44s; }
    .bh-h2-card[data-slot="5"] { --h2-dy:  11px; --h2-dur: 14s;   --h2-delay: -7s;   --h2-fade-delay: .50s; }

    /* The stage rings breathe with the light rather than rotating. The
       centring translate has to be repeated in every keyframe — a bare
       scale() would replace it and snap the rings off-centre. */
    @keyframes bh-h2-pulse {
        0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: .85; }
        50%      { transform: translate(-50%, -50%) scale(1.045); opacity: .40; }
    }
    .bh-h2-mark-ring   { animation: bh-h2-pulse 6s ease-in-out infinite; }
    .bh-h2-mark-ring-2 { animation: bh-h2-pulse 6s ease-in-out infinite 1.4s; }

    /* Entrance. Staggered so the eye is led down the column in the order the
       content should be read, then it is over — no looping attention-grabs. */
    @keyframes bh-h2-rise {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: none; }
    }
    .bh-h2-eyebrow,
    .bh-h2-h1,
    .bh-h2-lede,
    .bh-h2-mark,
    .bh-h2-search,
    .bh-h2-pop,
    .bh-h2-cta { animation: bh-h2-rise .7s cubic-bezier(.22, 1, .36, 1) both; }

    .bh-h2-h1     { animation-delay: .06s; }
    .bh-h2-lede   { animation-delay: .12s; }
    .bh-h2-mark   { animation-delay: .16s; }
    .bh-h2-search { animation-delay: .22s; }
    .bh-h2-pop    { animation-delay: .28s; }
    .bh-h2-cta    { animation-delay: .32s; }

    /* Cards arrive after the copy has settled, staggered outward from the
       middle so the composition assembles rather than snapping in. */
    @keyframes bh-h2-fade { from { opacity: 0; } to { opacity: 1; } }

    /* Pointer parallax. hero.js writes --h2-px/--h2-py (roughly -1 → 1) and
       the layers move by different amounts, so the scene has depth without a
       scroll listener or a physics loop. */
    .bh-h2-stage  { transform: translate3d(calc(var(--h2-px, 0) * 9px),  calc(var(--h2-py, 0) * 7px),  0); }
    .bh-h2-aurora { transform: translate3d(calc(var(--h2-px, 0) * -18px), calc(var(--h2-py, 0) * -12px), 0); }
    .bh-h2-dust   { transform: translate3d(calc(var(--h2-px, 0) * 14px),  calc(var(--h2-py, 0) * 10px),  0); }
    .bh-h2-stage,
    .bh-h2-aurora,
    .bh-h2-dust   { transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
}

/* =============================================================================
   HERO — RESPONSIVE
   -----------------------------------------------------------------------------
   Below 1280px the artwork stops floating. Rather than shrinking a desktop
   composition until it is unreadable, the stage leaves the absolute layer,
   moves BELOW the buttons and becomes a fanned row of overlapping covers —
   still real game art, still linked, but now it cannot be near the copy at
   all. The keep-out problem is solved by removing the overlap, not by
   negotiating with it.
   ============================================================================= */
/* Between 1280 and 1440 the side bands are tighter, so the protected column
   gives up a little width rather than the cards being allowed to slide into
   it. Below 1280 there is no honest way to fit a 200px card beside a readable
   text column, so the layout stops trying and switches to the fan. */
@media (max-width: 1439px) {
    .bh-h2 { --h2-safe: 780px; }
}

@media (max-width: 1279px) {
    .bh-h2 {
        display: flex;
        flex-direction: column;
        --h2-safe: 100%;
    }
    .bh-h2-in    { order: 1; max-width: 780px; }
    .bh-h2-stage { order: 2; }

    .bh-h2-stage {
        position: static;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: clamp(22px, 3vw, 36px) auto 0;
        padding: 0 var(--bh-pad);
        perspective: 1000px;
    }

    /* The fan. Every slot leaves the absolute layer and takes a flow position;
       the overlap and the tilt come from margins and per-child rotation, so
       the row reads as a spread hand of covers rather than a grid. */
    .bh-h2-card {
        position: static;
        display: block;
        width: 150px;
        flex: none;
    }
    /* Symmetric, so the overlap is identical between every pair whatever
       `order` does with them. An adjacent-sibling rule keys off DOM order
       and would leave one seam open once the row is re-sequenced. */
    .bh-h2-card { margin-inline: -13px; }

    /* `order` matters more than DOM order here.
       -----------------------------------------------------------------------
       The cards arrive in selection order (0,1,2,3) but need to be LAID OUT
       symmetrically about the centre — 2 · 0 · 1 · 3 — so the fan opens from
       the middle outward. Two published games therefore make a mirrored pair
       rather than one straight card with another leaning on it, which is what
       the catalogue looks like today and has to look deliberate. */
    .bh-h2-card[data-slot="2"] { order: 1; }
    .bh-h2-card[data-slot="0"] { order: 2; }
    .bh-h2-card[data-slot="1"] { order: 3; }
    .bh-h2-card[data-slot="3"] { order: 4; }

    /* Tilt grows and the card sits lower the further it is from the middle,
       so the row has a shallow arc instead of a straight top edge. */
    .bh-h2-card[data-slot="0"] { --h2-rz:  -8deg; --h2-ry:   7deg; margin-top:  6px; z-index: 5; }
    .bh-h2-card[data-slot="1"] { --h2-rz:   8deg; --h2-ry:  -7deg; margin-top:  6px; z-index: 4; }
    .bh-h2-card[data-slot="2"] { --h2-rz: -16deg; --h2-ry:  13deg; margin-top: 26px; z-index: 2; }
    .bh-h2-card[data-slot="3"] { --h2-rz:  16deg; --h2-ry: -13deg; margin-top: 26px; z-index: 1; }

    /* Four is what a tablet row holds without the outer cards being reduced to
       slivers. Five and six are dropped, not compressed. */
    .bh-h2-card[data-slot="4"],
    .bh-h2-card[data-slot="5"] { display: none; }

    /* Hover lift only — no drift, because a static row that bobs looks broken
       rather than alive. */
    .bh-h2-card-a:hover,
    .bh-h2-card-a:focus-visible { transform: rotateY(0deg) rotateZ(0deg) translateY(-8px) scale(1.05); }
}

@media (max-width: 767px) {
    .bh-h2 { padding-top: 26px; }
    .bh-h2-eyebrow { font-size: 11px; letter-spacing: .16em; }
    .bh-h2-h1 { font-size: clamp(32px, 9.4vw, 46px); }
    .bh-h2-lede { font-size: 15px; max-width: 46ch; }

    .bh-h2-search {
        gap: 8px;
        padding: 7px 7px 7px 16px;
        max-width: none;
    }
    .bh-h2-search-in { height: 42px; }
    /* The keyboard hint is meaningless without a keyboard. */
    .bh-h2-kbd { display: none !important; }
    /* The label reads as the button; the arrow alone would be a mystery. */
    .bh-h2-search-btn { height: 44px; padding: 0 18px; font-size: 14.5px; gap: 7px; }
    .bh-h2-search-btn svg { width: 15px; height: 15px; }

    .bh-h2-pop { gap: 9px 10px; }
    .bh-h2-pop-label { font-size: 12.5px; }
    .bh-h2-chip { height: 32px; padding: 0 13px; font-size: 12.5px; }

    /* Full-width stacked buttons: a 50/50 split makes both labels wrap on a
       narrow phone, and a wrapped button label is how a hero starts looking
       cheap. */
    .bh-h2-cta { gap: 10px; }
    .bh-h2-btn { width: 100%; height: 50px; }

    .bh-h2-card { width: 118px; margin-inline: -10px; }
    .bh-h2-card[data-slot="3"] { display: none; }
    .bh-h2-card-art { border-radius: 14px; }
    .bh-h2-card-name { border-radius: 0 0 14px 14px; font-size: 11.5px; padding: 26px 8px 9px; }
}

@media (max-width: 400px) {
    .bh-h2-search-btn span { display: none; }
    .bh-h2-search-btn { padding: 0; width: 44px; }
    .bh-h2-card { width: 100px; margin-inline: -9px; }
}

/* A pointer that cannot hover has no use for a hover-only title, so show it. */
@media (hover: none) {
    .bh-h2-card-name { opacity: 1; transform: none; }
}

/* =============================================================================
   HERO — REDUCED MOTION
   -----------------------------------------------------------------------------
   The loops and the entrance are already gated behind `no-preference`, so this
   only has the interaction states left to deal with.

   They are damped rather than deleted. Every hover here still changes colour,
   border and shadow, and focus still draws its ring — what stops is the
   TRAVEL: nothing lifts, scales, turns or sweeps. A visitor who asked for less
   motion gets a hero that is just as legible and just as responsive to the
   pointer, and simply holds still.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .bh-h2-card-a,
    .bh-h2-card-a:hover,
    .bh-h2-card-a:focus-visible { transform: none; }

    .bh-h2-card-art img,
    .bh-h2-card-a:hover .bh-h2-card-art img { transform: none; }

    /* A gloss that cannot sweep is just a white stripe across the artwork. */
    .bh-h2-card-sheen { display: none; }

    .bh-h2-card-name,
    .bh-h2-card-a:hover .bh-h2-card-name,
    .bh-h2-card-a:focus-visible .bh-h2-card-name { transform: none; }

    .bh-h2-search:hover,
    .bh-h2-search:focus-within,
    .bh-h2-search-btn:hover,
    .bh-h2-search-btn:active,
    .bh-h2-chip:hover,
    .bh-h2-chip:focus-visible,
    .bh-h2-btn:hover,
    .bh-h2-btn:active,
    .bh-h2-btn-red:hover,
    .bh-h2-btn-ghost:hover { transform: none; }

    .bh-h2-btn:hover svg,
    .bh-h2-search-btn:hover svg { transform: none; }
}

/* =============================================================================
   STATS
   ============================================================================= */
.bh-stats { margin-top: 30px; max-width: 620px; }
.bh-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
/* The counts are the first real content on the page, so they now carry the
   weight of a headline figure rather than sitting at body size. Tabular
   numerals keep the four tiles optically aligned whatever the digits are. */
.bh-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 20px;
    position: relative;
    border-radius: var(--bh-r);
    transition: background .18s ease;
}
.bh-stat:hover { background: var(--bh-red-tint); }
.bh-stat + .bh-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 1px;
    background: var(--bh-line);
}
/* The divider would sit on top of the neighbouring tile's hover wash. */
.bh-stat:hover + .bh-stat::before,
.bh-stat:hover::before { opacity: 0; }

.bh-stat-ic {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--bh-red-grad);
    color: #fff;
    flex: none;
    box-shadow: var(--bh-shadow-red);
    transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.bh-stat:hover .bh-stat-ic { transform: translateY(-2px) rotate(-4deg); }
.bh-stat-ic svg { width: 22px; height: 22px; }

.bh-stat-tx { min-width: 0; }
.bh-stat-tx b {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: var(--bh-ink);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}
.bh-stat-tx i {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bh-muted);
}

@media (prefers-reduced-motion: reduce) {
    .bh-stat, .bh-stat-ic,
    .bh-disc-tile, .bh-disc-tile::before, .bh-disc-tile::after,
    .bh-topic, .bh-topic::before { transition: none; }
    .bh-stat:hover .bh-stat-ic,
    .bh-disc-tile:hover, .bh-topic:hover { transform: none; }
    .bh-topic:hover::before { transform: none; }
}

/* =============================================================================
   CATEGORIES
   ============================================================================= */
.bh-cats { margin-top: 30px; }
.bh-cats-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 14px;
}
.bh-cat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    position: relative;
    transition: transform .16s ease;
}
.bh-cat + .bh-cat::before,
.bh-cats-row .bh-viewall::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 1px;
    background: var(--bh-line);
}
.bh-cat:hover { transform: translateY(-2px); }
.bh-cat-ic {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bh-red-tint);
    color: var(--bh-red);
    flex: none;
    transition: background .16s ease;
}
.bh-cat:hover .bh-cat-ic { background: var(--bh-red-tint-2); }
.bh-cat-ic svg { width: 23px; height: 23px; }
.bh-cat-tx { min-width: 0; }
.bh-cat-tx b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bh-ink);
    line-height: 1.3;
}
.bh-cat-tx i {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--bh-muted);
}
.bh-cats-row .bh-viewall { position: relative; padding-left: 20px; flex: none; }

/* =============================================================================
   MIDDLE ROW — featured video · trending · popular games
   ============================================================================= */
/* Column ratio measured off the reference: 427 / 327 / 528 within 1302px. */
.bh-row-mid {
    display: grid;
    grid-template-columns: 427fr 327fr 528fr;
    gap: var(--bh-gap);
    margin-top: var(--bh-sec);
    /* The three cards are equal height in the reference (y 512 → 742). */
    align-items: stretch;
}
.bh-row-mid > * { min-width: 0; }

/* Featured card is a column so the carousel dots settle at the bottom edge
   when the card is stretched to match its taller neighbours. */
.bh-feat { display: flex; flex-direction: column; }
.bh-feat .bh-dots { margin-top: auto; padding-top: 16px; }

/* ── Featured video ─────────────────────────────────────────────────────── */
.bh-feat-thumb {
    position: relative;
    display: block;
    border-radius: var(--bh-r);
    overflow: hidden;
    /* Wide letterbox, measured off the reference (396 x 137). */
    aspect-ratio: 396 / 137;
    background: #1a1a1f;
}
.bh-feat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bh-feat-thumb:hover img { transform: scale(1.04); }
.bh-feat-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #fff;
    color: var(--bh-red);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    transition: transform .2s ease;
}
.bh-feat-thumb:hover .bh-feat-play { transform: translate(-50%, -50%) scale(1.08); }
.bh-feat-play svg { width: 22px; height: 22px; margin-left: 2px; }
.bh-feat-time {
    position: absolute;
    right: 12px; bottom: 12px;
    background: rgba(10, 10, 12, .86);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}
.bh-feat-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
}
.bh-feat-body h3 {
    margin: 0 0 10px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--bh-ink);
    line-height: 1.35;
}
.bh-round-btn {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--bh-line-2);
    color: var(--bh-muted);
    cursor: pointer;
    flex: none;
    transition: all .16s ease;
}
.bh-round-btn:hover { border-color: var(--bh-red); color: var(--bh-red); transform: translateY(-1px); }
.bh-round-btn svg { width: 18px; height: 18px; }

.bh-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; }
.bh-dots i {
    display: block;
    height: 3.5px;
    width: 14px;
    border-radius: 2px;
    background: var(--bh-line-2);
    transition: background .16s ease;
}
.bh-dots i.is-on { width: 26px; background: var(--bh-red); }

/* ── Trending ───────────────────────────────────────────────────────────── */
.bh-trend-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
}
.bh-trend-item + .bh-trend-item { border-top: 1px solid var(--bh-line); }
.bh-trend-thumb {
    width: 104px;
    aspect-ratio: 2 / 1;
    border-radius: var(--bh-r-sm);
    overflow: hidden;
    flex: none;
    background: #1a1a1f;
}
.bh-trend-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.bh-trend-item:hover .bh-trend-thumb img { transform: scale(1.07); }
.bh-trend-tx { flex: 1; min-width: 0; }
.bh-trend-tx h4 {
    margin: 0 0 8px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.38;
    color: var(--bh-ink);
}
.bh-trend-play {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--bh-red-tint);
    color: var(--bh-red);
    flex: none;
    transition: background .16s ease, transform .16s ease;
}
.bh-trend-item:hover .bh-trend-play { background: var(--bh-red); color: #fff; transform: scale(1.06); }
.bh-trend-play svg { width: 17px; height: 17px; }

/* ── Popular games ──────────────────────────────────────────────────────── */
.bh-games { position: relative; }
.bh-games-rail {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.bh-games-rail::-webkit-scrollbar { display: none; }
/* Exactly five posters fit the rail, as in the reference; anything beyond
   scrolls. 4 gaps × 18px = 72px of gutter to subtract. */
.bh-game {
    flex: 0 0 calc((100% - 72px) / 5);
    scroll-snap-align: start;
    transition: transform .18s ease;
}
.bh-game:hover { transform: translateY(-3px); }
.bh-game-poster {
    aspect-ratio: 85 / 138;
    border-radius: var(--bh-r);
    overflow: hidden;
    background: #1a1a1f;
    box-shadow: var(--bh-shadow-sm);
}
.bh-game-poster img { width: 100%; height: 100%; object-fit: cover; }
.bh-game b {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bh-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bh-game .bh-meta { margin-top: 6px; font-size: 12px; }

.bh-rail-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--bh-line);
    box-shadow: var(--bh-shadow-md);
    color: var(--bh-red);
    cursor: pointer;
    z-index: 3;
    transition: transform .16s ease;
}
.bh-rail-btn:hover { transform: translateY(-50%) scale(1.1); }
.bh-rail-btn svg { width: 17px; height: 17px; }
/* Straddle the card edges, vertically centred on the card (reference y≈627,
   which is exactly the card's midpoint). */
.bh-rail-prev { left: -17px; }
.bh-rail-next { right: -17px; }

/* =============================================================================
   BOTTOM ROW — articles · newsletter · cta
   ============================================================================= */
/* Column ratio measured off the reference: 660 / 282 / 338 within 1302px. */
.bh-row-bot {
    display: grid;
    /* Two cards: the newsletter used to be the middle column and is now a
       full-width band of its own below this row. */
    /* The articles card is the only thing left in this row: the newsletter
       and the catalogue CTA are both full-width bands below it now. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bh-gap);
    margin-top: var(--bh-sec);
    align-items: stretch;
}
.bh-row-bot > * { min-width: 0; }

/* ── Articles ───────────────────────────────────────────────────────────── */
/* Article cards answer to the space they are given rather than to a column
   count. auto-fill with a 320px floor returns exactly three across at the
   container's Full HD width, so this is the same grid it has always been
   at 1920 — and a fourth and fifth column appear as the container grows
   on a 2K or 4K display, instead of three cards stretching to fill it. */
.bh-arts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 18px;
}
.bh-art { min-width: 0; }
.bh-art-img {
    position: relative;
    display: block;
    aspect-ratio: 212 / 59;
    border-radius: var(--bh-r-sm);
    overflow: hidden;
    background: #1a1a1f;
}
.bh-art-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.bh-art:hover .bh-art-img img { transform: scale(1.05); }
.bh-tag {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--bh-red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 6px;
}
.bh-art h4 {
    margin: 14px 0 8px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.38;
    color: var(--bh-ink);
}
.bh-art:hover h4 { color: var(--bh-red); }

/* ── Newsletter ─────────────────────────────────────────────────────────── */
/* Newsletter — see the full-width band at the foot of this sheet. */

/* ── CTA banner ─────────────────────────────────────────────────────────── */
/* Full-width band, matching the newsletter below it. It used to be the
   right-hand cell of the article row — a 28px headline in about a fifth of the
   page. Full width, not full height: the band is a break in the page, not a
   screen of its own. */
.bh-cta {
    position: relative;
    overflow: hidden;
    margin-top: var(--bh-sec);
    padding: clamp(40px, 5vw, 66px) 0;
    background: linear-gradient(110deg, #FEF3F3 0%, #FEE9E9 55%, #FDDDDD 100%);
    border-top: 1px solid var(--bh-line);
    border-bottom: 1px solid var(--bh-line);
}
.bh-cta-in {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 40px;
    align-items: center;
}
.bh-cta-tx { position: relative; z-index: 2; min-width: 0; }
.bh-cta h3 {
    margin: 0;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 900;
    letter-spacing: -.035em;
    color: var(--bh-red);
    line-height: 1.05;
}
.bh-cta p {
    margin: 14px 0 0;
    font-size: clamp(15px, 1.3vw, 18px);
    color: var(--bh-ink-2);
    font-weight: 500;
}
.bh-cta .bh-btn { margin-top: 26px; height: 52px; padding: 0 28px; font-size: 15px; }
.bh-cta .bh-btn svg { width: 17px; height: 17px; transition: transform .18s ease; }
.bh-cta .bh-btn:hover svg { transform: translateX(4px); }

/* In flow now rather than absolutely placed, so the artwork sits in its own
   column instead of overlapping the copy once the band spans the page. */
.bh-cta-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}
/* The artwork ships with its own pale-pink backdrop. Absolutely positioned it
   bled off the edge and nobody saw the box; in flow it read as a rectangle
   pasted on the band, so it is multiplied into the gradient instead. */
.bh-cta-art img {
    width: 100%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
    /* Multiply alone still left a faint darker rectangle where the artwork's
       backdrop sat over the band. The mask fades its edges out so there is no
       boundary to see at all. */
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 58%, transparent 100%);
            mask-image: radial-gradient(72% 72% at 50% 50%, #000 58%, transparent 100%);
}

@media (max-width: 860px) {
    .bh-cta-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    /* Artwork leads on narrow screens rather than being squeezed beside the
       headline; capped so it cannot dominate the band. */
    .bh-cta-art { justify-content: center; order: -1; }
    .bh-cta-art img { max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
    .bh-cta .bh-btn svg { transition: none; }
    .bh-cta .bh-btn:hover svg { transform: none; }
}

body.theme-dark .bh-cta {
    background: linear-gradient(110deg, #17171C 0%, #1B1218 55%, #1F1216 100%);
    border-color: rgba(255, 255, 255, .07);
}
body.theme-dark .bh-cta p { color: #C9C9D2; }

/* =============================================================================
   FOOTER
   ============================================================================= */
/* Translucent so the ambient red still reads through the footer band. */
.bh-foot { margin-top: 40px; border-top: 1px solid var(--bh-line); background: rgba(255, 255, 255, .55); }
.bh-foot-in {
    display: grid;
    grid-template-columns: 220px 210px 145px 165px 175px minmax(0, 1fr);
    gap: 32px;
    padding: 34px 0 28px;
}
.bh-foot-brand .bh-brand { margin-bottom: 0; }
.bh-foot p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--bh-muted); }
.bh-foot h5 {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bh-ink);
}
.bh-foot ul { list-style: none; margin: 0; padding: 0; }
.bh-foot li + li { margin-top: 9px; }
.bh-foot li a { font-size: 13.5px; color: var(--bh-muted); transition: color .16s ease; }
.bh-foot li a:hover { color: var(--bh-red); }

.bh-socials { display: flex; gap: 16px; margin-top: 18px; }
.bh-socials a { color: var(--bh-ink-2); transition: color .16s ease, transform .16s ease; }
.bh-socials a:hover { color: var(--bh-red); transform: translateY(-2px); }
.bh-socials svg { width: 19px; height: 19px; }

.bh-avatars { display: flex; align-items: center; margin-top: 16px; }
.bh-avatars img {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    margin-left: -9px;
    box-shadow: var(--bh-shadow-sm);
}
.bh-avatars img:first-child { margin-left: 0; }
.bh-avatars .bh-count {
    margin-left: 12px;
    background: var(--bh-red-tint);
    border-radius: 999px;
    padding: 6px 16px;
    text-align: center;
    line-height: 1.1;
}
.bh-avatars .bh-count b { display: block; font-size: 14px; font-weight: 800; color: var(--bh-red); }
.bh-avatars .bh-count span { display: block; font-size: 9px; font-weight: 600; color: var(--bh-red); }

.bh-foot-bar {
    border-top: 1px solid var(--bh-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 0;
    font-size: 13px;
    color: var(--bh-muted);
}
.bh-foot-bar .bh-made { display: inline-flex; align-items: center; gap: 7px; }
.bh-foot-bar svg { width: 14px; height: 14px; color: var(--bh-red); }

/* =============================================================================
   RESPONSIVE
   -----------------------------------------------------------------------------
   Same visual language at every size — only the grid reflows.
   ============================================================================= */

/* ── Laptop (≤1320px): tighten the three-column rows ───────────────────── */
@media (max-width: 1320px) {
    .bh-row-mid { grid-template-columns: 350px minmax(0, 1fr) 455px; }
    .bh-row-bot { grid-template-columns: minmax(0, 1fr); }
    .bh-foot-in { grid-template-columns: 196px 180px 132px 142px 152px minmax(0, 1fr); gap: 24px; }
}

/* ── Small laptop (≤1180px): games rail drops under the first two ──────── */
@media (max-width: 1180px) {
    .bh-row-mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bh-row-mid > :nth-child(3) { grid-column: 1 / -1; }
    .bh-row-bot { grid-template-columns: minmax(0, 1fr); }
    .bh-row-bot > :nth-child(3) { grid-column: 1 / -1; }
    .bh-game { flex: 0 0 132px; }
    .bh-foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

/* ── Tablet (≤900px) ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .bh-stats { max-width: none; }
    .bh-cats-row { flex-wrap: wrap; row-gap: 18px; }
    .bh-cat { flex: 0 0 33.333%; padding: 6px 12px; }
    .bh-cat::before { display: none !important; }
    .bh-cats-row .bh-viewall { width: 100%; padding-left: 12px; margin-top: 6px; }
    .bh-cats-row .bh-viewall::before { display: none; }
    .bh-cta-art { width: 46%; opacity: .9; }
}

/* ── Large phone (≤760px) ──────────────────────────────────────────────── */
@media (max-width: 760px) {
    .bh { font-size: 15px; }
    .bh-wrap { padding: 0 18px; }
    .bh-row-mid,
    .bh-row-bot { grid-template-columns: 1fr; }
    .bh-row-mid > :nth-child(3),
    .bh-row-bot > :nth-child(3) { grid-column: auto; }
    .bh-arts { grid-template-columns: 1fr; gap: 22px; }
    .bh-art-img { aspect-ratio: 16 / 7; }
    .bh-stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
    .bh-stat:nth-child(3)::before { display: none; }
    .bh-foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
    .bh-cta { padding: 26px 22px; }
    .bh-cta-art { width: 42%; }
}

/* ── Phone (≤540px) ────────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .bh-cat { flex: 0 0 50%; }
    .bh-cta { flex-direction: column; align-items: flex-start; }
    .bh-cta-art { position: static; width: 70%; margin: 16px auto -8px; }
    .bh-foot-in { grid-template-columns: 1fr; gap: 24px; }
    .bh-foot-bar { flex-direction: column; align-items: flex-start; gap: 7px; }
    .bh-dots { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .bh *, .bh *::before, .bh *::after {
        transition: none !important;
        animation: none !important;
    }
    .bh-games-rail { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATABASE-DRIVEN HOMEPAGE — additions
   ---------------------------------------------------------------------------
   Styles for the blocks that replaced the static mock-ups (discovery band,
   topic chips, release grid, score badges, empty states) plus the dark theme
   the design direction calls for.

   Dark theme keys off `body.theme-dark`, the same class the rest of the site
   already sets from the shared `theme_mode` cookie, so one toggle drives every
   page. Only the tokens are redefined — no component rule is duplicated.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Empty states ─────────────────────────────────────────────────────────
   An honest "nothing here yet" is the correct render for a young catalogue. */
.bh-empty {
    margin: 0;
    padding: 26px 18px;
    text-align: center;
    color: var(--bh-muted);
    font-size: 14px;
    border: 1px dashed var(--bh-line-2);
    border-radius: var(--bh-r);
    background: var(--bh-page);
}

/* ── Score badge on a poster ──────────────────────────────────────────── */
.bh-game-poster { position: relative; }
.bh-game-score {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center;
    padding: 3px 8px; border-radius: 999px;
    background: var(--bh-red-grad); color: #fff;
    font-size: 11.5px; font-weight: 800; letter-spacing: -.01em;
    box-shadow: var(--bh-shadow-red);
}

/* ── Featured game: platform chips ───────────────────────────────────── */
.bh-feat-plats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bh-chip-sm {
    padding: 4px 10px; border-radius: 999px;
    background: var(--bh-page); border: 1px solid var(--bh-line);
    color: var(--bh-muted); font-size: 11.5px; font-weight: 600;
}

/* ── Discovery band ───────────────────────────────────────────────────── */
.bh-disc { display: grid; gap: 16px; margin-top: 16px; }

.bh-rel-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.bh-rel { display: block; text-decoration: none; color: inherit; }
.bh-rel-img {
    display: block; overflow: hidden;
    border-radius: var(--bh-r); border: 1px solid var(--bh-line);
    background: var(--bh-page); aspect-ratio: 3 / 4;
}
.bh-rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .28s ease; }
.bh-rel:hover .bh-rel-img img { transform: scale(1.04); }
.bh-rel b {
    display: block; margin: 9px 0 3px;
    font-size: 13.5px; font-weight: 700; line-height: 1.3;
    color: var(--bh-ink);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.bh-disc-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
/* Six identical grey boxes was the flattest thing on the page. Each tile now
   carries a red rail that grows on hover and an arrow that slides in, so the
   row reads as six routes into the catalogue rather than six labels. */
.bh-disc-tile {
    position: relative;
    display: block;
    padding: 17px 40px 17px 20px;
    border-radius: var(--bh-r-lg);
    border: 1px solid var(--bh-line);
    background: var(--bh-card);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
/* The rail: a red bar down the left edge, collapsed until hover. */
.bh-disc-tile::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    transform: translateY(-50%);
    border-radius: 0 3px 3px 0;
    background: var(--bh-red-grad);
    transition: height .24s cubic-bezier(.32,.72,0,1);
}
/* The arrow, parked just off the right edge. */
.bh-disc-tile::after {
    content: '';
    position: absolute;
    right: 18px; top: 50%;
    width: 7px; height: 7px;
    margin-top: -4px;
    border-right: 2px solid var(--bh-red);
    border-top: 2px solid var(--bh-red);
    transform: rotate(45deg) translate(-4px, 4px);
    opacity: 0;
    transition: opacity .2s ease, transform .24s cubic-bezier(.32,.72,0,1);
}
.bh-disc-tile:hover {
    border-color: rgba(229, 27, 35, .3);
    background: linear-gradient(135deg, #FFFDFD 0%, var(--bh-red-tint) 100%);
    transform: translateY(-3px);
    box-shadow: var(--bh-shadow-md);
}
.bh-disc-tile:hover::before { height: calc(100% - 22px); }
.bh-disc-tile:hover::after  { opacity: 1; transform: rotate(45deg) translate(0, 0); }
.bh-disc-tile:focus-visible { outline: 3px solid var(--bh-red); outline-offset: 2px; }

.bh-disc-tile b {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--bh-ink);
    transition: color .2s ease;
}
.bh-disc-tile:hover b { color: var(--bh-red-deep); }
.bh-disc-tile i {
    display: block;
    margin-top: 5px;
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bh-muted);
}

/* ── Topic chips ──────────────────────────────────────────────────────── */
/* A flat dump of grey pills. Each one now carries a small red marker and
   lifts on hover, so the row reads as a set of routes rather than a tag cloud
   pasted at the foot of the section. */
.bh-topics { display: flex; flex-wrap: wrap; gap: 9px; }
.bh-topic {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px 9px 14px;
    border-radius: 999px;
    background: var(--bh-card);
    border: 1px solid var(--bh-line-2);
    color: var(--bh-ink-2);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, background .18s ease;
}
.bh-topic::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--bh-red);
    opacity: .38;
    transition: opacity .18s ease, transform .18s ease;
}
.bh-topic:hover {
    background: var(--bh-red-tint);
    border-color: rgba(229, 27, 35, .42);
    color: var(--bh-red-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(229, 27, 35, .6);
}
.bh-topic:hover::before { opacity: 1; transform: scale(1.25); }
.bh-topic:focus-visible { outline: 3px solid var(--bh-red); outline-offset: 2px; }

/* ── Newsletter result message ───────────────────────────────────────── */
.bh-news-msg { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; }
.bh-news-msg.is-ok  { color: #0F8A4C; }
.bh-news-msg.is-err { color: var(--bh-red-deep); }

/* ── Theme toggle icon swap ──────────────────────────────────────────── */

/* ═══════════════════════════ DARK THEME ═══════════════════════════════
   Near-black base, white typography, the same red accent, restrained glass.
   Cards stay solid so they remain readable — the brief explicitly rejects
   making everything glass. */
/* The palette tokens are declared on `.bh` (the homepage wrapper), not on
   :root — so the dark overrides have to target that same element. Declaring
   them on `body.theme-dark` alone did nothing: `.bh` is a descendant and its
   own declaration is the closer one, so it always won. */
body.theme-dark .bh {
    --bh-ink:        #F4F4F6;
    --bh-ink-2:      #E4E4E9;
    --bh-muted:      #A0A0AA;
    --bh-muted-2:    #85858F;

    --bh-page:       #0C0C0E;
    --bh-card:       #141417;
    --bh-line:       #232329;
    --bh-line-2:     #2C2C34;

    --bh-red-tint:   rgba(229, 27, 35, .14);
    --bh-red-tint-2: rgba(229, 27, 35, .20);

    --bh-shadow-sm:  0 1px 2px rgba(0, 0, 0, .5);
    --bh-shadow:     0 2px 10px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
    --bh-shadow-md:  0 6px 22px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .45);
    --bh-shadow-red: 0 10px 24px -8px rgba(229, 27, 35, .55);

}

/* The <body> sits outside .bh, so it gets the ground colour directly. */
body.theme-dark { background: #0C0C0E; color: #F4F4F6; }

body.theme-dark .bh-empty { background: #101013; border-color: var(--bh-line-2); }
body.theme-dark .bh-chip-sm,
body.theme-dark .bh-topic { background: #101013; }
body.theme-dark .bh-topic:hover { background: var(--bh-red-tint); color: #FF8A8F; }
body.theme-dark .bh-rel-img { background: #101013; }

/* ── Responsive: the additions only ──────────────────────────────────── */
@media (max-width: 900px) {
    .bh-rel-grid  { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .bh-disc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 560px) {
    .bh-rel-grid  { grid-template-columns: repeat(2, 1fr); gap: 11px; }
    .bh-disc-grid { grid-template-columns: 1fr; }
    .bh-topics    { gap: 7px; }
    .bh-topic     { padding: 7px 13px; font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER: primary nav + mega menus — moved to assets/css/navigation.css
   ---------------------------------------------------------------------------
   This block opened the panels on :hover. The header is now click-to-open
   (assets/js/navigation.js), because a hover trigger throws a full-width
   panel over the page every time the pointer crosses "Games" on its way
   somewhere else. A :hover rule left here would re-open the panel behind
   the script’s back, so it moved out wholesale rather than being patched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header search: the icon is absolutely positioned, so its container has to
   establish the positioning context. Without this the magnifier escaped to the
   top-left corner of the viewport. ─────────────────────────────────────────── */


/* ── Dark theme: rules that hardcode a light hex instead of a token ─────── */
body.theme-dark .bh-body,
body.theme-dark.bh-body            { background: #0C0C0E; }
body.theme-dark .bh-btn-white      { background: #1B1B20; color: var(--bh-ink); border-color: var(--bh-line-2); }
body.theme-dark .bh-round-btn,
body.theme-dark .bh-rail-btn       { background: #141417; border-color: var(--bh-line); color: var(--bh-ink); }
body.theme-dark .bh-news-form input        { background: #101013; border-color: var(--bh-line); color: var(--bh-ink); }
body.theme-dark .bh-news-form input:focus  { background: #16161A; }
body.theme-dark .bh-foot           { background: rgba(12, 12, 14, .85); border-top-color: var(--bh-line); }

/* =============================================================================
   Newsletter — full-width band
   -----------------------------------------------------------------------------
   Was the middle cell of a three-up row: the narrowest column on the page, so
   the heading wrapped onto three lines and the email field ended up barely
   wider than its own Subscribe button. It is now a band that runs the full
   width of the page, with the pitch and the form side by side inside the
   normal page gutter.

   Full width, deliberately not full height — the band is about a third of a
   viewport, so it reads as a break in the page rather than a landing screen.
   ============================================================================= */

.bh-news {
    position: relative;
    margin-top: var(--bh-sec);
    padding: clamp(44px, 6vw, 76px) 0;
    background:
        radial-gradient(80% 130% at 12% 0%, var(--bh-red-tint) 0%, rgba(254, 239, 238, 0) 62%),
        radial-gradient(70% 120% at 100% 100%, var(--bh-red-tint-2) 0%, rgba(253, 228, 228, 0) 58%),
        linear-gradient(180deg, #FFFDFD 0%, #FFF7F7 100%);
    border-top: 1px solid var(--bh-line);
    border-bottom: 1px solid var(--bh-line);
    overflow: hidden;
}

/* The same checkered motif the author card uses, so the two premium surfaces
   on the site are recognisably the same family. Decorative only. */
.bh-news::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 320px; height: 100%;
    background: conic-gradient(rgba(229, 27, 35, .06) 0 25%, transparent 0 50%, rgba(229, 27, 35, .06) 0 75%, transparent 0);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(110% 120% at 100% 50%, #000 0%, transparent 70%);
            mask-image: radial-gradient(110% 120% at 100% 50%, #000 0%, transparent 70%);
    pointer-events: none;
}

.bh-news-in {
    position: relative;          /* above the pattern */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 40px;
    align-items: center;
}

/* ── Pitch ───────────────────────────────────────────────────────────── */

.bh-news-tx { min-width: 0; }

.bh-news-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--bh-red);
}
.bh-news-ic {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--bh-red);
    color: #fff;
    box-shadow: var(--bh-shadow-red);
}
.bh-news-ic svg { width: 15px; height: 15px; }

.bh-news h2 {
    margin: 0 0 12px;
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.035em;
    color: var(--bh-ink);
}
.bh-news p {
    margin: 0;
    max-width: 52ch;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.62;
    color: var(--bh-muted);
}

/* ── Form ────────────────────────────────────────────────────────────── */

.bh-news-act { min-width: 0; }

/* One rounded shell holding both controls, so the field reads as a single
   premium object rather than an input parked next to a button. */
.bh-news-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--bh-line-2);
    border-radius: 999px;
    background: var(--bh-card);
    box-shadow: var(--bh-shadow-md);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.bh-news-form:focus-within {
    border-color: var(--bh-red);
    box-shadow: 0 0 0 4px rgba(229, 27, 35, .12), var(--bh-shadow-md);
}
.bh-news-form input {
    flex: 1;
    min-width: 0;
    padding: 13px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--bh-ink);
}
.bh-news-form input::placeholder { color: var(--bh-muted-2); }
.bh-news-form input:focus { outline: none; }
.bh-news-form button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 13px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--bh-red-grad);
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    box-shadow: var(--bh-shadow-red);
    transition: transform .18s ease, filter .18s ease;
}
.bh-news-form button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.bh-news-form button:focus-visible { outline: 3px solid var(--bh-ink); outline-offset: 2px; }
.bh-news-form button svg { transition: transform .18s ease; }
.bh-news-form button:hover svg { transform: translateX(3px); }

.bh-news-note { margin: 12px 0 0 4px; font-size: 12.5px; color: var(--bh-muted-2); }
.bh-news-msg  { margin: 8px 0 0 4px; }

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

@media (max-width: 900px) {
    .bh-news-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .bh-news::before { width: 190px; opacity: .7; }
}

@media (max-width: 560px) {
    .bh-news { padding: 38px 0; }
    /* The pill splits into a stacked field and a full-width button — at this
       size a side-by-side pill leaves room for about four characters. */
    .bh-news-form {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
        border-radius: var(--bh-r-lg);
    }
    .bh-news-form input { padding: 12px 14px; text-align: center; }
    .bh-news-form button { justify-content: center; }
    .bh-news-note { text-align: center; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bh-news-form,
    .bh-news-form button,
    .bh-news-form button svg { transition: none; }
    .bh-news-form button:hover { transform: none; }
    .bh-news-form button:hover svg { transform: none; }
}

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

body.theme-dark .bh-news {
    background: linear-gradient(180deg, #141418 0%, #0F0F12 100%);
    border-color: rgba(255, 255, 255, .07);
}
body.theme-dark .bh-news h2 { color: #F5F5F7; }
body.theme-dark .bh-news p  { color: #A9A9B4; }
body.theme-dark .bh-news-form { background: #17171C; border-color: rgba(255, 255, 255, .09); }
body.theme-dark .bh-news-form input { color: #F5F5F7; }


/* =============================================================================
   THE REBUILT BANDS — counters · showcase · editorial · studios · media
   -----------------------------------------------------------------------------
   MOTION POLICY, and it is short:

     1. Only `transform` and `opacity` are animated. Both are composited on the
        GPU, so nothing here can force a layout or a paint mid-scroll. Width,
        height, top/left and box-shadow are never transitioned.
     2. Everything is off by default and switched ON by a class the observer
        adds. A page with no JavaScript renders fully visible and static — the
        reveal is the enhancement, never the content.
     3. `prefers-reduced-motion` removes all of it, in one block at the end.
        Not "reduces" — removes. A person who asked for no motion gets none.

   Ordering matches the page: stats, showcase, editorial, studios, media.
   ============================================================================= */

/* ── Easing vocabulary ───────────────────────────────────────────────────────
   Four curves, used consistently. The difference between a page that feels
   built and one that feels assembled is mostly here: linear and `ease` read as
   default, and defaults read as unfinished.

     --bh-e-out    decelerate hard, settle long. Entrances.
     --bh-e-spring overshoots ~4% then returns. Hovers, never entrances —
                   an overshoot on arrival looks like a bug on first paint.
     --bh-e-soft   symmetric, no character. Colour and opacity only.
     --bh-e-swift  quick out, quick in. Things that track the pointer.        */
.bh {
    --bh-e-out:    cubic-bezier(.16, 1, .3, 1);
    --bh-e-spring: cubic-bezier(.34, 1.4, .64, 1);
    --bh-e-soft:   cubic-bezier(.4, 0, .2, 1);
    --bh-e-swift:  cubic-bezier(.2, .8, .2, 1);
}

/* ── Reveal ──────────────────────────────────────────────────────────────────
   One observer, one class. Children stagger off `--i` set in the markup, so a
   row of five deals itself out rather than appearing as a block.

   THREE PROPERTIES, NOT ONE. Opacity alone is a fade and reads cheap; opacity
   plus lift plus a hair of scale reads as something arriving from behind the
   page. The scale is 0.97 — small enough that nobody consciously sees it,
   large enough that removing it makes the page feel flat. */
.bh-reveal > * {
    opacity: 0;
    transform: translateY(20px) scale(.97);
    transition:
        opacity   .7s var(--bh-e-out),
        transform .7s var(--bh-e-out);
    transition-delay: calc(var(--i, 0) * 65ms);
}
.bh-reveal.is-in > * { opacity: 1; transform: none; }

/* ── Wipe ────────────────────────────────────────────────────────────────────
   Art uncovers itself rather than fading in. A masked reveal is the single
   cheapest thing on this page that reads as expensive: the image is never
   shown at partial opacity, so it never looks like it failed to load. Paired
   with a counter-scale so the picture settles INTO frame instead of sitting
   still behind a moving edge. */
.bh-reveal .bh-wipe {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .85s var(--bh-e-out);
    transition-delay: calc(var(--i, 0) * 65ms + 60ms);
}
.bh-reveal .bh-wipe img {
    transform: scale(1.12);
    transition: transform 1.1s var(--bh-e-out);
    transition-delay: calc(var(--i, 0) * 65ms + 60ms);
}
.bh-reveal.is-in .bh-wipe { clip-path: inset(0 0 0 0); }
.bh-reveal.is-in .bh-wipe img { transform: scale(1); }
/* Hover scale must win once the entrance has finished. */
.bh-reveal.is-in .bh-gcard:hover .bh-wipe img,
.bh-reveal.is-in .bh-tile:hover  .bh-wipe img { transform: scale(1.06); }

/* The observer never fires without JS, so the content must not depend on it. */
.no-js .bh-reveal > * { opacity: 1; transform: none; }

/* ── Pointer tilt, with real depth ───────────────────────────────────────────
   --rx/--ry are written by the pointer handler; the element only declares how
   to use them. Leaving the maths in CSS means a card with no handler attached
   is simply a card that does not tilt, rather than a broken one.

   THE DEPTH IS THE POINT. A flat plane rotating is a party trick — the eye
   reads it as a picture on a hinge. What reads as a physical object is the
   INSIDE of the card moving at different rates: the badge sits proud of the
   art, the art proud of the base, and rotating the whole thing parallaxes them
   against each other. That is one property per layer and costs nothing extra,
   because they are all inside a transform that was already going to happen. */
.bh-tilt {
    transform:
        perspective(760px)
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg))
        translateY(var(--ty, 0px));
    transform-style: preserve-3d;
    transition: transform .55s var(--bh-e-out);
    will-change: transform;
}
/* While the pointer is on it, track almost immediately; on release, glide. */
.bh-tilt:hover { transition-duration: .08s; }

/* Every 3D child needs an ancestor chain that preserves 3D, or it flattens
   against the card face and the whole effect collapses silently. */
.bh-tilt > a { transform-style: preserve-3d; display: block; }

/* DEPTH IS A HOVER STATE, and it has to be written that way rather than left
   on permanently. Under `perspective`, translateZ is not free: a layer pushed
   26px toward the viewer is also drawn about 3.5% larger, and the badge at
   52px nearly 7%. Left on at rest that silently inflates every card on the
   page and bleeds the art past its own corner radius — an effect nobody asked
   for that looks like a rounding bug. At rest everything sits flat. */
.bh-tilt .bh-gcard-art,
.bh-tilt .bh-gcard-b,
.bh-tilt .bh-gcard-flag,
.bh-tilt .bh-tile-cap,
.bh-tilt .bh-tile-play {
    transform: translateZ(0);
    transition: transform .55s var(--bh-e-out);
}

.bh-tilt:hover .bh-gcard-art  { transform: translateZ(26px); }
.bh-tilt:hover .bh-gcard-b    { transform: translateZ(12px); }
.bh-tilt:hover .bh-gcard-flag { transform: translateZ(52px); }
.bh-tilt:hover .bh-tile-cap   { transform: translateZ(30px); }
.bh-tilt:hover .bh-tile-play  { transform: translateZ(44px); }

/* ── Cursor spotlight ────────────────────────────────────────────────────────
   A soft warm light that follows the pointer across a surface. --mx/--my are
   written by the same handler as the tilt, so there is one listener per card,
   not two.

   Painted on a pseudo-element rather than the element's own background: the
   gradient repaints as the pointer moves, and confining that to a layer with
   nothing in it keeps the repaint off the text and the artwork. */
.bh-spot { position: relative; }
.bh-spot::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        340px circle at var(--mx, 50%) var(--my, 50%),
        rgba(229, 27, 35, .09),
        transparent 62%);
    opacity: 0;
    transition: opacity .35s var(--bh-e-soft);
}
.bh-spot:hover::after { opacity: 1; }
/* The panel's own content has to sit above the light. */
.bh-spot > * { position: relative; z-index: 1; }

/* ── Magnetic pull ───────────────────────────────────────────────────────────
   A control that leans very slightly toward the cursor as it approaches. The
   displacement is capped at a few pixels — enough that the button feels
   reachable, far short of the "elastic blob" version that makes a link hard to
   actually click. The label leans further than the button, which is what sells
   it as weight rather than as the whole element sliding. */
.bh-magnet {
    transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
    transition: transform .5s var(--bh-e-out);
}
.bh-magnet:hover { transition-duration: .12s; }
.bh-magnet > * {
    transform: translate3d(calc(var(--mag-x, 0px) * .35), calc(var(--mag-y, 0px) * .35), 0);
    transition: transform .5s var(--bh-e-out);
}
.bh-magnet:hover > * { transition-duration: .12s; }

/* ── Border sweep ────────────────────────────────────────────────────────────
   A hairline of brand colour that travels around the panel edge on hover.
   Drawn with two stacked gradients on a padding-box/border-box mask so it is a
   real 1px edge rather than a glow — a blurred halo reads as a hover state, a
   crisp edge reads as a component. */
.bh-edge { position: relative; }
.bh-edge::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--edge, 0turn),
        transparent 0deg,
        rgba(229, 27, 35, .55) 40deg,
        transparent 110deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s var(--bh-e-soft);
}
.bh-edge:hover::before { opacity: 1; animation: bh-edge-spin 2.6s linear infinite; }

/* Registering the property is what makes a conic angle animatable at all — an
   unregistered custom property is a string, and a string cannot tween. Browsers
   without @property simply get the static edge, which still looks correct. */
@property --edge {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0turn;
}
@keyframes bh-edge-spin { to { --edge: 1turn; } }

/* ── Specular sheen ──────────────────────────────────────────────────────────
   A masked highlight that crosses the art once per hover. Sits above the image
   and below the text, and is pointer-transparent so it can never eat a click. */
.bh-gcard-sheen {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(255, 255, 255, .42) 48%,
        rgba(255, 255, 255, .12) 56%,
        transparent 70%);
    transform: translateX(-130%);
    transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.bh-gcard:hover .bh-gcard-sheen,
.bh-art:hover  .bh-gcard-sheen,
.bh-tile:hover .bh-gcard-sheen { transform: translateX(130%); }


/* ═══ 1 · COUNTERS ═══════════════════════════════════════════════════════════
   One card, N cells, hairline dividers. The row is `auto-fit` so it narrows to
   however many metrics survived the feed's zero-check — four honest numbers sit
   evenly rather than leaving a hole where the fifth would be. */
.bh-kpi-band { padding: 6px 0 var(--bh-sec); }

.bh-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    background: var(--bh-card);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-lg);
    box-shadow: var(--bh-shadow);
    overflow: hidden;
}

.bh-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-left: 1px solid var(--bh-line);
}
/* No divider on the first cell of each visual row. `auto-fit` means the count
   per row is unknown, so the rule is written for the first child and the
   wrapping cases are handled by the negative margin trick below. */
.bh-kpi:first-child { border-left: 0; }

.bh-kpi-ic {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    color: var(--bh-red);
    background: var(--bh-red-tint);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), background .25s ease;
}
.bh-kpi:hover .bh-kpi-ic {
    transform: translateY(-2px) scale(1.06);
    background: var(--bh-red-tint-2);
}

.bh-kpi-b { display: flex; flex-direction: column; min-width: 0; }

.bh-kpi-n {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--bh-ink);
    /* Tabular figures: without them a counter ticking 1→2→…→8500 visibly
       jitters as glyph widths change. */
    font-variant-numeric: tabular-nums;
}
.bh-kpi-b small {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bh-muted);
    letter-spacing: .01em;
}


/* ═══ 2 · SHOWCASE ═══════════════════════════════════════════════════════════
   Genres · featured · trending. The columns are declared by `data-cols`, which
   lists only the panels that actually rendered — so a missing rail changes the
   grid rather than leaving a gap in it. */
.bh-showcase-band { padding: var(--bh-sec) 0; }

/* ── Genre bar ───────────────────────────────────────────────────────────────
   One row, above the games. The chips scroll sideways inside their own track,
   so a catalogue with thirty genres lengthens the scroll rather than the page,
   and the label and the "all" link stay pinned either side of it. */
.bh-genrebar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--bh-gap);
    padding: 10px 14px;
    background: var(--bh-card);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-lg);
    box-shadow: var(--bh-shadow);
}

.bh-genrebar-h {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    font-size: 13.5px;
    font-weight: 750;
    letter-spacing: -.01em;
    color: var(--bh-ink);
    white-space: nowrap;
}

.bh-genrebar-scroll {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* The right edge fades so a scrollable row LOOKS scrollable rather than
       looking like it was cut off. */
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
            mask-image: linear-gradient(90deg, #000 92%, transparent);
    padding: 2px 0;
}
.bh-genrebar-scroll::-webkit-scrollbar { display: none; }

.bh-genre {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--bh-line);
    background: var(--bh-page);
    font-size: 13px;
    font-weight: 650;
    color: var(--bh-ink-2);
    white-space: nowrap;
    transition:
        background   .22s ease,
        color        .22s ease,
        border-color .22s ease,
        transform    .28s cubic-bezier(.16, 1, .3, 1),
        box-shadow   .28s ease;
}
.bh-genre:hover {
    background: var(--bh-red);
    border-color: var(--bh-red);
    color: #FFF;
    transform: translateY(-2px);
    box-shadow: var(--bh-shadow-red);
}

.bh-genre-n {
    font-size: 11px;
    font-weight: 700;
    color: var(--bh-muted-2);
    font-variant-numeric: tabular-nums;
    transition: color .22s ease;
}
.bh-genre:hover .bh-genre-n { color: rgba(255, 255, 255, .85); }

.bh-genrebar-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--bh-red);
    white-space: nowrap;
    transition: gap .22s ease;
}
.bh-genrebar-all:hover { gap: 9px; }

/* ── The games grid ── */
.bh-showcase {
    display: grid;
    gap: var(--bh-gap);
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 340px;
}
.bh-showcase[data-cols="featured"],
.bh-showcase[data-cols="trending"] { grid-template-columns: minmax(0, 1fr); }

/* ── The shared panel shell ── */
.bh-panel {
    background: var(--bh-card);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-lg);
    box-shadow: var(--bh-shadow);
    padding: 16px 16px 14px;
    /* The reveal writes opacity/transform onto direct children, and a panel IS
       one, so it participates without extra markup. */
}

.bh-panel-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.bh-panel-h h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.015em;
    color: var(--bh-ink);
}
.bh-panel-ic {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    flex: none;
    border-radius: 9px;
    color: var(--bh-red);
    background: var(--bh-red-tint);
}
.bh-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--bh-red);
    transition: gap .22s ease;
}
.bh-panel-link:hover { gap: 9px; }

.bh-panel-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bh-line);
    width: 100%;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--bh-red);
    transition: gap .22s ease;
}
.bh-panel-all:hover { gap: 10px; }

/* ── Genres ── */
/* The vertical genre list that used to sit in the left rail lived here. It
   moved to .bh-genrebar above — one row across the top — so its rules are
   gone rather than left to rot behind markup that no longer emits them. */

/* ── Featured rail ── */
.bh-rail-wrap { position: relative; }

.bh-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* The scrollbar is hidden but the rail is still a real scroller: it
       swipes, it takes a wheel, and it keyboard-scrolls. */
    scrollbar-width: none;
    padding-bottom: 2px;
}
.bh-rail::-webkit-scrollbar { display: none; }

.bh-gcard {
    position: relative;
    flex: 0 0 168px;
    scroll-snap-align: start;
}

/* A rail that cannot fill its panel centres itself and grows. The cards stay
   posters — capped so two of them never inflate into billboards — but the
   whitespace ends up symmetric, which reads as composition rather than as a
   grid with items missing from the right-hand side. */
.bh-rail.is-sparse { justify-content: center; gap: 18px; }
.bh-rail.is-sparse .bh-gcard { flex-basis: 210px; }
.bh-gcard > a { display: block; }

.bh-gcard-art {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--bh-r);
    overflow: hidden;
    background: var(--bh-page);
    box-shadow: var(--bh-shadow-sm);
    transition: box-shadow .35s ease;
}
.bh-gcard:hover .bh-gcard-art { box-shadow: var(--bh-shadow-md); }

.bh-gcard-art img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* The image scales INSIDE a fixed frame, so the card edge stays crisp and
       the layout never moves. Scaling the card itself would nudge its
       neighbours and cost a layout pass. */
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.bh-gcard:hover .bh-gcard-art img { transform: scale(1.07); }

.bh-gcard-flag {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 3;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #FFF;
    background: var(--bh-red-grad);
    box-shadow: var(--bh-shadow-red);
}
.bh-gcard-flag.is-soon { background: linear-gradient(135deg, #2B2B33 0%, #131317 100%); }

.bh-gcard-b {
    display: block;
    position: relative;
    padding: 9px 2px 0;
}
.bh-gcard-b b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bh-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bh-gcard-b small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--bh-muted);
}
.bh-gcard-score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #B4890B;
    font-variant-numeric: tabular-nums;
}
.bh-gcard-score svg { color: #F0B429; }

/* Rail arrows. Absolutely positioned over the scroller, and only rendered by
   the template when there is more than a screenful to move through. */
.bh-rail-btn {
    position: absolute;
    top: 38%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border: 1px solid var(--bh-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    color: var(--bh-ink-2);
    cursor: pointer;
    box-shadow: var(--bh-shadow);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .2s ease, color .2s ease;
}
.bh-rail-btn:hover { background: var(--bh-red); color: #FFF; border-color: var(--bh-red); transform: scale(1.08); }
.bh-rail-prev { left: -12px; }
.bh-rail-next { right: -12px; }
.bh-rail-prev svg { transform: rotate(90deg); }
.bh-rail-next svg { transform: rotate(-90deg); }

/* ── Trending ── */
.bh-trend { list-style: none; margin: 0; padding: 0; counter-reset: bh-t; }
.bh-trend a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 8px;
    border-radius: var(--bh-r-sm);
    transition: background .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.bh-trend a:hover { background: var(--bh-page); transform: translateX(3px); }

.bh-trend-n {
    flex: none;
    width: 18px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    color: var(--bh-muted-2);
    font-variant-numeric: tabular-nums;
    transition: color .2s ease;
}
.bh-trend a:hover .bh-trend-n { color: var(--bh-red); }

.bh-trend-art {
    flex: none;
    width: 38px; height: 50px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--bh-page);
}
.bh-trend-art img { width: 100%; height: 100%; object-fit: cover; }

.bh-trend-b { flex: 1 1 auto; min-width: 0; }
.bh-trend-b b {
    display: block;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--bh-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bh-trend-b small {
    display: block;
    font-size: 11.5px;
    color: var(--bh-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bh-trend-score {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 700;
    color: #B4890B;
    font-variant-numeric: tabular-nums;
}
.bh-trend-score svg { color: #F0B429; }


/* ═══ 3 · EDITORIAL ══════════════════════════════════════════════════════════
   Same data-cols contract as the showcase. With only Latest present the column
   goes full width and the rows spread into two across — so the band reads as a
   deliberate wide edition rather than a three-up missing two thirds. */
.bh-editorial-band { padding: var(--bh-sec) 0; }

.bh-editorial {
    display: grid;
    gap: var(--bh-gap);
    align-items: start;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
}
.bh-editorial[data-cols="latest reviews"],
.bh-editorial[data-cols="latest guides"]  { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.bh-editorial[data-cols="reviews guides"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bh-editorial[data-cols="latest"],
.bh-editorial[data-cols="reviews"],
.bh-editorial[data-cols="guides"]         { grid-template-columns: minmax(0, 1fr); }

/* Alone, the article rows go two-up so a single column is not one tall stack. */
.bh-editorial[data-cols="latest"] .bh-arts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4px 16px;
}

.bh-art { position: relative; }
.bh-art > a {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: var(--bh-r);
    transition: background .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}
.bh-art > a:hover { background: var(--bh-page); transform: translateX(3px); }

.bh-art-art {
    position: relative;
    flex: none;
    width: 92px; height: 68px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--bh-page);
}
.bh-art-art img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.bh-art:hover .bh-art-art img { transform: scale(1.08); }

.bh-art-b { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.bh-art-cat {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bh-red);
    background: var(--bh-red-tint);
}
.bh-art-b b {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bh-ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bh-art-b small {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--bh-muted);
}
.bh-art-sep { margin: 0 5px; }

/* Reviews and guides share one row primitive. */
.bh-rows { list-style: none; margin: 0; padding: 0; }
.bh-rows a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 8px;
    border-radius: var(--bh-r-sm);
    transition: background .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.bh-rows a:hover { background: var(--bh-page); transform: translateX(3px); }

.bh-row-art {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bh-page);
}
.bh-row-art img { width: 100%; height: 100%; object-fit: cover; }

.bh-row-b { flex: 1 1 auto; min-width: 0; }
.bh-row-b b {
    display: block;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--bh-ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bh-row-b small { display: block; font-size: 11.5px; color: var(--bh-muted); }

.bh-row-score {
    flex: none;
    min-width: 38px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    color: #FFF;
    background: var(--bh-red-grad);
    font-variant-numeric: tabular-nums;
    box-shadow: var(--bh-shadow-red);
}
.bh-row-go { flex: none; color: var(--bh-muted-2); transition: transform .22s ease, color .22s ease; }
.bh-rows a:hover .bh-row-go { transform: translateX(3px); color: var(--bh-red); }


/* ═══ 4 · STUDIOS ════════════════════════════════════════════════════════════
   Two identical tracks in a flex row, each sliding one full track-width left.
   When the first has gone the second sits exactly where it began, so the loop
   is seamless with no measurement and no JavaScript. */
.bh-co-band { padding: var(--bh-sec) 0; }

.bh-co-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.bh-co-h h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.bh-co-marquee {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Fades the ends so logos dissolve rather than being sliced by the edge. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    padding: 4px var(--bh-pad);
}
.bh-co-marquee::-webkit-scrollbar { display: none; }

/* Running: the tracks slide and the scroller stops being one. */
.bh-co-marquee.is-running { overflow: hidden; }
.bh-co-marquee.is-running .bh-co-track {
    animation: bh-co-slide calc(var(--n, 6) * 3.6s) linear infinite;
}
.bh-co-marquee.is-running:hover .bh-co-track { animation-play-state: paused; }
/* A keyboard user tabbing into a moving strip cannot read it. */
.bh-co-marquee.is-running:focus-within .bh-co-track { animation-play-state: paused; }

@keyframes bh-co-slide { to { transform: translateX(-100%); } }

.bh-co-track { display: flex; gap: 12px; flex: none; }

.bh-co {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: none;
    width: 132px;
    padding: 16px 12px;
    background: var(--bh-card);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r);
    box-shadow: var(--bh-shadow-sm);
    text-align: center;
    transition:
        transform  .32s cubic-bezier(.16, 1, .3, 1),
        box-shadow .32s ease,
        border-color .25s ease;
}
.bh-co:hover {
    transform: translateY(-4px);
    box-shadow: var(--bh-shadow-md);
    border-color: var(--bh-line-2);
}

.bh-co-logo {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
}
.bh-co-logo img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    /* Shown as they are. These were greyed to 62% opacity on the theory that a
       row of brand marks fights the page for attention — but half of them are
       light-on-transparent, and at 62% grey those disappeared completely. A
       logo you cannot see is not a subtle logo. */
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.bh-co:hover .bh-co-logo img { transform: scale(1.07); }

.bh-co b {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bh-ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bh-co small { font-size: 10.5px; color: var(--bh-muted-2); font-variant-numeric: tabular-nums; }


/* ═══ 5 · MEDIA WALL ═════════════════════════════════════════════════════════ */
.bh-media-band { padding: var(--bh-sec) 0 calc(var(--bh-sec) + 6px); }

.bh-media-h {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.bh-media-h h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.015em;
}
.bh-media-h .bh-panel-link { margin-left: auto; }

.bh-media-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--bh-page);
    border: 1px solid var(--bh-line);
}
.bh-media-tabs button {
    padding: 5px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--bh-muted);
    cursor: pointer;
    transition: color .2s ease, background .28s cubic-bezier(.16, 1, .3, 1);
}
.bh-media-tabs button:hover { color: var(--bh-ink); }
.bh-media-tabs button.is-on {
    color: #FFF;
    background: var(--bh-red-grad);
    box-shadow: var(--bh-shadow-red);
}

.bh-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    transition: opacity .16s ease;
}
.bh-media-grid.is-swapping { opacity: .3; }

/* Out of flow entirely: a filtered-out tile must not leave a hole. The
   crossfade above is what covers the reflow. */
.bh-tile.is-off { display: none; }

.bh-tile {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--bh-r);
    overflow: hidden;
    background: var(--bh-page);
    box-shadow: var(--bh-shadow-sm);
    transition: box-shadow .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.bh-tile:hover { box-shadow: var(--bh-shadow-md); }

.bh-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.bh-tile:hover img { transform: scale(1.06); }

.bh-tile-play {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.bh-tile-play svg {
    width: 46px; height: 46px;
    padding: 13px;
    border-radius: 50%;
    color: #FFF;
    background: rgba(229, 27, 35, .92);
    box-shadow: var(--bh-shadow-red);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.bh-tile:hover .bh-tile-play svg { transform: scale(1.12); }

.bh-tile-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    padding: 22px 12px 10px;
    font-size: 11.5px;
    font-weight: 650;
    color: #FFF;
    background: linear-gradient(180deg, transparent, rgba(6, 6, 10, .82));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(4px);
    opacity: 0;
    transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.bh-tile:hover .bh-tile-cap { opacity: 1; transform: none; }


/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════════
   The bands collapse in the order that keeps the page readable: the narrow
   side rails go first, the content column last. */
@media (max-width: 1180px) {
    .bh-showcase { grid-template-columns: minmax(0, 1fr) 290px; }

    .bh-editorial,
    .bh-editorial[data-cols="latest reviews"],
    .bh-editorial[data-cols="latest guides"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .bh-showcase,
    .bh-editorial,
    .bh-editorial[data-cols="latest reviews"],
    .bh-editorial[data-cols="latest guides"],
    .bh-editorial[data-cols="reviews guides"] { grid-template-columns: minmax(0, 1fr); }
    /* The bar keeps its shape; only the heading steps out of the way so the
       chips get the full width. */
    .bh-genrebar { gap: 10px; padding: 9px 11px; }
    .bh-genrebar-h span { display: none; }
}

@media (max-width: 560px) {
    /* Below this the label and the chips cannot share a line legibly. */
    .bh-genrebar { flex-wrap: wrap; }
    .bh-genrebar-h { order: 1; }
    .bh-genrebar-all { order: 2; margin-left: auto; }
    .bh-genrebar-scroll { order: 3; flex-basis: 100%; }
}

@media (max-width: 600px) {
    .bh-kpi { padding: 16px 18px; gap: 11px; }
    .bh-kpi-ic { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
    .bh-kpi-n { font-size: 21px; }
    .bh-gcard,
    .bh-rail.is-sparse .bh-gcard { flex-basis: 138px; }
    .bh-rail.is-sparse { gap: 12px; }
    .bh-rail-prev { left: -6px; }
    .bh-rail-next { right: -6px; }
    .bh-media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
    .bh-media-h { flex-wrap: wrap; }
    .bh-media-h .bh-panel-link { margin-left: 0; }
}

@media (max-width: 420px) {
    .bh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* At two-up the left border reappears mid-row; the cells get their own
       hairlines from the grid gap instead. */
    .bh-kpi { border-left: 0; border-top: 1px solid var(--bh-line); }
    .bh-kpi:nth-child(-n+2) { border-top: 0; }
    .bh-kpi:nth-child(2n) { border-left: 1px solid var(--bh-line); }
    .bh-art > a { gap: 10px; }
    .bh-art-art { width: 76px; height: 58px; }
    .bh-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bh-co { width: 118px; }
}


/* ═══ REDUCED MOTION ═════════════════════════════════════════════════════════
   Removed, not reduced. Content is shown in its final state immediately and
   nothing moves — including the marquee, which is the one thing on this page
   that moves without being asked to. */
@media (prefers-reduced-motion: reduce) {
    .bh-reveal > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .bh-tilt { transform: none !important; transition: none !important; }
    .bh-gcard-sheen { display: none; }

    /* Every effect added in the premium pass, switched off rather than slowed.
       The depth layers must be flattened explicitly: translateZ survives a
       `transform: none` on the ANCESTOR, so without this the badge would still
       be floating 52px off a card that no longer tilts. */
    .bh-tilt .bh-gcard-art,
    .bh-tilt .bh-gcard-b,
    .bh-tilt .bh-gcard-flag,
    .bh-tilt .bh-tile-cap,
    .bh-tilt .bh-tile-play,
    .bh-tilt:hover .bh-gcard-art,
    .bh-tilt:hover .bh-gcard-b,
    .bh-tilt:hover .bh-gcard-flag,
    .bh-tilt:hover .bh-tile-cap,
    .bh-tilt:hover .bh-tile-play { transform: none !important; transition: none !important; }

    .bh-spot::after { display: none; }
    .bh-edge::before { display: none; animation: none !important; }

    .bh-magnet,
    .bh-magnet > * { transform: none !important; transition: none !important; }

    /* The wipe reveals the art instantly and at its true size. */
    .bh-reveal .bh-wipe,
    .bh-reveal.is-in .bh-wipe { clip-path: none !important; transition: none !important; }
    .bh-reveal .bh-wipe img,
    .bh-reveal.is-in .bh-wipe img,
    .bh-reveal.is-in .bh-gcard:hover .bh-wipe img,
    .bh-reveal.is-in .bh-tile:hover .bh-wipe img { transform: none !important; transition: none !important; }
    .bh-co-marquee.is-running .bh-co-track { animation: none; }
    .bh-co-marquee.is-running { overflow-x: auto; }

    .bh-kpi-ic,
    .bh-gcard-art img,
    .bh-art-art img,
    .bh-tile img,
    .bh-tile-play svg,
    .bh-tile-cap,
    .bh-co,
    .bh-co-logo img,
    .bh-genre,
    .bh-trend a,
    .bh-rows a,
    .bh-art > a,
    .bh-rail-btn,
    .bh-panel-link,
    .bh-panel-all,
    .bh-media-tabs button,
    .bh-media-grid { transition: none !important; }

    .bh-kpi:hover .bh-kpi-ic,
    .bh-gcard:hover .bh-gcard-art img,
    .bh-art:hover .bh-art-art img,
    .bh-tile:hover img,
    .bh-tile:hover .bh-tile-play svg,
    .bh-co:hover,
    .bh-co:hover .bh-co-logo img,
    .bh-genre:hover,
    .bh-trend a:hover,
    .bh-rows a:hover,
    .bh-art > a:hover,
    .bh-rail-btn:hover { transform: none !important; }

    .bh-tile-cap { opacity: 1; transform: none; }
    .bh-rail { scroll-behavior: auto; }
}


/* ═══ DARK ═══════════════════════════════════════════════════════════════════
   The homepage is a light page by decision, but the header carries a theme
   toggle, so every new surface needs a dark answer or the band goes white in a
   dark page. Keyed on the body class the rest of the site uses. */
body.theme-dark .bh-kpis,
body.theme-dark .bh-panel,
body.theme-dark .bh-co {
    background: #141418;
    border-color: rgba(255, 255, 255, .07);
}
body.theme-dark .bh-kpi { border-left-color: rgba(255, 255, 255, .07); }
body.theme-dark .bh-kpi-n,
body.theme-dark .bh-panel-h h2,
body.theme-dark .bh-co-h h2,
body.theme-dark .bh-media-h h2,
body.theme-dark .bh-gcard-b b,
body.theme-dark .bh-trend-b b,
body.theme-dark .bh-art-b b,
body.theme-dark .bh-row-b b,
body.theme-dark .bh-co b { color: #F5F5F7; }

body.theme-dark .bh-kpi-b small,
body.theme-dark .bh-gcard-b small,
body.theme-dark .bh-trend-b small,
body.theme-dark .bh-art-b small,
body.theme-dark .bh-row-b small,
body.theme-dark .bh-co small { color: #A9A9B4; }

body.theme-dark .bh-genrebar { background: #141418; border-color: rgba(255,255,255,.07); }
body.theme-dark .bh-genrebar-h { color: #F5F5F7; }
body.theme-dark .bh-genre { background: #1B1B21; border-color: rgba(255,255,255,.08); color: #D8D8DE; }
body.theme-dark .bh-trend a:hover,
body.theme-dark .bh-rows a:hover,
body.theme-dark .bh-art > a:hover { background: rgba(255, 255, 255, .05); }

body.theme-dark .bh-panel-ic,
body.theme-dark .bh-kpi-ic { background: rgba(229, 27, 35, .16); }

body.theme-dark .bh-panel-all { border-top-color: rgba(255, 255, 255, .07); }

body.theme-dark .bh-media-tabs,
body.theme-dark .bh-gcard-art,
body.theme-dark .bh-trend-art,
body.theme-dark .bh-art-art,
body.theme-dark .bh-row-art,
body.theme-dark .bh-tile { background: #1B1B21; border-color: rgba(255, 255, 255, .07); }

body.theme-dark .bh-rail-btn {
    background: rgba(24, 24, 29, .94);
    border-color: rgba(255, 255, 255, .1);
    color: #E7E7EC;
}
body.theme-dark .bh-art-cat { background: rgba(229, 27, 35, .16); }
/* The sheen is a white highlight; at full strength on a dark card it reads as
   a flash rather than a reflection. */
body.theme-dark .bh-gcard-sheen {
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(255, 255, 255, .16) 48%,
        transparent 70%);
}

/* =============================================================================
   WHY CHOOSE US
   -----------------------------------------------------------------------------
   A centred card row near the foot of the page. Every string, every icon and the
   number of cards come from home_config — this file sizes and paints them and
   knows nothing about what they say.

   THE GRID IS NOT FIVE COLUMNS. `auto-fit` with a min AND a max track keeps a
   card between 200px and 268px whatever the count: five fill a desktop row, and
   three centre as three normal cards rather than stretching into three
   billboards. auto-fit collapses the empty tracks, so a short list never leaves
   a hole at the end of the row. Adding a sixth card wraps it onto a second row
   with no CSS change.

   Colour comes entirely from the --bh-* tokens, which are already redefined for
   `body.theme-dark` further up this file, so both themes resolve without a
   single duplicated rule here.
   ============================================================================= */

.bh-why { padding: clamp(28px, 3vw, 46px) 0; }

/*
 * The reference holds the whole section inside one large rounded panel with a
 * hairline border, rather than running its tint to the edges of the page. The
 * panel is what separates this band from the full-width CTA directly beneath
 * it — without it the two red washes meet and read as one very tall pink area.
 */
.bh-why > .bh-wrap {
    padding: clamp(38px, 4.6vw, 72px) clamp(18px, 3vw, 56px);
    border: 1px solid var(--bh-line);
    border-radius: clamp(20px, 2vw, 32px);
    /* Two very low-alpha fields rather than a flat tint, so the panel has a
       centre of gravity behind the heading and fades out toward the cards. */
    background:
        radial-gradient(62% 62% at 50% 0%, rgba(229, 27, 35, .06) 0%, transparent 70%),
        radial-gradient(90% 55% at 50% 100%, rgba(229, 27, 35, .045) 0%, transparent 74%),
        var(--bh-card);
    overflow: hidden;
}

/* ── Heading block ────────────────────────────────────────────────────── */

.bh-why-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: clamp(30px, 3.6vw, 52px);
}

.bh-why-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--bh-red-tint);
    color: var(--bh-red);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1;
}
.bh-why-badge svg { flex: none; }

.bh-why-t {
    margin: 0;
    font-size: clamp(30px, 4.6vw, 54px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.032em;
    color: var(--bh-ink);
    text-wrap: balance;
}
/* The red half of the title. A span rather than a second heading, so the
   document still has one h2 here. */
.bh-why-t span { color: var(--bh-red); }

.bh-why-sub {
    margin: 0;
    max-width: 64ch;
    font-size: clamp(15px, 1.2vw, 17.5px);
    line-height: 1.65;
    color: var(--bh-muted);
    text-wrap: pretty;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.bh-why-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 268px));
    justify-content: center;
    gap: clamp(14px, 1.4vw, 22px);
}

.bh-why-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: clamp(24px, 2.2vw, 34px) clamp(18px, 1.6vw, 24px) clamp(20px, 2vw, 28px);
    background: var(--bh-card);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-xl);
    box-shadow: var(--bh-shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bh-why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 27, 35, .26);
    box-shadow: var(--bh-shadow-md);
}

/* The circular icon plate. Sized in its own right rather than by the glyph, so
   a 26px icon and a 20px one still sit on identical discs down the row. */
.bh-why-ic {
    display: grid;
    place-items: center;
    width: clamp(72px, 6vw, 92px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bh-red-tint);
    color: var(--bh-red);
    transition: transform .26s cubic-bezier(.34, 1.3, .64, 1), background .22s ease;
}
.bh-why-card:hover .bh-why-ic {
    transform: translateY(-2px) scale(1.05);
}
.bh-why-ic svg { flex: none; }

.bh-why-ct {
    margin: 0;
    font-size: clamp(16.5px, 1.25vw, 19px);
    font-weight: 800;
    letter-spacing: -.012em;
    color: var(--bh-ink);
    text-wrap: balance;
}

.bh-why-cd {
    margin: 0;
    font-size: clamp(13.5px, 1vw, 15px);
    line-height: 1.62;
    color: var(--bh-muted);
    text-wrap: pretty;
}

/* The optional short label. Hidden until the admin writes one — this is the
   only card element that is absent by default. */
.bh-why-cl {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--bh-red);
}

/* The short rule that closes each card in the reference. `margin-top:auto`
   pins it to the bottom, so cards with two lines of copy and cards with four
   still line their rules up across the row. */
.bh-why-rule {
    margin-top: auto;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--bh-red);
    transition: width .24s ease;
}
.bh-why-card:hover .bh-why-rule { width: 46px; }

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

/*
 * THE TRACK MAX IS NOT RAISED ON WIDE SCREENS, and that is deliberate.
 *
 * An earlier draft lifted it to 300px above 1920px, on the assumption that a
 * bigger viewport means a bigger row. It does not: `--bh-max` caps the content
 * column at 1450px whatever the screen is, so five 300px cards plus four 22px
 * gaps came to 1588px, only four tracks fit, and the fifth card dropped onto a
 * second row on every desktop.
 *
 * 268px is the largest track that keeps five in one row inside that column
 * (5x268 + 4x22 = 1428). Beyond the cap, auto-fit collapses the tracks it
 * cannot fill and the row simply centres — which is the right answer for a
 * list whose length the admin controls anyway.
 */

/* Tablet and below: the min track drops so the row breaks to 3 → 2 on its own
   rather than at a hardcoded column count. */
@media (max-width: 900px) {
    .bh-why-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* Phones. One column, and the card relaxes into a row-friendly block: the disc
   shrinks and the padding tightens so a five-card stack is not five screens. */
@media (max-width: 560px) {
    .bh-why { padding: 40px 0; }
    .bh-why-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .bh-why-card { padding: 22px 18px; gap: 11px; }
    .bh-why-ic { width: 62px; }
    .bh-why-sub { font-size: 14.5px; }
}

/* The 360–380px band, where a 2-word title can otherwise break mid-word. */
@media (max-width: 380px) {
    .bh-why-card { padding: 20px 15px; }
    .bh-why-ic { width: 56px; }
    .bh-why-ct { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .bh-why-card,
    .bh-why-ic,
    .bh-why-rule { transition: none; }
    .bh-why-card:hover { transform: none; }
    .bh-why-card:hover .bh-why-ic { transform: none; }
    .bh-why-card:hover .bh-why-rule { width: 30px; }
}

/* =============================================================================
   FEATURED-ARTICLE BAND
   -----------------------------------------------------------------------------
   Replaced the "Every Game Catalogued / Zero Barriers" card: a fixed headline
   beside a stock controller render, none of which came from the site.

   THE COMPOSITION. The article's own artwork fills the band and is scrimmed
   from the left, so the copy sits on near-solid ground and the picture is only
   itself on the right. The games panel floats over the right third.

   The scrim is horizontal and hard on purpose: text over a photograph needs a
   contrast floor that does not depend on which photograph an editor picked, and
   the artwork here changes every time the featured article does.
   ============================================================================= */

.bh-fa {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: clamp(28px, 3vw, 46px) 0;
    border-radius: clamp(18px, 1.8vw, 28px);
    background: var(--bh-card);
    border: 1px solid var(--bh-line);
}

/* The artwork. Decorative — the headline beside it carries the meaning — so it
   is aria-hidden in the markup and empty-alt here. */
.bh-fa-art { position: absolute; inset: 0; z-index: -2; }
.bh-fa-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The readability floor. Solid under the copy, clearing by the middle so the
   picture reads as a picture on the right. */
.bh-fa::before {
    content: '';
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(
        100deg,
        var(--bh-card) 0%,
        var(--bh-card) 26%,
        color-mix(in srgb, var(--bh-card) 78%, transparent) 42%,
        color-mix(in srgb, var(--bh-card) 22%, transparent) 60%,
        transparent 74%
    );
}

.bh-fa-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: center;
    gap: clamp(24px, 3vw, 56px);
    padding: clamp(30px, 3.4vw, 54px) clamp(20px, 2.6vw, 44px);
    min-height: 340px;
}

/* ── Copy ─────────────────────────────────────────────────────────────── */

/*
 * A px cap, NOT `34ch`.
 *
 * `ch` resolves against the element's own font-size, and this element inherits
 * the 16px body size — so 34ch came out at 322px and squeezed the headline into
 * six lines down the left edge of a 1136px column. The measure that matters
 * here belongs to the h2 inside, which is up to 40px, so the cap is stated in
 * pixels where it cannot be re-interpreted by whatever inherits.
 */
.bh-fa-tx { max-width: 560px; }

.bh-fa-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--bh-red-tint);
    color: var(--bh-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
}
.bh-fa-badge svg { flex: none; }

.bh-fa-t {
    margin: 16px 0 0;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--bh-ink);
    text-wrap: balance;
}
.bh-fa-t a { color: inherit; text-decoration: none; }
.bh-fa-t a:hover { color: var(--bh-red); }

.bh-fa-x {
    margin: 14px 0 0;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.65;
    color: var(--bh-muted);
    text-wrap: pretty;
}

.bh-fa-meta {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--bh-muted);
}
.bh-fa-meta li { display: inline-flex; align-items: center; gap: 6px; }
.bh-fa-meta svg { flex: none; opacity: .75; }

/*
 * The button's SIZE lives in `.bh-cta .bh-btn` — scoped to the band this one
 * replaced, so `.bh-btn bh-btn-red` alone arrived here with the gradient and
 * the label but no height, no padding and no icon size: a 121x23 sliver.
 * Sizing is restated for this band rather than un-scoping the original, which
 * would change every other button on the page.
 */
.bh-fa-cta {
    margin-top: 24px;
    height: 52px;
    padding: 0 28px;
    font-size: 15px;
}
/*
 * The label is white, and it needs the extra class to say so: `.bh a` sets
 * `color: inherit` at (0,1,1), which outranks both `.bh-btn-red` and a bare
 * `.bh-fa-cta` at (0,1,0) — so the button rendered its gradient with the
 * page's ink on top of it.
 */
.bh-fa .bh-fa-cta,
.bh-fa .bh-fa-cta:hover { color: #fff; }
.bh-fa-cta svg { width: 17px; height: 17px; transition: transform .18s ease; }
.bh-fa-cta:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .bh-fa-cta svg { transition: none; }
    .bh-fa-cta:hover svg { transform: none; }
}

/* ── Games panel ──────────────────────────────────────────────────────── */

.bh-fa-panel {
    background: var(--bh-card);
    border: 1px solid var(--bh-line);
    border-radius: clamp(16px, 1.4vw, 22px);
    box-shadow: var(--bh-shadow-md);
    padding: 12px;
}

.bh-fa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.bh-fa-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .18s ease;
}
.bh-fa-row:hover { background: var(--bh-red-tint); }

.bh-fa-thumb {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 11px;
    overflow: hidden;
    background: var(--bh-line);
}
.bh-fa-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-fa-mono { font-size: 18px; font-weight: 800; color: var(--bh-muted); }

.bh-fa-rb { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bh-fa-rb b {
    font-size: 14.5px;
    font-weight: 750;
    color: var(--bh-ink);
    line-height: 1.3;
    /* One line. A long title truncates rather than pushing the row taller than
       its neighbours and breaking the rhythm of the list. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-fa-rb span {
    font-size: 12.5px;
    color: var(--bh-muted);
    line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-fa-row:hover .bh-fa-rb b { color: var(--bh-red); }

.bh-fa-go { color: var(--bh-muted); opacity: .6; transition: transform .18s ease, opacity .18s ease; }
.bh-fa-row:hover .bh-fa-go { transform: translateX(3px); opacity: 1; color: var(--bh-red); }

.bh-fa-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    padding: 12px;
    border-top: 1px solid var(--bh-line);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bh-ink);
    text-decoration: none;
    transition: color .18s ease;
}
.bh-fa-all svg { width: 16px; height: 16px; transition: transform .18s ease; }
.bh-fa-all:hover { color: var(--bh-red); }
.bh-fa-all:hover svg { transform: translateX(3px); }

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

/* The panel narrows before it wraps, so the two-column composition survives as
   far down as it usefully can. */
@media (max-width: 1180px) {
    .bh-fa-in { grid-template-columns: minmax(0, 1fr) 290px; }
    .bh-fa-tx { max-width: 30ch; }
}

/* Stacked. The scrim turns vertical, because a left-to-right fade under a
   full-width column would leave the copy sitting on the picture. */
@media (max-width: 900px) {
    .bh-fa-in {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        min-height: 0;
    }
    .bh-fa-tx { max-width: 46ch; }
    .bh-fa::before {
        background: linear-gradient(
            180deg,
            var(--bh-card) 0%,
            color-mix(in srgb, var(--bh-card) 88%, transparent) 46%,
            color-mix(in srgb, var(--bh-card) 70%, transparent) 100%
        );
    }
    /* At this width the artwork is behind a near-solid scrim on both halves,
       so it stops earning its bandwidth. */
    .bh-fa-art { opacity: .28; }
}

@media (max-width: 560px) {
    .bh-fa { margin: 20px 0; border-radius: 16px; }
    .bh-fa-in { padding: 24px 16px; }
    .bh-fa-t { font-size: clamp(23px, 6.6vw, 30px); }
    .bh-fa-meta { gap: 6px 14px; font-size: 12.5px; }
    .bh-fa-panel { padding: 8px; }
    .bh-fa-row { grid-template-columns: 46px minmax(0, 1fr) 14px; gap: 10px; }
    .bh-fa-thumb { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .bh-fa-go,
    .bh-fa-all svg { transition: none; }
    .bh-fa-row:hover .bh-fa-go,
    .bh-fa-all:hover svg { transform: none; }
}

/* =============================================================================
   NEWSLETTER — rebuilt to the supplied reference
   -----------------------------------------------------------------------------
   One large rounded card: the pitch, the form and the benefit strip on the left,
   the artwork bleeding to the card's right edge.

   Written after the older `.bh-news*` rules on purpose. Those styled a
   two-column band with a pill-shaped single-field form, and several of them are
   DESCENDANT selectors (`.bh-news h2`, `.bh-news p`, `.bh-news-form input`)
   that still reach this markup. Everything they set is restated here rather
   than deleted in place, so the older band's rules cannot half-apply.

   Colour is entirely --bh-* tokens, which homepage.css already redefines for
   body.theme-dark, so both themes resolve without duplicated rules.
   ============================================================================= */

.bh-news {
    padding: clamp(28px, 3vw, 48px) 0;
    background: none;
    border: 0;
}
.bh-news::before { content: none; }

.bh-news-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 34%, 560px);
    align-items: stretch;
    border: 1px solid var(--bh-line);
    border-radius: clamp(20px, 2vw, 34px);
    background: var(--bh-card);
    box-shadow: var(--bh-shadow-md);
}

.bh-news.no-art .bh-news-card { grid-template-columns: minmax(0, 1fr); }

.bh-news-main { padding: clamp(26px, 3vw, 54px); min-width: 0; }

/* ── Wordmark ─────────────────────────────────────────────────────────── */

.bh-news-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: clamp(20px, 2.4vw, 38px); }
.bh-news-brand-mk {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--bh-red-grad);
    color: #fff;
    font-size: 26px; font-weight: 900; line-height: 1;
    box-shadow: var(--bh-shadow-red);
}
.bh-news-brand-tx { display: flex; flex-direction: column; line-height: 1.05; }
.bh-news-brand-tx b { font-size: 19px; font-weight: 900; letter-spacing: -.02em; color: var(--bh-ink); }
.bh-news-brand-tx i { font-size: 19px; font-weight: 900; font-style: normal; letter-spacing: -.02em; color: var(--bh-red); }

/* ── Pitch ────────────────────────────────────────────────────────────── */

.bh-news .bh-news-t {
    margin: 0;
    font-size: clamp(27px, 3.4vw, 46px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.032em;
    color: var(--bh-ink);
    text-wrap: balance;
}
/* The second line is the red half of the reference. A span, so the section
   still has exactly one h2. */
.bh-news .bh-news-t span { display: block; color: var(--bh-red); }

.bh-news .bh-news-x {
    margin: clamp(14px, 1.4vw, 22px) 0 0;
    max-width: 46ch;
    font-size: clamp(14.5px, 1.1vw, 16.5px);
    line-height: 1.65;
    color: var(--bh-muted);
    text-wrap: pretty;
}

/* ── Form ─────────────────────────────────────────────────────────────── */

/* A grid, not the old pill: three real controls that must each be reachable
   and labelled, which a single rounded strip cannot do. */
.bh-news .bh-news-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
    gap: 12px;
    margin: clamp(20px, 2.4vw, 34px) 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

.bh-news-field { position: relative; min-width: 0; }
.bh-news-fic {
    position: absolute;
    left: 15px; top: 50%;
    transform: translateY(-50%);
    display: grid; place-items: center;
    color: var(--bh-muted-2, var(--bh-muted));
    pointer-events: none;
}

.bh-news .bh-news-form input {
    width: 100%;
    height: 56px;
    padding: 0 16px 0 44px;
    border: 1px solid var(--bh-line);
    border-radius: 14px;
    background: var(--bh-card);
    color: var(--bh-ink);
    font: inherit;
    font-size: 15px;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.bh-news .bh-news-form input::placeholder { color: var(--bh-muted-2, var(--bh-muted)); }
.bh-news .bh-news-form input:focus {
    outline: none;
    border-color: var(--bh-red);
    box-shadow: 0 0 0 4px rgba(229, 27, 35, .12);
}

.bh-news .bh-news-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 30px;
    border: 0;
    border-radius: 14px;
    background: var(--bh-red-grad);
    color: #fff;
    font: inherit;
    font-size: 15.5px;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--bh-shadow-red);
    transition: transform .18s ease, filter .18s ease;
}
.bh-news .bh-news-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.bh-news .bh-news-btn:disabled { opacity: .7; cursor: default; transform: none; }
.bh-news .bh-news-btn svg { transition: transform .18s ease; }
.bh-news .bh-news-btn:hover svg { transform: translateX(3px); }
.bh-news .bh-news-btn:focus-visible { outline: 3px solid var(--bh-ink); outline-offset: 2px; }

.bh-news .bh-news-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    text-align: left;
    font-size: 13.5px;
    color: var(--bh-muted);
}
.bh-news .bh-news-note svg { flex: none; color: var(--bh-red); }

.bh-news .bh-news-msg { margin: 10px 0 0; font-size: 13px; font-weight: 650; }

/* ── Benefit strip ────────────────────────────────────────────────────── */

/* A tinted panel with hairline dividers, as in the reference. `auto-fit` so a
   list of three or five still fills it — the count is admin-controlled. */
.bh-news-perks {
    list-style: none;
    margin: clamp(24px, 2.8vw, 40px) 0 0;
    padding: clamp(16px, 1.6vw, 24px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bh-line-soft, var(--bh-line)) 46%, transparent);
    border: 1px solid var(--bh-line);
}
.bh-news-perks li {
    min-width: 0;
    padding-left: clamp(14px, 1.4vw, 22px);
    border-left: 1px solid var(--bh-line);
}
/* The first item has nothing to its left to divide it from. */
.bh-news-perks li:first-child { padding-left: 0; border-left: 0; }

.bh-news-perk-ic {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--bh-red-tint);
    color: var(--bh-red);
}
.bh-news-perks b {
    display: block;
    font-size: 14.5px; font-weight: 800;
    color: var(--bh-ink);
    margin-bottom: 5px;
}
.bh-news-perks span {
    display: block;
    font-size: 13px; line-height: 1.5;
    color: var(--bh-muted);
}

/* ── Artwork ──────────────────────────────────────────────────────────── */

.bh-news-art {
    position: relative;
    min-height: 100%;
    /* A soft brand wash behind the render. The artwork is CONTAINED rather than
       cropped, so it letterboxes; without a ground of its own the spare space
       would read as a blank half of the card. */
    background:
        radial-gradient(78% 62% at 62% 42%, rgba(229, 27, 35, .085) 0%, transparent 72%),
        var(--bh-card);
}

/*
 * CONTAIN, not cover.
 *
 * The shipped render is 1140x570 — a 2:1 landscape — and this column is
 * portrait. `cover` scaled it to fill the height and cropped ~62% of the width
 * away, which threw out the red "B" entirely and left the bottom of a
 * controller and a podium: the one element that makes the picture Barlin's was
 * the first thing cut. Contain keeps the whole composition whatever aspect an
 * admin later uploads.
 */
.bh-news-art img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
    padding: clamp(10px, 1.6vw, 26px);
    display: block;
}

/* Feathers the artwork into the copy instead of butting it against a hard
   vertical seam. */
.bh-news-art::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, var(--bh-card) 0%, transparent 22%);
    pointer-events: none;
}

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

@media (max-width: 1180px) {
    .bh-news-card { grid-template-columns: minmax(0, 1fr) clamp(280px, 32%, 420px); }
    .bh-news .bh-news-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bh-news .bh-news-btn { grid-column: 1 / -1; }
}

/* Stacked. The artwork moves above the copy and takes a fixed height, because
   a `min-height:100%` column has nothing to fill once the grid is one column. */
@media (max-width: 900px) {
    .bh-news-card { grid-template-columns: minmax(0, 1fr); }
    .bh-news-art { order: -1; min-height: 0; height: clamp(200px, 34vw, 300px); }
    .bh-news-art img { position: static; height: 100%; }
    .bh-news-art::before {
        background: linear-gradient(180deg, transparent 55%, var(--bh-card) 100%);
    }
}

@media (max-width: 620px) {
    .bh-news { padding: 20px 0; }
    .bh-news-card { border-radius: 18px; }
    .bh-news-main { padding: 22px 18px; }
    .bh-news .bh-news-form { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .bh-news .bh-news-form input { height: 52px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
    .bh-news .bh-news-btn { height: 52px; }
    .bh-news .bh-news-note { text-align: left; }

    /* Two up, and the dividers become horizontal — a vertical rule between two
       stacked rows separates nothing. */
    .bh-news-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .bh-news-perks li { padding-left: 0; border-left: 0; }
    .bh-news-perk-ic { width: 36px; height: 36px; margin-bottom: 9px; }
}

@media (max-width: 380px) {
    .bh-news-perks { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .bh-news .bh-news-btn,
    .bh-news .bh-news-btn svg { transition: none; }
    .bh-news .bh-news-btn:hover { transform: none; }
    .bh-news .bh-news-btn:hover svg { transform: none; }
}