/*
Theme Name:        Brands.Ng
Theme URI:         https://brands.ng/
Author:            Brands.Ng
Author URI:        https://brands.ng/
Description:       A premium, editorial theme for Brands.Ng — Nigeria's Business Intelligence Platform. Weekly-newspaper structure (white canvas, rationed accent used as ink, hairline rules, serif headlines over sans chrome), coloured in the Brands.Ng palette. Purpose-built to wrap the Brands Intelligence Platform plugin cleanly; the plugin renders its own pages inside this theme's header/footer shell.
Version:           2.3.7
Requires at least: 6.0
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       brandsng
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
    --bn-navy:        #262578;
    --bn-navy-dk:     #1b1a5c;
    --bn-green:       #00BF62;
    --bn-maroon:      #970C11;
    --bn-maroon-dk:   #7a0a0e;

    --ink:            #121212;
    --ink-70:         #3d3d3d;
    --ink-50:         #6b6b6b;
    --ink-30:         #9a9a9a;
    --rule:           #e2e2df;
    --rule-strong:    #c9c9c4;
    --paper:          #f6f6f4;
    --paper-2:        #efefeb;
    --canvas:         #ffffff;

    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    --wrap: 1440px;
    --gut: 24px;
    --radius: 3px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink-70);
    background: var(--canvas);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    width: 100%;
    max-width: 100%;
}

a {
    color: var(--ink);
    text-decoration: none;
}

a:hover {
    color: var(--bn-maroon);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--serif);
    color: var(--ink);
    line-height: 1.18;
    font-weight: 700;
    margin: 0 0 .4em;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 1.1em;
}

.bn-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
}

/* Skip link */

.bn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--bn-navy);
    color: #fff;
    padding: 10px 16px;
    z-index: 200;
}

.bn-skip:focus {
    left: 8px;
    top: 8px;
    color: #fff;
}

/* Keyboard focus */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--bn-navy);
    outline-offset: 2px;
}

/* ============================================================
   MASTHEAD
   ============================================================ */

.bn-topbar {
    background: var(--ink);
    color: #fff;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .04em;
}

.bn-topbar .bn-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 34px;
}

.bn-topbar a {
    color: rgba(255,255,255,.82);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 400;
}

.bn-topbar a:hover {
    color: #fff;
}

.bn-topbar__date {
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bn-topbar__links {
    display: flex;
    gap: 20px;
}

.bn-masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--canvas);
    border-bottom: 1px solid var(--rule);
}

.bn-masthead__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.bn-masthead__navrow {
    border-top: 1px solid var(--rule);
    position: relative;
}

.bn-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.bn-brand img {
    height: 44px;
    width: auto;
}

.bn-brand__text {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.bn-brand__text .dot {
    color: var(--bn-maroon);
}

.bn-brand__text .ng {
    color: var(--bn-green);
}

/* ============================================================
   PRIMARY NAVIGATION
   ============================================================ */

.bn-nav .bn-wrap {
    display: flex;
    justify-content: flex-start;
    max-width: 100%;
    padding: 0 24px;
}

.bn-nav ul.bn-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 26px;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
}

.bn-nav ul.bn-menu::-webkit-scrollbar {
    display: none;
}

.bn-nav ul.bn-menu > li:last-child {
    padding-right: 4px;
}

.bn-nav ul.bn-menu > li {
    position: static;
    flex: 0 0 auto;
}

.bn-nav a {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .015em;
    padding: 13px 0;
    position: relative;
    white-space: nowrap;
    display: block;
}

.bn-nav a:hover {
    color: var(--bn-maroon);
}

.bn-menu__caret {
    font-size: 10px;
    color: var(--ink-50);
}

.bn-nav .current-menu-item > a::after,
.bn-nav ul.bn-menu > li > a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--bn-maroon);
}

/* ============================================================
   MEGA MENU
   ============================================================ */

.bn-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 34px rgba(0,0,0,.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s;
    z-index: 130;
}

.bn-menu__item--mega {
    position: static;
}

.bn-menu__item--mega:hover > .bn-mega,
.bn-menu__item--mega:focus-within > .bn-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bn-mega__inner {
    padding: 22px var(--gut) 26px;
}

.bn-mega__cols {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 210px);
    gap: 20px 28px;
    justify-content: start;
}

.bn-mega__col {
    min-width: 0;
}

.bn-mega__col-title {
    display: block;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bn-maroon);
    padding: 0 0 6px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--bn-maroon);
}

.bn-mega__col-title::after {
    display: none;
}

.bn-mega__posts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bn-mega__posts li {
    border-bottom: 1px solid var(--rule);
}

.bn-mega__posts li:last-child {
    border-bottom: none;
}

.bn-mega__posts a {
    display: block;
    padding: 6px 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.25;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
}

.bn-mega__posts a:hover {
    color: var(--bn-maroon);
}

.bn-mega__posts a::after {
    display: none;
}

.bn-mega__col:only-child {
    max-width: 260px;
}

.bn-nav__fallback {
    color: var(--ink-50);
    font-size: 14px;
}

/* ============================================================
   SIMPLE DROPDOWN MENU (Nairametrics-style)
   Child menu items render as a clean vertical dropdown list.
   ============================================================ */
.bn-menu__item--has-dropdown {
    position: relative;
}
.bn-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--rule);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.bn-menu__item--has-dropdown:hover > .bn-dropdown,
.bn-menu__item--has-dropdown:focus-within > .bn-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.bn-dropdown__item {
    display: block;
}
.bn-dropdown__item a {
    display: block;
    padding: 10px 18px;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    white-space: nowrap;
    border-bottom: 1px solid var(--rule);
}
.bn-dropdown__item:last-child a {
    border-bottom: none;
}
.bn-dropdown__item a:hover {
    background: var(--paper);
    color: var(--bn-maroon);
}
.bn-dropdown__item a::after {
    display: none;
}

/* ============================================================
   MASTHEAD ACTIONS
   ============================================================ */

.bn-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.bn-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
    padding: 6px;
    display: inline-flex;
}

.bn-search-btn:hover {
    color: var(--bn-maroon);
}

.bn-subscribe {
    background: var(--bn-navy);
    color: #fff;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 10px 20px;
    border-radius: 20px;
    white-space: nowrap;
}

.bn-subscribe:hover {
    background: var(--bn-navy-dk);
    color: #fff;
}

.bn-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--ink);
}

/* ============================================================
   SECTION FLAG
   ============================================================ */

.bn-flag {
    border-top: 2px solid var(--bn-maroon);
    padding-top: 8px;
    margin: 0 0 20px;
}

.bn-flag__label {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bn-maroon);
}

/* ============================================================
   CONTENT
   ============================================================ */

.bn-main {
    padding: 40px 24px 64px;
    min-height: 50vh;
}

.bn-layout {
    display: grid;
    grid-template-columns: minmax(0, 720px) 1fr 300px;
    gap: 0;
    column-gap: 48px;
}
/* Archive / search / blog-index layout: a wide content area (for the
   card grid) with a right sidebar. Overrides the narrow single-post
   reading-column treatment so archives use the full width. */
.bn-layout--archive {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 48px;
}
.bn-layout--archive > .bn-primary {
    grid-column: 1;
    border-left: 0;
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.bn-layout--archive > .bn-sidebar {
    grid-column: 2;
}
/* Dual-sidebar layout: left rail | article | right rail. Used when the
   Left Sidebar widget area has content — fills the wasted white space. */
.bn-layout--dual {
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    column-gap: 40px;
}
.bn-layout--dual > .bn-sidebar--left { grid-column: 1; }
.bn-layout--dual > .bn-primary { grid-column: 2; }
.bn-layout--dual > .bn-sidebar:not(.bn-sidebar--left) { grid-column: 3; }
.bn-layout--dual > .bn-sidebar--left {
    min-width: 0;
    /* Natural scroll: the whole rail flows with the article so every
       banner is seen as the reader scrolls. No sticky (which would pin
       the stack and hide the lower banners) and no internal scrollbar. */
}
/* The middle column is an empty spacer that pushes the sidebar to the
   right edge while the article stays a comfortable reading width. */
.bn-layout:not(.bn-layout--dual):not(.bn-layout--archive) > .bn-primary { grid-column: 1; }
.bn-layout:not(.bn-layout--dual):not(.bn-layout--archive) > .bn-sidebar { grid-column: 3; }
/* Clean vertical rules framing the article reading column (TechCrunch
   style). Mobile media query below removes these. */
.bn-primary {
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    padding-left: 40px;
    padding-right: 40px;
}

.bn-layout--full {
    display: block;
}

.bn-sidebar {
    min-width: 300px;
    align-self: stretch;
}

.bn-article__eyebrow {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bn-maroon);
    margin-bottom: 12px;
    display: inline-block;
}

.bn-article__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 14px;
}

.bn-article__meta {
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink-50);
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}

.bn-article__meta a {
    color: var(--ink-50);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bn-article__figure {
    margin: 0 0 26px;
}

.bn-article__figure figcaption {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--ink-50);
    padding-top: 8px;
}

/* Article summary */

.bn-summary {
    border-left: 3px solid var(--bn-maroon);
    padding: 2px 0 2px 20px;
    margin: 0 0 26px;
}

.bn-summary__label {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bn-maroon);
    display: block;
    margin-bottom: 6px;
}

.bn-summary p {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0;
}

/* Prose */

.bn-prose {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.75;
    color: #1a1a1a;
}

.bn-prose p {
    margin-bottom: 1.2em;
}

.bn-prose h2 {
    font-size: 27px;
    margin: 1.4em 0 .5em;
}

.bn-prose h3 {
    font-size: 22px;
    margin: 1.3em 0 .5em;
}

.bn-prose a {
    color: var(--bn-maroon);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bn-prose blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--bn-maroon);
    font-size: 22px;
    line-height: 1.4;
    color: var(--ink);
    font-style: normal;
}

.bn-prose img {
    margin: 1.4em 0;
}

.bn-prose ul,
.bn-prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.3em;
}

.bn-prose li {
    margin-bottom: .4em;
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

.bn-home {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 34px 40px 60px;
}

.bn-home__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}

.bn-home__main {
    min-width: 0;
}

.bn-home__rail {
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-self: stretch;
}

.bn-home__rail .widget,
.bn-home__rail .bn-rail-block {
    width: 100%;
    margin: 0 0 28px;
}

.bn-home__rail .widget:last-child,
.bn-home__rail .bn-rail-block:last-child {
    margin-bottom: 0;
}

/* Shared eyebrow */

.bn-eyebrow {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bn-maroon);
    display: inline-block;
    margin-bottom: 8px;
}

.bn-eyebrow--light {
    color: #ff8f93;
}

/* Hero */

.bn-hero {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--rule-strong);
}

.bn-hero__card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: var(--ink);
    color: #fff;
}

.bn-hero__img {
    overflow: hidden;
}

.bn-hero__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 300px;
}

.bn-hero__panel {
    padding: 36px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bn-hero__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.15;
    color: #fff;
    margin: 6px 0 12px;
}

.bn-hero__card:hover .bn-hero__title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bn-hero__deck {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255,255,255,.8);
    margin: 0;
}

/* Mixed section */

.bn-mixed {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--rule-strong);
}

.bn-mixed__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.bn-mixed__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
}

.bn-mixed__lead {
    display: block;
}

.bn-mixed__lead-img {
    aspect-ratio: 16/11;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--rule);
    margin-bottom: 14px;
}

.bn-mixed__lead-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bn-mixed__lead-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 27px;
    line-height: 1.15;
    margin-bottom: 10px;
}

.bn-mixed__lead:hover .bn-mixed__lead-title {
    color: var(--bn-maroon);
}

.bn-mixed__lead-deck {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink-70);
    line-height: 1.5;
    margin: 0;
}

.bn-mixed__side {
    display: flex;
    flex-direction: column;
}

.bn-mixed__story {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 18px;
    padding: 0 0 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}

.bn-mixed__side .bn-mixed__story:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.bn-mixed__story-text {
    min-width: 0;
}

.bn-mixed__story-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 8px;
}

.bn-mixed__story:hover .bn-mixed__story-title {
    color: var(--bn-maroon);
}

.bn-mixed__story-deck {
    font-family: var(--serif);
    font-size: 14.5px;
    color: var(--ink-50);
    line-height: 1.45;
    margin: 0;
}

.bn-mixed__story-img {
    align-self: start;
}

.bn-mixed__story-img img {
    width: 150px;
    height: 110px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--rule);
}

/* Homepage sections */

.bn-section {
    margin-bottom: 40px;
}

.bn-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.bn-section__all {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--bn-maroon);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Cards */

/* Hairline card grid: 1px gaps reveal the rule-coloured container
   background as thin lines between every card (vertical + horizontal).
   Cards sit on white with small internal padding. Per-card borders
   removed so they don't double up with the grid hairlines. */
.bn-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.bn-cards--3 {
    grid-template-columns: repeat(3, 1fr);
}

.bn-cards--4 {
    grid-template-columns: repeat(4, 1fr);
}

.bn-cards--4 .bn-card__excerpt {
    display: none;
}

.bn-cards--4 .bn-card__title {
    font-size: 18px;
}

.bn-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 14px;
}

.bn-card__thumb {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--paper);
    margin-bottom: 14px;
}

.bn-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bn-card__eyebrow {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bn-maroon);
    margin-bottom: 8px;
}

.bn-card__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.22;
    margin-bottom: 8px;
}

.bn-card__title a:hover {
    color: var(--bn-maroon);
}

.bn-card__excerpt {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-50);
    line-height: 1.55;
}

.bn-card__meta {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-30);
    margin-top: auto;
    padding-top: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Reviews */

.bn-reviews__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.bn-review {
    display: block;
    background: #fff;
    padding: 22px 22px 24px;
}

.bn-review:hover {
    background: var(--paper);
}

.bn-review__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.bn-review__logo img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border: 1px solid var(--rule);
    background: #fff;
    display: block;
}

.bn-review__co {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bn-review__name {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    line-height: 1.2;
}

.bn-review:hover .bn-review__name {
    color: var(--bn-maroon);
}

.bn-review__industry {
    font-family: var(--sans);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-50);
    margin-top: 3px;
}

.bn-review__verdict {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.bn-review__score {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

.bn-review__count {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-50);
}

.bn-review__snippet {
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-70);
    margin: 0;
}

.bn-stars {
    color: var(--bn-maroon);
    font-size: 15px;
    letter-spacing: 1px;
}

.bn-stars__empty {
    color: var(--rule-strong);
}

.bn-stars__half {
    position: relative;
    color: var(--rule-strong);
}

.bn-stars__half::before {
    content: "★";
    position: absolute;
    left: 0;
    width: 50%;
    overflow: hidden;
    color: var(--bn-maroon);
}

/* Most read */

.bn-mostread__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bn-mostread__item {
    display: flex;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}

.bn-mostread__item:last-child {
    border-bottom: none;
}

.bn-mostread__num {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 20px;
    color: var(--bn-maroon);
    line-height: 1;
    flex: 0 0 auto;
    min-width: 20px;
    font-variant-numeric: tabular-nums;
}

.bn-mostread__item a {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ink);
}

.bn-mostread__item a:hover {
    color: var(--bn-maroon);
}

/* ============================================================
   MAGAZINE MASTHEAD
   ============================================================ */

.bn-mag {
    margin-bottom: 48px;
}

.bn-mag__grid {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(300px,1fr) minmax(210px,.66fr);
    gap: 0 28px;
}

.bn-mag__col--middle,
.bn-mag__col--rail {
    border-left: 1px solid var(--rule);
    padding-left: 28px;
}

.bn-mag-lead__img {
    aspect-ratio: 16/9;
    overflow: hidden;
    display: block;
}

.bn-mag-lead__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bn-mag-lead__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.6rem,2.4vw,2.4rem);
    line-height: 1.08;
}

.bn-mag-lead__title a {
    color: var(--ink);
}

.bn-mag-lead__title a:hover {
    color: var(--bn-maroon);
}

.bn-mag-lead__deck {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink-70);
    line-height: 1.5;
}

.bn-mag__read {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-50);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.bn-mag-item {
    display: grid;
    grid-template-columns: minmax(0,1fr) 92px;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
}

.bn-mag-item:last-child {
    border-bottom: none;
}

.bn-mag-item__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    margin: 6px 0;
}

.bn-mag-item__thumb {
    aspect-ratio: 1;
    overflow: hidden;
}

.bn-mag-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bn-chrono {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--rule-strong);
}

.bn-chrono__item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
}

.bn-chrono__item:last-child {
    border-bottom: none;
}

.bn-chrono__num {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 20px;
    color: var(--bn-maroon);
    font-variant-numeric: tabular-nums;
}

.bn-chrono__body a {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    color: var(--ink);
    display: block;
}

.bn-chrono__body a:hover {
    color: var(--bn-maroon);
}

.bn-chrono__date {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--ink-50);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ============================================================
   HEADER AD REGIONS
   ============================================================ */

.bn-ad {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.bn-ad:empty {
    display: none;
}

.bn-ad__label {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-30);
    margin-bottom: 6px;
    line-height: 1;
}

.bn-ad--leader {
    width: 100%;
    padding: 14px 0;
    background: var(--paper);
}

.bn-ad--leader .bn-ad__slot {
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bn-ad--leader .bn-ad__slot img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   FULL-WIDTH HEADER AD (FIXED)
   ============================================================ */

/* Base full-width ad rules */
.bn-ad--leader {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: hidden;
    line-height: 0;
}

.bn-ad--leader:empty {
    display: none;
}

/*
 * Applies to homepage, single posts, pages and ads nested
 * inside the homepage/content wrappers.
 */
.bn-content .bn-ad--leader,
.bn-home .bn-ad--leader,
.home .bn-ad--leader,
.front-page .bn-ad--leader {
    position: relative;
    left: auto;
    right: auto;

    width: 100vw;
    max-width: 100vw;

    /* Scrollbar-proof full-bleed: translateX centres a 100vw element
       reliably even when a vertical scrollbar is present (the old
       calc(50% - 50vw) margin left gaps on the homepage). No overflow
       hidden, which was clipping the bleed. */
    margin: 0 0 0 50%;
    transform: translateX(-50%);

    padding: 0;
    background: transparent;
    line-height: 0;
}

.bn-content .bn-ad--leader .bn-ad__label,
.bn-home .bn-ad--leader .bn-ad__label,
.home .bn-ad--leader .bn-ad__label,
.front-page .bn-ad--leader .bn-ad__label {
    display: none;
}

.bn-content .bn-ad--leader .bn-ad__slot,
.bn-home .bn-ad--leader .bn-ad__slot,
.home .bn-ad--leader .bn-ad__slot,
.front-page .bn-ad--leader .bn-ad__slot {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;

    margin: 0;
    padding: 0;
    line-height: 0;
}

.bn-content .bn-ad--leader .bn-ad__slot > *,
.bn-home .bn-ad--leader .bn-ad__slot > *,
.home .bn-ad--leader .bn-ad__slot > *,
.front-page .bn-ad--leader .bn-ad__slot > * {
    display: block;
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
    border: 0;
    line-height: 0;
}

.bn-content .bn-ad--leader img,
.bn-home .bn-ad--leader img,
.home .bn-ad--leader img,
.front-page .bn-ad--leader img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;

    margin: 0;
    padding: 0;
    border: 0;
}

/* Widget / ad network elements */
.bn-ad--leader .widget,
.bn-ad--leader .textwidget,
.bn-ad--leader ins,
.bn-ad--leader iframe {
    display: block;
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
}

.bn-ad--leader iframe {
    min-width: 100%;
}

/* In-content ads */

.bn-ad--incontent {
    margin: 34px 0;
}

/* Print */

@media print {
    .bn-ad {
        display: none !important;
    }
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

.bn-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18,18,18,.6);
    z-index: 300;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 18vh;
}

.bn-search-overlay.is-open {
    display: flex;
}

.bn-search-overlay__box {
    background: #fff;
    width: min(640px, 92vw);
    padding: 30px;
}

.bn-search-overlay__box form {
    display: flex;
    border-bottom: 2px solid var(--bn-maroon);
}

.bn-search-overlay__box input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--serif);
    font-size: 24px;
    padding: 8px 0;
    color: var(--ink);
}

.bn-search-overlay__box button {
    background: none;
    border: none;
    font-family: var(--sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bn-maroon);
    cursor: pointer;
}

.bn-search-overlay__hint {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--ink-50);
    margin-top: 14px;
}

/* ============================================================
   PAGE LAYOUTS
   ============================================================ */

.bn-page-header {
    margin-bottom: 32px;
}

.bn-page-header__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 34px;
}

.bn-page-narrow {
    max-width: 760px;
    margin: 0 auto;
}

.bn-page-fullwidth {
    width: 100%;
}

.bn-page-fullwidth > .bn-pagelinks {
    padding-top: 20px;
    padding-bottom: 40px;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.bn-sidebar .widget {
    margin-bottom: 34px;
}

.bn-sidebar .widget-title {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink);
    border-top: 2px solid var(--bn-maroon);
    padding-top: 8px;
    margin: 0 0 14px;
}

.bn-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bn-sidebar li {
    border-bottom: 1px solid var(--rule);
}

.bn-sidebar li a {
    display: block;
    padding: 9px 0;
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
}

.bn-sidebar li a:hover {
    color: var(--bn-maroon);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.bn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .03em;
    padding: 12px 26px;
    border-radius: 22px;
    border: 1.5px solid transparent;
    cursor: pointer;
}

.bn-btn--primary {
    background: var(--bn-navy);
    color: #fff;
}

.bn-btn--primary:hover {
    background: var(--bn-navy-dk);
    color: #fff;
}

.bn-btn--ghost {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}

.bn-btn--ghost:hover {
    border-color: var(--bn-maroon);
    color: var(--bn-maroon);
}

/* ============================================================
   PAGINATION
   ============================================================ */

.bn-pagination {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
    display: flex;
    gap: 8px;
    font-family: var(--sans);
}

.bn-pagination .page-numbers {
    display: inline-flex;
    min-width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    padding: 0 12px;
}

.bn-pagination .page-numbers.current {
    background: var(--bn-navy);
    color: #fff;
    border-color: var(--bn-navy);
}

.bn-pagination .page-numbers:hover:not(.current) {
    border-color: var(--bn-maroon);
    color: var(--bn-maroon);
}

/* ============================================================
   FOOTER
   ============================================================ */

.bn-footer {
    background: var(--ink);
    color: rgba(255,255,255,.7);
    margin-top: 60px;
    font-family: var(--sans);
}

.bn-footer__top {
    padding: 52px 0 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}

.bn-footer__brand .bn-brand__text {
    color: #fff;
}

.bn-footer__brand p {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255,255,255,.6);
    max-width: 280px;
    margin-top: 14px;
}

.bn-footer__col h4 {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    margin: 0 0 14px;
}

.bn-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bn-footer__col li {
    margin-bottom: 9px;
}

.bn-footer__col a {
    color: rgba(255,255,255,.7);
    font-size: 14px;
}

.bn-footer__col a:hover {
    color: #fff;
}

.bn-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.14);
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.bn-footer__bottom p {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255,255,255,.5);
}

.bn-footer__social {
    display: flex;
    gap: 16px;
}

.bn-footer__social a {
    color: rgba(255,255,255,.7);
}

.bn-footer__social a:hover {
    color: #fff;
}

/* ============================================================
   RESPONSIVE: TABLETS
   ============================================================ */

@media (max-width: 1100px) {
    .bn-mag__grid {
        grid-template-columns: minmax(0,1.4fr) minmax(280px,1fr);
    }

    .bn-mag__col--rail {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid var(--rule-strong);
        margin-top: 28px;
        padding: 24px 0 0;
    }
}

@media (max-width: 1023px) {
    .bn-home__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bn-home__rail {
        min-width: 0;
        margin-top: 40px;
    }

    .bn-hero__card {
        grid-template-columns: 1fr;
    }

    .bn-hero__img img {
        min-height: 220px;
    }

    .bn-mixed__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .bn-cards--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bn-reviews__grid {
        grid-template-columns: 1fr;
    }

    .bn-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .bn-layout--dual {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .bn-layout--archive {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .bn-layout--archive > .bn-primary,
    .bn-layout--archive > .bn-sidebar {
        grid-column: auto;
    }
    .bn-layout > .bn-primary,
    .bn-layout > .bn-sidebar,
    .bn-layout--dual > .bn-sidebar--left,
    .bn-layout--dual > .bn-primary,
    .bn-layout--dual > .bn-sidebar {
        grid-column: auto;
    }
    /* Article first on mobile, sidebars below (readers before widgets). */
    .bn-layout--dual > .bn-primary { order: 1; }
    .bn-layout--dual > .bn-sidebar { order: 2; }
    .bn-layout--dual > .bn-sidebar--left { order: 3; }
    .bn-layout--dual { display: flex; flex-direction: column; }

    /* Drop the framing side-rules on mobile — they'd squeeze the text
       on narrow screens. Reading column goes full width. */
    .bn-primary {
        border-left: 0;
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .bn-sidebar {
        border-top: 1px solid var(--rule);
        padding-top: 32px;
    }

    .bn-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .bn-cards--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bn-footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    /* Directory grids remain two columns */
    .bn-directory .bn-cards,
    .bn-directory .bn-cards--4,
    .bn-directory .bn-cards--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }
}

/* ============================================================
   RESPONSIVE: MOBILE NAVIGATION
   ============================================================ */

@media (max-width: 860px) {
    .bn-lead {
        grid-template-columns: 1fr !important;
    }

    .bn-masthead__navrow {
        display: none;
    }

    .bn-masthead__navrow.is-open {
        display: block;
    }

    .bn-nav .bn-wrap {
        display: block;
    }

    .bn-nav ul.bn-menu {
        flex-direction: column;
        gap: 0;
        overflow: visible;
    }

    .bn-nav ul.bn-menu > li {
        flex: 1 1 auto;
    }

    .bn-nav li {
        border-bottom: 1px solid var(--rule);
    }

    .bn-nav li:last-child {
        border-bottom: none;
    }

    .bn-nav a {
        display: block;
        padding: 12px 0;
    }

    .bn-mega {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--rule);
    }

    .bn-mega__inner {
        padding: 8px 0 8px 16px;
    }

    .bn-mega__cols {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bn-menu__caret {
        display: none;
    }

    /* Mobile: dropdowns become a static, slightly indented list under
       their parent (no floating panel). */
    .bn-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--rule);
        min-width: 0;
        padding: 0;
    }
    .bn-dropdown__item a {
        padding: 10px 0 10px 16px;
        white-space: normal;
    }

    .bn-nav-toggle {
        display: inline-flex;
    }

    .bn-article__title {
        font-size: 30px;
    }

    .bn-topbar__links a:not(:last-child) {
        display: none;
    }

    .bn-home {
        padding-left: 20px;
        padding-right: 20px;
    }

    .bn-mag__grid {
        display: block;
    }

    .bn-mag__col--middle,
    .bn-mag__col--rail {
        border-left: 0;
        padding-left: 0;
        margin-top: 34px;
    }
}

/* ============================================================
   RESPONSIVE: PHONES
   ============================================================ */

@media (max-width: 560px) {
    body {
        font-size: 16px;
    }

    /* Slightly bolder titles on mobile only — 400 → 600 (semibold) for
       better readability at small sizes. Desktop stays the elegant 400. */
    .bn-card__title,
    .bn-article__title,
    .bn-mag-lead__title,
    .bn-mag-item__title,
    .bn-chrono__body a {
        font-weight: 400;
    }

    .bn-home {
        padding: 20px 16px 40px;
    }

    .bn-cards,
    .bn-cards--4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 14px;
    }

    .bn-cards--4 .bn-card__title,
    .bn-cards .bn-card__title {
        font-size: 15px;
        line-height: 1.2;
    }

    .bn-card__eyebrow {
        font-size: 10.5px;
        margin-bottom: 5px;
    }

    .bn-card__thumb {
        margin-bottom: 9px;
        aspect-ratio: 16/10;
    }

    .bn-card__excerpt {
        display: none;
    }

    .bn-card__meta {
        font-size: 10.5px;
        padding-top: 8px;
    }

    .bn-flag__label {
        font-size: 12px;
    }

    .bn-section {
        margin-bottom: 30px !important;
    }

    .bn-lead {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding-bottom: 24px !important;
        margin-bottom: 24px !important;
    }

    .bn-lead__main h1 {
        font-size: 24px !important;
        line-height: 1.18 !important;
    }

    .bn-footer__top {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .bn-masthead__top {
        min-height: 58px;
        gap: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .bn-brand__text {
        font-size: 22px;
    }

    .bn-brand img {
        height: 34px;
    }

    .bn-subscribe {
        padding: 8px 14px;
        font-size: 11.5px;
    }

    .bn-topbar {
        display: none;
    }

    .bn-article__title {
        font-size: 26px;
    }

    .bn-prose {
        font-size: 19px;
        line-height: 1.72;
    }

    .bn-summary p {
        font-size: 18px;
    }

    .bn-mostread ol {
        grid-template-columns: 1fr !important;
    }

    .bn-hero {
        margin-bottom: 28px;
        padding-bottom: 28px;
    }

    .bn-hero__panel {
        padding: 20px 18px;
    }

    .bn-hero__title {
        font-size: 22px;
    }

    .bn-hero__img img {
        min-height: 190px;
    }

    .bn-mixed {
        margin-bottom: 28px;
        padding-bottom: 28px;
    }

    .bn-mixed__lead-title {
        font-size: 22px;
    }

    .bn-mixed__story {
        grid-template-columns: 1fr 96px;
        gap: 12px;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .bn-mixed__story-title {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .bn-mixed__story-deck {
        display: none;
    }

    .bn-mixed__story-img img {
        width: 96px;
        height: 72px;
    }

    .bn-cards--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bn-section__all {
        font-size: 11.5px;
    }

    .bn-mag-item {
        grid-template-columns: minmax(0,1fr) 82px;
    }
    .bn-mag-item__thumb {
        width: 82px;
        height: 82px;
        aspect-ratio: 1 / 1;
    }
    .bn-mag-item__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 460px) {
    .bn-mag-item {
        grid-template-columns: minmax(0,1fr) 76px;
    }

    .bn-mag-item__thumb {
        order: 0;
        width: 76px;
        height: 76px;
        aspect-ratio: 1 / 1;
    }
    .bn-mag-item__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 379px) {
    .bn-cards,
    .bn-cards--4 {
        grid-template-columns: 1fr;
    }

    .bn-card__thumb {
        aspect-ratio: 16/9;
    }

    .bn-directory .bn-cards,
    .bn-directory .bn-cards--4,
    .bn-directory .bn-cards--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bn-directory .bn-card__title {
        font-size: 15px;
        line-height: 1.2;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}
/* ── Header ad: force a WordPress Gallery block to behave as a single
   full-width banner. Galleries use a rigid flex layout with is-cropped
   sizing that ignores plain img width rules, so we override it here.
   (Best practice is to use an Image block, not a Gallery, for a banner.) */
.bn-content .bn-ad--leader .wp-block-gallery,
.bn-home .bn-ad--leader .wp-block-gallery,
.home .bn-ad--leader .wp-block-gallery,
.front-page .bn-ad--leader .wp-block-gallery {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 0;
}
.bn-content .bn-ad--leader .wp-block-gallery .wp-block-image,
.bn-home .bn-ad--leader .wp-block-gallery .wp-block-image,
.home .bn-ad--leader .wp-block-gallery .wp-block-image,
.front-page .bn-ad--leader .wp-block-gallery .wp-block-image,
.bn-content .bn-ad--leader figure,
.bn-home .bn-ad--leader figure,
.home .bn-ad--leader figure,
.front-page .bn-ad--leader figure {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    flex-basis: 100% !important;
}
.bn-content .bn-ad--leader .wp-block-gallery img,
.bn-home .bn-ad--leader .wp-block-gallery img,
.home .bn-ad--leader .wp-block-gallery img,
.front-page .bn-ad--leader .wp-block-gallery img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain;
    display: block;
}




/* ── Header ad rotator: safe anti-flash ───────────────────────────
   Each banner is its own widget block:
     .bn-ad__slot > div.widget_media_image > figure.wp-block-image
   Hide every banner-widget AFTER the first so only one paints before
   the rotator JS runs. General-sibling selector = the first is never
   hidden. JS uses inline display styles, which override this cleanly. */
.bn-content > .bn-ad--leader .bn-ad__slot > .widget_media_image ~ .widget_media_image,
.bn-content > .bn-ad--leader .bn-ad__slot > .widget ~ .widget {
    display: none;
}


/* Brands Academy column head: flag left, "See all" link right (matches
   the section heads used elsewhere on the homepage). */
.bn-mag__col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

/* ── Single post: clean vertical rules framing the article column ──
   Thin hairlines on the left and right of the reading column (like
   TechCrunch), with inner padding so text never touches the lines.
   (Placed before the media queries so mobile can override it.) */

/* ============================================================
   AUTHOR PROFILE BOX (author archive)
   ============================================================ */
.bn-author {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: start;
    padding: 0 0 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--rule);
}
.bn-author__avatar {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--rule);
}
.bn-author__img,
.bn-author__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bn-author__name {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 4px 0 0;
    color: var(--ink);
}
.bn-author__role {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bn-maroon);
    margin: 8px 0 0;
}
.bn-author__bio {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-70);
    margin: 16px 0 0;
    max-width: 60ch;
}
.bn-author__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 18px;
}
.bn-author__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    padding: 6px 0;
}
.bn-author__link svg {
    color: var(--bn-maroon);
    flex: 0 0 auto;
}
.bn-author__link:hover {
    color: var(--bn-maroon);
}
.bn-author__articles-head {
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .bn-author {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
        justify-items: center;
    }
    .bn-author__avatar {
        width: 130px;
        height: 130px;
    }
    .bn-author__bio {
        text-align: left;
    }
    .bn-author__meta {
        justify-content: center;
    }
}

/* More Stories (related posts) inside the article column: 2 columns fit
   the ~720px reading width cleanly (3 would squeeze and leave an empty
   orphan cell). Keeps the hairline grid look. */
.bn-cards--related {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 560px) {
    .bn-cards--related {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   SOCIAL SHARE BUTTONS (after article content)
   ============================================================ */
.bn-share {
    margin: 36px 0 8px;
    padding: 20px 0;
    border-top: 2px solid var(--bn-maroon);
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 18px;
}
.bn-share__label {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bn-maroon);
    flex: 0 0 auto;
}
.bn-share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.bn-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    line-height: 1;
}
.bn-share__btn svg { flex: 0 0 auto; }
.bn-share__btn:hover { color: #fff; }
.bn-share__btn--x:hover        { background: #000;    border-color: #000; }
.bn-share__btn--facebook:hover { background: #1877f2; border-color: #1877f2; }
.bn-share__btn--whatsapp:hover { background: #25d366; border-color: #25d366; }
.bn-share__btn--linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.bn-share__btn--copy:hover     { background: var(--bn-navy); border-color: var(--bn-navy); }
.bn-share__btn.is-copied       { background: var(--bn-green); border-color: var(--bn-green); color: #fff; }

@media (max-width: 560px) {
    .bn-share__btn-text {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .bn-share__btn { padding: 10px; }
}

/* ============================================================
   COMMENTS
   ============================================================ */
.bn-comments {
    border-top: 1px solid var(--rule);
}
.bn-commentlist .comment-body {
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--sans);
}
.bn-commentlist .comment-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.bn-commentlist .comment-author .fn {
    font-weight: 700;
    font-style: normal;
    color: var(--ink);
    font-size: 14px;
}
.bn-commentlist .comment-author img {
    border-radius: 50%;
}
.bn-commentlist .comment-meta {
    font-size: 12px;
    color: var(--ink-50);
    margin-bottom: 8px;
}
.bn-commentlist .comment-meta a { color: var(--ink-50); }
.bn-commentlist .comment-content {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-70);
}
.bn-commentlist .children {
    list-style: none;
    margin: 0 0 0 32px;
    padding: 0;
    border-left: 2px solid var(--rule);
    padding-left: 20px;
}
.bn-commentlist .reply {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 6px;
}
.bn-comments .comment-form {
    margin-top: 30px;
    display: grid;
    gap: 14px;
}
.bn-comments .comment-form p { margin: 0; }
.bn-comments .comment-form label {
    display: block;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 5px;
}
.bn-comments .comment-form input[type="text"],
.bn-comments .comment-form input[type="email"],
.bn-comments .comment-form input[type="url"],
.bn-comments .comment-form textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--sans);
    font-size: 15px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
    box-sizing: border-box;
}
.bn-comments .comment-form textarea { min-height: 120px; resize: vertical; }
.bn-comments .comment-form input:focus,
.bn-comments .comment-form textarea:focus {
    outline: none;
    border-color: var(--bn-navy);
}
.bn-comments .comment-form .form-submit .submit,
.bn-comments .comment-form input[type="submit"] {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--bn-navy);
    border: none;
    border-radius: 4px;
    padding: 12px 28px;
    cursor: pointer;
    transition: background .15s ease;
}
.bn-comments .comment-form .form-submit .submit:hover,
.bn-comments .comment-form input[type="submit"]:hover {
    background: var(--bn-maroon);
}

/* ============================================================
   BUSINESS INSIGHT — blog section
   Desktop: cards-style row (lead + items sit in a 4-col grid).
   Mobile: a lead story (big image + headline) + "Show More" +
   a compact list (square thumb, maroon dot, headline).
   ============================================================ */

/* --- Desktop (default): lay lead + list out like a 4-card row --- */
.bn-blogmix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.bn-blogmix__lead {
    background: #fff;
    padding: 14px;
    display: flex;
    flex-direction: column;
}
.bn-blogmix__lead-thumb {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--paper);
    margin-bottom: 14px;
}
.bn-blogmix__lead-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.bn-blogmix__lead-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.25;
    margin: 6px 0 0;
}
.bn-blogmix__lead-title a { color: var(--ink); }
/* On desktop the list is just the remaining 3 cards in the grid. */
.bn-blogmix__list {
    display: contents;
}
.bn-blogmix__item {
    background: #fff;
    padding: 14px;
    display: flex;
    flex-direction: column;
}
.bn-blogmix__item-thumb {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--paper);
    margin-bottom: 14px;
}
.bn-blogmix__item-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.bn-blogmix__item-body { display: flex; flex-direction: column; }
.bn-blogmix__item-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    margin: 6px 0 0;
}
.bn-blogmix__item-title a { color: var(--ink); }
.bn-blogmix__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink);
}
.bn-blogmix__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--bn-maroon);
    flex: 0 0 auto;
}
/* Desktop: 1 lead + 4 items = 5 total would leave 3 empty cells in a
   4-col grid. Hide the 4th list item so desktop shows a clean row of 4
   (lead + 3). Mobile shows all of them (lead + 4 list). */
.bn-blogmix__list .bn-blogmix__item:nth-child(4) {
    display: none;
}

/* --- Mobile (≤560px): the lead + list layout from the reference --- */
@media (max-width: 560px) {
    .bn-blogmix {
        display: block;
        background: none;
        border: none;
    }
    .bn-blogmix__lead {
        padding: 0;
        margin-bottom: 18px;
    }
    .bn-blogmix__lead-thumb {
        aspect-ratio: 16/10;
        margin-bottom: 14px;
    }
    .bn-blogmix__lead-title {
        font-size: 26px;
        line-height: 1.15;
        font-weight: 400;
    }
    /* The list becomes stacked horizontal rows. */
    .bn-blogmix__list {
        display: block;
    }
    .bn-blogmix__list .bn-blogmix__item:nth-child(4) {
        display: grid;
    }
    .bn-blogmix__item {
        display: grid;
        grid-template-columns: 92px 1fr;
        gap: 14px;
        padding: 16px 0;
        border-top: 1px solid var(--rule);
        align-items: start;
    }
    .bn-blogmix__item-thumb {
        width: 92px;
        height: 92px;
        aspect-ratio: 1 / 1;
        margin-bottom: 0;
        border-radius: 3px;
    }
    .bn-blogmix__item-title {
        font-size: 17px;
        line-height: 1.3;
        font-weight: 400;
    }
}

/* ============================================================
   BANKING & FINANCE — lead + list variant (mobile only)
   Big hero image + navy-blue panel (eyebrow + headline), then
   4 list items with blue dots. Desktop reuses the .bn-blogmix
   card-grid styling; only mobile gets the hero-panel treatment.
   ============================================================ */
/* Desktop: the panel is just normal card text (no blue box). */
.bn-blogmix--banking .bn-blogmix__panel { display: contents; }
.bn-blogmix--banking .bn-blogmix__dot { background: var(--bn-navy); }

@media (max-width: 560px) {
    /* Lead: large hero image fully shown, then a navy panel beneath. */
    .bn-blogmix--banking .bn-blogmix__lead {
        padding: 0;
        margin-bottom: 20px;
        background: none;
    }
    .bn-blogmix--banking .bn-blogmix__lead-thumb {
        /* Bigger image area to fully showcase the featured image. */
        aspect-ratio: 4 / 3;
        margin-bottom: 0;
        border-radius: 4px 4px 0 0;
        overflow: hidden;
    }
    .bn-blogmix--banking .bn-blogmix__lead-thumb img {
        width: 100%; height: 100%; object-fit: cover; display: block;
    }
    /* The navy panel that carries the eyebrow + headline. */
    .bn-blogmix--banking .bn-blogmix__panel {
        display: block;
        background: var(--bn-navy);
        color: #fff;
        padding: 24px 22px 28px;
        border-radius: 0 0 4px 4px;
        text-align: center;
    }
    .bn-blogmix--banking .bn-blogmix__panel .bn-blogmix__eyebrow {
        justify-content: center;
        color: #fff;
        letter-spacing: .12em;
        margin-bottom: 12px;
    }
    .bn-blogmix--banking .bn-blogmix__panel .bn-blogmix__dot {
        background: var(--bn-green);
    }
    .bn-blogmix--banking .bn-blogmix__lead-title {
        font-size: 30px;
        line-height: 1.12;
        font-weight: 400;
        color: #fff;
    }
    .bn-blogmix--banking .bn-blogmix__lead-title a { color: #fff; }
    /* List items: same as Business Insight, but with blue dots. */
    .bn-blogmix--banking .bn-blogmix__item .bn-blogmix__dot {
        background: var(--bn-navy);
    }
}

/* Brands Builders: single column on mobile (was a cramped 2-col grid
   with an empty orphan cell). Desktop keeps the 3-column card grid. */
@media (max-width: 560px) {
    .bn-cards--builders {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   RECENT HIGHLIGHTS — carousel (mobile only)
   Desktop: normal 4-col card grid, nav hidden.
   Mobile: full-width edge-to-edge horizontal scroll-snap carousel,
   one slide per screen, with dot indicators + prev/next arrows.
   ============================================================ */
/* Desktop: slides are just grid cells; nav hidden. */
.bn-carousel__slide { min-width: 0; }
/* Desktop: the slide wrappers sit in the hairline card grid, but unlike
   bare cards they don't paint white — so the grid's gray background shows
   through as an empty box. Give slides a white fill and equal height so
   the gray never shows. */
.bn-carousel__track.bn-cards .bn-carousel__slide {
    background: #fff;
}
.bn-carousel__track.bn-cards {
    align-items: stretch;
}
.bn-carousel__nav { display: none; }

@media (max-width: 560px) {
    /* Break the carousel out to the full screen width (no side padding). */
    .bn-section--highlights .bn-carousel {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
    }
    /* Horizontal scroll-snap track. */
    .bn-section--highlights .bn-carousel__track {
        display: flex;
        gap: 0;
        background: none;
        border: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bn-section--highlights .bn-carousel__track::-webkit-scrollbar {
        display: none;
    }
    .bn-section--highlights .bn-carousel__slide {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: start;
        background: #fff;
        padding: 0 16px;
        box-sizing: border-box;
    }
    /* The card inside fills the slide cleanly. */
    .bn-section--highlights .bn-carousel__slide .bn-card {
        border: none;
        padding: 0;
    }
    .bn-section--highlights .bn-carousel__slide .bn-card__thumb {
        aspect-ratio: 16 / 10;
    }
    .bn-section--highlights .bn-carousel__slide .bn-card__title {
        font-size: 22px;
        line-height: 1.2;
    }
    /* Nav row: prev/next arrows + dots. */
    .bn-carousel__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 16px;
        margin-top: 4px;
    }
    .bn-carousel__arrow {
        background: none;
        border: none;
        color: var(--ink);
        cursor: pointer;
        padding: 0;
        display: inline-flex;
        line-height: 0;
    }
    .bn-carousel__arrow:disabled { opacity: .3; }
    .bn-carousel__dots {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .bn-carousel__dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--ink-30, #ccc);
        border: none;
        padding: 0;
        cursor: pointer;
    }
    .bn-carousel__dot.is-active {
        background: var(--ink);
    }
}

/* ============================================================
   LEADERS SHAPING NIGERIAN BUSINESS (Executives)
   Premium portrait cards — taller portrait images anchored to the
   top so faces are never cropped, elevated card treatment, refined
   typography and a subtle hover lift.
   ============================================================ */
.bn-directory--bi_executive .bn-cards {
    background: none;
    border: none;
    gap: 24px;
}
.bn-directory--bi_executive .bn-card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    transition: box-shadow .22s ease, transform .22s ease;
    display: flex;
    flex-direction: column;
}
.bn-directory--bi_executive .bn-card:hover {
    box-shadow: 0 14px 34px rgba(18,18,18,.12);
    transform: translateY(-3px);
}
/* Portrait image: taller ratio, anchored to the top so heads show fully. */
.bn-directory--bi_executive .bn-card__thumb {
    aspect-ratio: 4 / 5;
    margin-bottom: 0;
    border-radius: 0;
    background: linear-gradient(160deg, #f2f2ef, #e8e8e3);
}
.bn-directory--bi_executive .bn-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
/* Text block sits below with generous, premium padding. */
.bn-directory--bi_executive .bn-card__eyebrow,
.bn-directory--bi_executive .bn-card__title,
.bn-directory--bi_executive .bn-card__meta {
    padding-left: 20px;
    padding-right: 20px;
}
.bn-directory--bi_executive .bn-card__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.15;
    margin-top: 18px;
}
.bn-directory--bi_executive .bn-card__title a { color: var(--ink); }
/* A thin maroon accent rule under the name for an editorial, premium feel. */
.bn-directory--bi_executive .bn-card__title::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    background: var(--bn-maroon);
    margin-top: 12px;
}
.bn-directory--bi_executive .bn-card__meta {
    padding-bottom: 20px;
    margin-top: 10px;
}

@media (max-width: 560px) {
    .bn-directory--bi_executive .bn-cards {
        gap: 16px;
    }
    .bn-directory--bi_executive .bn-card__title {
        font-size: 20px;
    }
}

/* ============================================================
   SEARCH RESULTS — clean grid without gray orphan cells
   The hairline card grid paints a gray backdrop that shows through
   empty cells when the last row is incomplete. For variable-count
   search results, use a plain gap grid (white gaps, no gray boxes).
   ============================================================ */
.bn-cards--search {
    background: none;
    border: none;
    gap: 28px 24px;
}
.bn-cards--search .bn-card {
    background: #fff;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
}
.bn-cards--search .bn-card__thumb {
    margin-bottom: 12px;
}
.bn-cards--search .bn-card__eyebrow,
.bn-cards--search .bn-card__title,
.bn-cards--search .bn-card__meta {
    padding-left: 14px;
    padding-right: 14px;
}
.bn-cards--search .bn-card__meta {
    padding-bottom: 14px;
}

/* ============================================================
   NEWSLETTER SIGNUP (MailerLite)
   Premium, conversion-focused box. Navy brand panel, bold headline,
   benefit copy, and a clean inline form.
   ============================================================ */
.bn-newsletter {
    margin: 40px 0;
    background: var(--bn-navy);
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
}
.bn-newsletter__inner {
    padding: 20px 24px;
    text-align: center;
}
.bn-newsletter__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 14px;
    color: #fff;
}
.bn-newsletter__flag {
    margin-bottom: 12px;
}
.bn-newsletter__flag-label {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--bn-green);
}
.bn-newsletter__blurb {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255,255,255,.82);
    margin: 0 0 20px;
    max-width: 52ch;
}
.bn-newsletter__form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.bn-newsletter__input {
    flex: 1 1 260px;
    min-width: 0;
    padding: 14px 16px;
    font-family: var(--sans);
    font-size: 15px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    color: #fff;
}
.bn-newsletter__input::placeholder { color: rgba(255,255,255,.55); }
.bn-newsletter__input:focus {
    outline: none;
    border-color: var(--bn-green);
    background: rgba(255,255,255,.12);
}
.bn-newsletter__btn {
    flex: 0 0 auto;
    padding: 14px 28px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bn-navy);
    background: var(--bn-green);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.bn-newsletter__btn:hover {
    background: #00d970;
    transform: translateY(-1px);
}
.bn-newsletter__btn--full { width: 100%; }
.bn-newsletter__fineprint {
    font-family: var(--sans);
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin: 12px 0 0;
}
.bn-newsletter__setup {
    font-family: var(--sans);
    font-size: 13px;
    color: rgba(255,255,255,.7);
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed rgba(255,255,255,.3);
    border-radius: 6px;
}

/* Sidebar variant: more compact, stacks vertically. */
.bn-newsletter--sidebar .bn-newsletter__inner { padding: 24px 22px; }
.bn-newsletter--sidebar .bn-newsletter__title { font-size: 21px; }
.bn-newsletter--sidebar .bn-newsletter__blurb { font-size: 14px; }
.bn-newsletter--sidebar .bn-newsletter__form { flex-direction: column; }
.bn-newsletter--sidebar .bn-newsletter__input { flex: 1 1 auto; }
.bn-newsletter--sidebar .bn-newsletter__btn { width: 100%; }

@media (max-width: 560px) {
    .bn-newsletter__inner { padding: 26px 20px 24px; }
    .bn-newsletter__title { font-size: 22px; }
    .bn-newsletter__form { flex-direction: column; }
    .bn-newsletter__input { flex: 1 1 auto; }
    .bn-newsletter__btn { width: 100%; }
}

/* MailerLite embed sits inside the newsletter panel. MailerLite controls
   the form's own styling (set it in their dashboard); we just give it room
   and a light surface so it reads well on the navy panel. */
.bn-newsletter__embed {
    margin-top: 4px;
}
.bn-newsletter__embed .ml-embedded {
    background: transparent;
}
/* If your MailerLite form has a white background, this keeps it tidy. */
.bn-newsletter__embed .ml-form-embedContainer {
    border-radius: 8px;
    overflow: hidden;
}

/* Centered, compact newsletter: center the form area under the heading. */
.bn-newsletter__inner .bn-newsletter__form,
.bn-newsletter__inner .bn-newsletter__embed {
    justify-content: center;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.bn-newsletter__embed .ml-form-embedWrapper,
.bn-newsletter__embed .ml-form-embedBody {
    text-align: center;
}

/* ============================================================
   AFFILIATE / COMPARISON COMPONENTS (review & guide posts)
   ============================================================ */

/* --- Affiliate CTA button (used everywhere) --- */
.bn-aff-btn,
.bn-prose a.bn-aff-btn,
.bn-aff-btn:link,
.bn-aff-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff !important;
    background: var(--bn-green);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
    white-space: nowrap;
}
.bn-aff-btn:hover,
.bn-prose a.bn-aff-btn:hover {
    color: #fff !important;
}
.bn-aff-btn:hover {
    background: #00a854;
    transform: translateY(-1px);
    color: #fff;
}
.bn-aff-btn--lg { padding: 15px 34px; font-size: 15px; }
.bn-aff-btn--sm { padding: 9px 16px; font-size: 13px; }

.bn-aff-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    margin: 24px 0;
    padding: 22px 20px;
    background: var(--paper);
    border: 1px solid var(--bn-green);
    border-radius: 8px;
}
.bn-aff-cta__text {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

/* --- Star rating --- */
.bn-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    white-space: nowrap;
}
.bn-star { color: #d8d8d8; letter-spacing: 1px; }
.bn-star--full { color: #f5a623; }
.bn-star--half {
    color: #f5a623;
    background: linear-gradient(90deg, #f5a623 50%, #d8d8d8 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bn-rating__num {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 13px;
    color: var(--ink-70);
}

/* --- "Best pick" featured box --- */
.bn-pick {
    position: relative;
    margin: 32px 0;
    border: 2px solid var(--bn-green);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,191,98,.08);
}
.bn-pick__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bn-green);
    color: #fff;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
}
.bn-pick__body { padding: 28px 24px 24px; text-align: center; }
.bn-pick__name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 24px;
    margin: 0 0 8px;
    color: var(--ink);
}
.bn-pick .bn-rating { justify-content: center; }
.bn-pick__why {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-70);
    margin: 12px auto 20px;
    max-width: 60ch;
}
.bn-pick__why p { margin: 0 0 10px; }

/* --- Comparison table --- */
.bn-compare-wrap {
    margin: 28px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bn-compare {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sans);
    min-width: 520px;
}
.bn-compare thead th {
    background: var(--bn-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    padding: 13px 16px;
}
.bn-compare tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
    color: var(--ink-70);
    vertical-align: middle;
    text-align: center;
}
.bn-compare tbody tr:nth-child(even) td { background: var(--paper); }
.bn-compare__namecol { min-width: 150px; }
.bn-compare thead .bn-compare__namecol,
.bn-compare tbody .bn-compare__namecol { text-align: center; }
.bn-compare__name {
    display: block;
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
}
.bn-compare .bn-rating { justify-content: center; }
.bn-compare__actioncol { text-align: center; white-space: nowrap; }

@media (max-width: 560px) {
    .bn-aff-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .bn-aff-cta .bn-aff-btn { width: 100%; }
    .bn-pick__name { font-size: 21px; }
}

/* --- Affiliate disclosure line --- */
.bn-disclosure {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 24px;
    padding: 11px 15px;
    background: var(--paper);
    border-left: 3px solid var(--bn-maroon);
    border-radius: 0 5px 5px 0;
}
.bn-disclosure__icon {
    flex: 0 0 auto;
    color: var(--bn-maroon);
    margin-top: 1px;
}
.bn-disclosure__text {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-70);
}