/* ═══════════════════════════════════════════════════════════════════
   VARIANT B — Dark / Poster / Electric
   Late-night Twin Cities energy. First Ave posters. Bold as hell.
   Image-forward cards, neon accents, zero apologies.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.bunny.net/css?family=barlow-condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,900&display=swap');
@import url('https://fonts.bunny.net/css?family=barlow:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* ── Palette ─────────────────────────────────────────────────────── */
html.variant-b {
    --vb-black:      #0D0F12;
    --vb-dark:       #14171E;
    --vb-surface:    #1C2028;
    --vb-border:     rgba(255,255,255,0.08);
    --vb-electric:   #FFE141;
    --vb-hot:        #FF4D1C;
    --vb-teal:       #00D4B4;
    --vb-white:      #F5F4F0;
    --vb-muted:      rgba(245,244,240,0.5);

    --color-primary-text:   var(--vb-white);
    --color-secondary-text: var(--vb-muted);
    --color-border:         var(--vb-border);
    --color-dark-border:    rgba(255,255,255,0.25);
    --color-lighter-gray:   var(--vb-surface);
    --background-color:     var(--vb-black);
    --ghost-accent-color:   var(--vb-electric);
    --gh-font-heading: 'Barlow Condensed', system-ui, sans-serif;
    --gh-font-body:    'Barlow', system-ui, sans-serif;
}

html.variant-b body {
    background-color: var(--vb-black);
    color: var(--vb-white);
}

/* Scanline texture */
html.variant-b body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
}

/* ── Navigation — concert marquee ────────────────────────────────── */
html.variant-b .gh-navigation {
    background: var(--vb-black);
    border-bottom: 1px solid var(--vb-border);
    padding: 0;
}

html.variant-b .gh-navigation-inner {
    padding: 18px 40px;
    border-bottom: 3px solid var(--vb-electric);
}

html.variant-b .gh-navigation-logo {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 3.6rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vb-electric) !important;
    text-shadow: 0 0 30px rgba(255,225,65,0.4);
    text-decoration: none;
    line-height: 1;
}

html.variant-b .gh-navigation-logo:hover {
    color: var(--vb-white) !important;
    text-shadow: 0 0 30px rgba(255,255,255,0.3);
}

html.variant-b .gh-navigation :is(.gh-navigation-logo, a:not(.gh-button), .gh-icon-button) {
    color: var(--vb-white);
}

html.variant-b .gh-navigation .nav a {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--vb-muted) !important;
    transition: color 0.15s;
    padding: 4px 2px;
}

html.variant-b .gh-navigation .nav a:hover {
    color: var(--vb-electric) !important;
}

html.variant-b .gh-navigation-actions { background: transparent; }

html.variant-b .gh-navigation .gh-button {
    background: var(--vb-electric);
    color: var(--vb-black) !important;
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 2px;
    padding: 10px 22px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

html.variant-b .gh-navigation .gh-button:hover {
    background: var(--vb-white);
    color: var(--vb-black) !important;
    box-shadow: 0 0 20px rgba(255,225,65,0.4);
}

html.variant-b .gh-icon-button svg,
html.variant-b .gh-burger svg { color: var(--vb-white); }

/* ── Post cards — image-dominant poster cards ────────────────────── */
html.variant-b .gh-feed {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    background: var(--vb-border);
}

/* Card 1: giant hero — 8 wide, tall */
html.variant-b .gh-feed .gh-card:first-child {
    grid-column: span 8;
    min-height: 520px;
}

/* Cards 2–3: stacked right column */
html.variant-b .gh-feed .gh-card:nth-child(2),
html.variant-b .gh-feed .gh-card:nth-child(3) {
    grid-column: span 4;
    min-height: 258px;
}

/* Cards 4+: 3-up row */
html.variant-b .gh-feed .gh-card:nth-child(n+4) {
    grid-column: span 4;
    min-height: 300px;
}

@media (max-width: 900px) {
    html.variant-b .gh-feed { grid-template-columns: 1fr 1fr; background: transparent; gap: 2px; }
    html.variant-b .gh-feed .gh-card,
    html.variant-b .gh-feed .gh-card:first-child,
    html.variant-b .gh-feed .gh-card:nth-child(2),
    html.variant-b .gh-feed .gh-card:nth-child(3),
    html.variant-b .gh-feed .gh-card:nth-child(n+4) {
        grid-column: span 1;
        min-height: 220px;
    }
}

/* ALL cards: image fills card, text overlays from bottom */
html.variant-b .gh-card {
    background: var(--vb-surface);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

html.variant-b .gh-card-link {
    display: block;
    height: 100%;
    min-height: inherit;
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* Image fills the whole card */
html.variant-b .gh-card-image {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
}

html.variant-b .gh-card-image figure,
html.variant-b .gh-card-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

html.variant-b .gh-card:hover .gh-card-image img {
    transform: scale(1.06);
}

/* Dark gradient overlay — text always readable */
html.variant-b .gh-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.92) 0%,
        rgba(0,0,0,0.6) 40%,
        rgba(0,0,0,0.1) 70%,
        transparent 100%
    );
    z-index: 1;
    transition: background 0.3s;
}

html.variant-b .gh-card:hover::before {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,0.2) 80%,
        transparent 100%
    );
}

/* Electric accent line on hover */
html.variant-b .gh-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--vb-electric);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
    z-index: 3;
}

html.variant-b .gh-card:hover::after { transform: scaleX(1); }

/* Text overlaid at the bottom */
html.variant-b .gh-card-wrapper {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 24px 22px 22px;
    z-index: 2;
    min-height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

html.variant-b .gh-card-tag {
    display: inline-block;
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--vb-electric);
    margin-bottom: 8px;
    padding: 0;
    text-shadow: 0 0 10px rgba(255,225,65,0.5);
}

html.variant-b .gh-card-title {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    color: var(--vb-white);
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

html.variant-b .gh-feed .gh-card:first-child .gh-card-title {
    font-size: 4rem;
}

html.variant-b .gh-card-excerpt {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 1.35rem;
    color: rgba(245,244,240,0.75);
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

html.variant-b .gh-card-meta {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(245,244,240,0.5);
}

/* Cards without images get a dark surface + accent */
html.variant-b .gh-card.no-image::before { display: none; }

html.variant-b .gh-card.no-image .gh-card-wrapper {
    position: relative;
    background: var(--vb-surface);
    border-left: 4px solid var(--vb-electric);
    padding: 24px 22px;
    min-height: unset;
    justify-content: flex-start;
}

html.variant-b .gh-card.no-image .gh-card-title { color: var(--vb-white); text-shadow: none; }
html.variant-b .gh-card.no-image .gh-card-tag   { text-shadow: none; }

/* ── Article page ────────────────────────────────────────────────── */
html.variant-b .gh-article {
    background: var(--vb-black);
}

html.variant-b .gh-article-header {
    border-bottom: 1px solid var(--vb-border);
    padding-bottom: 40px;
    margin-bottom: 48px;
}

html.variant-b .gh-article-tag {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--vb-electric);
    display: inline-block;
    text-decoration: none;
    margin-bottom: 18px;
    text-shadow: 0 0 12px rgba(255,225,65,0.4);
}

html.variant-b .gh-article-title {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: clamp(4rem, 7vw, 9rem);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    color: var(--vb-white);
    line-height: 0.95;
    letter-spacing: 0.02em;
    max-width: 18ch;
}

html.variant-b .gh-article-excerpt {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 1.9rem;
    font-weight: 300;
    color: var(--vb-muted);
    line-height: 1.5;
    margin-top: 20px;
    max-width: 54ch;
    border-left: 3px solid var(--vb-electric);
    padding-left: 20px;
}

html.variant-b .gh-article-author-name {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vb-electric);
}

html.variant-b .gh-article-meta-date,
html.variant-b .gh-article-meta-length {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vb-muted);
}

html.variant-b .gh-content {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.75;
    color: rgba(245,244,240,0.88);
}

html.variant-b .gh-content h2 {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 3.8rem;
    text-transform: uppercase;
    color: var(--vb-electric);
    margin-top: 56px;
    letter-spacing: 0.04em;
    line-height: 1;
    text-shadow: 0 0 20px rgba(255,225,65,0.25);
}

html.variant-b .gh-content h3 {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    text-transform: uppercase;
    color: var(--vb-white);
    margin-top: 40px;
    letter-spacing: 0.06em;
}

html.variant-b .gh-content a {
    color: var(--vb-electric);
    text-decoration-color: rgba(255,225,65,0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 0.1s, text-shadow 0.1s;
}

html.variant-b .gh-content a:hover {
    color: var(--vb-white);
    text-shadow: 0 0 8px rgba(255,225,65,0.5);
}

html.variant-b .gh-content blockquote {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    color: var(--vb-electric);
    border: none;
    border-left: 6px solid var(--vb-electric);
    padding: 16px 28px;
    margin: 44px 0;
    line-height: 1.15;
    background: rgba(255,225,65,0.05);
    text-shadow: 0 0 30px rgba(255,225,65,0.2);
}

html.variant-b .gh-content blockquote p::before,
html.variant-b .gh-content blockquote p::after { content: ''; }

/* ── Buttons ─────────────────────────────────────────────────────── */
html.variant-b .gh-button {
    background: var(--vb-electric);
    color: var(--vb-black) !important;
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 2px;
    transition: background 0.15s, box-shadow 0.15s;
}

html.variant-b .gh-button:hover {
    background: var(--vb-white);
    color: var(--vb-black) !important;
    box-shadow: 0 0 20px rgba(255,225,65,0.4);
}

/* ── Footer ──────────────────────────────────────────────────────── */
html.variant-b .gh-footer {
    background: var(--vb-black);
    color: var(--vb-muted);
    border-top: 3px solid var(--vb-electric);
}

html.variant-b .gh-footer a { color: rgba(245,244,240,0.6); }
html.variant-b .gh-footer a:hover { color: var(--vb-electric); }

html.variant-b .gh-footer-inner {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Section titles ──────────────────────────────────────────────── */
html.variant-b .gh-container-title {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 3.8rem;
    text-transform: uppercase;
    color: var(--vb-white);
    letter-spacing: 0.04em;
    border-bottom: 3px solid var(--vb-electric);
    display: inline-block;
    padding-bottom: 6px;
}

/* ── Share buttons ───────────────────────────────────────────────── */
html.variant-b .mn-share-label {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--vb-muted);
}

html.variant-b .mn-share-btn {
    background: var(--vb-surface);
    border: 1px solid var(--vb-border);
    color: var(--vb-white);
    border-radius: 2px;
}

html.variant-b .mn-share-more summary {
    background: var(--vb-surface);
    border: 1px solid var(--vb-border);
    border-radius: 2px;
    color: var(--vb-white);
}

html.variant-b .mn-share-dropdown {
    background: var(--vb-dark);
    border: 1px solid var(--vb-border);
}

html.variant-b .mn-share-dropdown a { color: var(--vb-white); }
html.variant-b .mn-share-dropdown a:hover { background: var(--vb-surface); }