/**
 * Page-specific styles for templates/template-homepage.php.
 *
 * Extracted verbatim from the inline <style> block in the template
 * (it was previously re-emitted on every page-view and never HTTP-cached).
 * The matching enqueue is in functions.php under the bv-homepage handle.
 */

/* ==========================================================================
   HOMEPAGE LAYOUT — v4.0 Editorial Premium
   Studio-shared rules live in css/studio.css.
   ========================================================================== */

.bv-home {
    position: relative;
    background: var(--bv-dark-bg);
    color: var(--bv-dark-text);
    overflow-x: hidden;
}

.bv-home a { color: inherit; }

/* ========== HERO ========== */
.bv-hero {
    position: relative;
    /* svh = small viewport height — the viewport when browser chrome is
       VISIBLE. Critical for Instagram / Facebook / TikTok in-app webviews:
       100vh on iOS Safari/IG WebView equals the *static* viewport (URL bar
       expanded), so a 100vh hero pushes the bottom 60-100px of content
       beneath the visible area when chrome is showing. svh sizes against
       the smallest possible viewport, guaranteeing nothing is clipped.
       100vh stays as a fallback for older browsers (pre-2023).            */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: var(--bv-hero-pad-top) 24px var(--bv-hero-pad-bottom);
    isolation: isolate;
    overflow: hidden;
}

/* Inside in-app browsers, drop the min-height constraint entirely — the
   hero will size to its content. Avoids any residual chrome-collision
   when a webview reports an unexpected viewport. */
.bv-in-app .bv-hero,
html.bv-in-app .bv-hero {
    min-height: auto;
}

.bv-hero-backdrop {
    position: absolute;
    inset: -8% -4% -4% -4%;
    background-size: cover;
    background-position: center 30%;
    filter: grayscale(0.5) contrast(1.05) brightness(0.55);
    z-index: -2;
    will-change: transform;
}

.bv-hero-noise {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.bv-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(80% 60% at 30% 30%, rgba(8, 145, 178, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.78) 60%, rgba(10,10,11,0.95) 100%);
}

.bv-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: -1px -1px;
    pointer-events: none;
    mask-image: radial-gradient(80% 80% at 50% 30%, #000 30%, transparent 80%);
}

.bv-hero-inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    z-index: 1;
}

.bv-hero-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    font-family: var(--bv-font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: rgba(255,255,255,0.55);
}

.bv-hero-status-label { color: rgba(255,255,255,0.4); }
.bv-hero-status-value { color: var(--bv-gold); }

.bv-hero-title {
    font-family: var(--bv-font-editorial);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
    font-size: clamp(3rem, 10vw, 8.5rem);
    margin: 0 0 28px;
    color: #fff;
    padding-bottom: 0.08em;
    /* Instagram in-app browser miscomputes vw against the visual viewport
       (URL bar collapse) so editorial copy like "Living, learning," can be
       laid out wider than the content box. Letting glyphs break on overflow
       and balancing wraps prevents the text from spilling past the edge. */
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    text-wrap: balance;
}

.bv-hero-title .line {
    display: block;
    overflow: visible;
    padding-bottom: 0.04em;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bv-hero-title em {
    font-style: italic;
    color: var(--bv-gold);
    font-weight: 500;
}

.bv-hero-sub {
    max-width: 640px;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: rgba(255,255,255,0.72);
    margin: 0 0 40px;
    font-weight: 400;
}

.bv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 56px;
}

.bv-hero-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.08);
    width: 100%;
    max-width: 820px;
}

.bv-hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bv-hero-meta-num {
    font-family: var(--bv-font-editorial);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    color: var(--bv-gold);
}

.bv-hero-meta-label {
    font-family: var(--bv-font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.5);
}

.bv-hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--bv-gold);
    font-family: var(--bv-font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    text-decoration: none;
    animation: bv-hero-bounce 2.4s ease-in-out infinite;
}

@keyframes bv-hero-bounce {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.85; }
    50%      { transform: translate(-50%, 6px); opacity: 0.5; }
}

@media (max-width: 768px) {
    .bv-hero { padding: 110px 20px 90px; min-height: auto; }
    /* Drop the vw-cap from 12vw → 9vw — at 12vw on a 393px screen the title
       computed to ~47px and "Living, learning," (17 glyphs of Playfair) was
       wider than the 353px content area, then Instagram's in-app browser
       made it worse. 9vw stays editorial but always fits the box. */
    .bv-hero-title { font-size: clamp(2.4rem, 9vw, 4.2rem); margin-bottom: 22px; }
    .bv-hero-sub { margin-bottom: 28px; max-width: 100%; overflow-wrap: anywhere; }
    .bv-hero-actions { margin-bottom: 40px; }
    .bv-hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; padding-top: 26px; }
    .bv-hero-meta-num { font-size: clamp(1.6rem, 8vw, 2.4rem); }
    .bv-hero-scroll { display: none; }
}

@media (max-width: 380px) {
    /* Extra-narrow phones / Instagram in-app browser fallback */
    .bv-hero { padding: 96px 16px 72px; }
    .bv-hero-title { font-size: clamp(2rem, 8vw, 2.6rem); }
}

/* ========== PHILOSOPHY ========== */
.bv-philosophy {
    padding: var(--bv-section-y) 24px;
    background: var(--bv-dark-bg);
    color: var(--bv-dark-text);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bv-philosophy::before {
    content: '"';
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--bv-font-editorial);
    font-style: italic;
    font-size: clamp(20rem, 40vw, 40rem);
    color: var(--bv-gold);
    opacity: 0.04;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.bv-philosophy-inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
}

.bv-philosophy-quote {
    font-family: var(--bv-font-editorial);
    font-weight: 400;
    font-size: clamp(1.6rem, 3.6vw, 2.8rem);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--bv-dark-text);
    margin: 0 0 24px;
}

.bv-philosophy-quote em {
    font-style: italic;
    color: var(--bv-gold);
}

.bv-philosophy-author {
    font-family: var(--bv-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255,255,255,0.4);
}

/* ========== SECTION SCAFFOLDING ========== */
.bv-section {
    padding: var(--bv-section-y) 24px;
    position: relative;
}

/* Two adjacent same-background sections: drop the top of the second so the
   transition feels like one continuous bed of air instead of doubling up. */
.bv-section-light + .bv-section-light,
.bv-section-dark + .bv-section-dark,
.bv-philosophy + .bv-section-dark,
.bv-section-dark + .bv-philosophy,
.bv-section-light + .bv-newsletter,
.bv-newsletter + .bv-section-light {
    padding-top: 0;
}

.bv-section-light {
    background: var(--bv-light-bg);
    color: var(--bv-light-text);
}

.bv-section-dark {
    background: var(--bv-dark-bg);
    color: var(--bv-dark-text);
}

.bv-section-inner {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.bv-section-header {
    margin-bottom: var(--bv-header-gap);
}

.bv-section-title {
    font-family: var(--bv-font-editorial);
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 12px 0 16px;
}

.bv-section-title em {
    font-style: italic;
    color: var(--bv-gold);
}

.bv-section-sub {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    color: var(--bv-light-muted);
    max-width: 600px;
    margin: 0;
}

.bv-section-dark .bv-section-sub { color: rgba(255,255,255,0.6); }

/* ========== WORK SHOWCASE ========== */
.bv-work-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(200px, auto);
    gap: 18px;
    align-items: stretch;
}

.bv-work-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(160deg, #16161a 0%, #0f0f12 100%);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: #fff;
    transition: transform 0.55s var(--bv-ease), border-color 0.4s var(--bv-ease), box-shadow 0.55s var(--bv-ease);
    isolation: isolate;
}

/* Anchor-cards (the 5 tiles) get pointer cursor; the hero <article> doesn't. */
a.bv-work-card { cursor: pointer; }

.bv-work-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at var(--card-x, 30%) var(--card-y, 100%), var(--card-glow, rgba(8,145,178,0.18)) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.6s var(--bv-ease);
    z-index: 0;
}

.bv-work-card > * { position: relative; z-index: 1; }

.bv-work-card:hover {
    transform: translateY(-4px);
    border-color: var(--bv-gold-dim);
    box-shadow: 0 32px 80px -32px rgba(0, 0, 0, 0.7);
}

.bv-work-card:hover::before { opacity: 1; }

/* Hero card (ParentPod) — full width, modest height, keeps applinks */
.bv-work-card.is-hero {
    grid-column: 1 / -1;
    min-height: 240px;
    padding: 28px 32px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.bv-work-card.is-hero > div { flex: 1 1 0; min-width: 0; }
.bv-work-card.is-hero > .bv-work-cta { align-self: center; flex-shrink: 0; }

/* Tile (the 5 narrow pillars) — equal 1-of-5 width, compact */
.bv-work-card.is-tile {
    grid-column: span 1;
    min-height: 200px;
    padding: 22px 22px 20px;
    justify-content: space-between;
}

.bv-work-card.is-tile .bv-work-name { font-size: clamp(1.1rem, 1.4vw, 1.3rem); margin: 14px 0 8px; }
.bv-work-card.is-tile .bv-work-desc { font-size: 0.85rem; line-height: 1.45; margin: 0 0 16px; max-width: none; }
.bv-work-card.is-tile .bv-work-cta { font-size: 0.65rem; }

/* Legacy aliases — point to new system in case anything still references them */
.bv-work-card.is-featured,
.bv-work-card.is-tall { grid-column: 1 / -1; min-height: 240px; }
.bv-work-card.is-wide,
.bv-work-card.is-half,
.bv-work-card.is-third { grid-column: span 1; min-height: 200px; }

.bv-work-tag {
    font-family: var(--bv-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bv-gold);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bv-work-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.bv-work-name {
    font-family: var(--bv-font-editorial);
    font-weight: 500;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.05;
    margin: 16px 0 12px;
    letter-spacing: -0.01em;
}

.bv-work-card.is-hero .bv-work-name {
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    margin: 12px 0 10px;
}

.bv-work-card.is-hero .bv-work-name em {
    font-style: italic;
    color: var(--bv-gold);
}

.bv-work-card.is-hero .bv-work-desc {
    margin-bottom: 14px;
    max-width: 60ch;
}

.bv-work-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.65);
    margin: 0 0 24px;
    max-width: 44ch;
}

.bv-work-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--bv-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.85);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--bv-gold);
    align-self: flex-start;
    text-decoration: none;
    transition: gap 0.3s var(--bv-ease), color 0.3s var(--bv-ease);
}

.bv-work-card:hover .bv-work-cta,
.bv-work-cta:hover,
.bv-work-cta:focus-visible { gap: 14px; color: var(--bv-gold); }

.bv-work-cta:focus-visible {
    outline: 2px solid var(--bv-gold);
    outline-offset: 4px;
    border-radius: 2px;
}
.bv-work-cta:active { transform: translateX(2px); }

.bv-work-applinks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.bv-work-applink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    min-height: 44px;       /* WCAG 2.5.5 target size */
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    font-family: var(--bv-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: background 0.3s var(--bv-ease), border-color 0.3s var(--bv-ease), transform 0.2s var(--bv-ease);
}

.bv-work-applink svg { width: 13px; height: 13px; }
.bv-work-applink:hover,
.bv-work-applink:focus-visible {
    background: var(--bv-gold-subtle);
    border-color: var(--bv-gold-dim);
    color: var(--bv-gold);
}
.bv-work-applink:focus-visible {
    outline: 2px solid var(--bv-gold);
    outline-offset: 2px;
}
.bv-work-applink:active { transform: scale(0.97); }

@media (max-width: 1024px) {
    .bv-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px; }
    .bv-work-card.is-hero { grid-column: 1 / -1; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 26px; min-height: 0; gap: 18px; }
    .bv-work-card.is-hero > .bv-work-cta { align-self: flex-start; }
    .bv-work-card.is-tile { min-height: 200px; }
    /* Legacy */
    .bv-work-card.is-featured,
    .bv-work-card.is-tall { grid-column: 1 / -1; }
    .bv-work-card.is-wide,
    .bv-work-card.is-half,
    .bv-work-card.is-third { grid-column: span 1; }
}

@media (max-width: 600px) {
    .bv-work-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
    .bv-work-card.is-hero { grid-column: 1 / -1; min-height: 0; padding: 22px; justify-content: flex-start; }
    .bv-work-card.is-hero > div { flex: 0 1 auto; }
    .bv-work-card.is-tile,
    .bv-work-card.is-featured,
    .bv-work-card.is-tall,
    .bv-work-card.is-wide,
    .bv-work-card.is-half,
    .bv-work-card.is-third { grid-column: 1 / -1; min-height: 180px; padding: 22px; }
    /* Hide decorative mesh on small screens — prevents iOS Safari blur-filter artifacts */
    .bv-section-dark > .studio-mesh { display: none; }
}

/* ========== TOOLS GRID ========== */
.bv-tools-grid-home {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

@media (max-width: 768px) {
    .bv-tools-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .bv-tool-tile { padding: 22px; }
    .bv-tool-tile-num { margin-bottom: 16px; }
    .bv-tool-tile-name { font-size: 1.2rem; }
}

@media (max-width: 480px) {
    .bv-tools-grid-home { grid-template-columns: 1fr; }
}

.bv-tool-tile {
    display: block;
    padding: 28px;
    border-radius: 16px;
    background: var(--bv-light-surface);
    border: 1px solid var(--bv-light-border);
    text-decoration: none;
    color: var(--bv-light-text);
    transition: transform 0.4s var(--bv-ease), border-color 0.3s var(--bv-ease), box-shadow 0.4s var(--bv-ease);
}

.bv-tool-tile:hover {
    transform: translateY(-3px);
    border-color: var(--bv-gold);
    box-shadow: 0 16px 30px -18px rgba(201, 169, 97, 0.45);
}

.bv-tool-tile-num {
    font-family: var(--bv-font-mono);
    font-size: 0.7rem;
    color: var(--bv-light-muted);
    letter-spacing: 0.18em;
    margin: 0 0 24px;
}

.bv-tool-tile-name {
    font-family: var(--bv-font-editorial);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--bv-light-text);
}

.bv-tool-tile-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--bv-light-muted);
    margin: 0;
}

/* ========== WRITING (BENTO) ========== */
.bv-writing-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 56px;
}

/* Bento grid: 2x2 on homepage. Each card equal weight — hero treatment removed
   inside .bv-bento-grid so the four-up layout reads as a deliberate set. */
.bv-bento-grid > .bv-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.bv-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* Inside the homepage bento, override hero card to behave like the rest */
.bv-bento-grid .bv-featured-post--hero {
    grid-column: auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.bv-bento-grid .bv-featured-post--hero .bv-featured-image-wrapper {
    flex: 0 0 auto !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
}

.bv-bento-grid .bv-featured-post--hero .bv-featured-content {
    flex: 1 1 auto !important;
    padding: 22px 24px 26px !important;
}

.bv-bento-grid .bv-featured-post--hero .bv-featured-title {
    font-size: 1.35rem !important;
}

.bv-bento-grid .bv-featured-post--hero .bv-featured-excerpt {
    font-size: 0.95rem !important;
}

.bv-featured-grid .bv-featured-post {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--bv-light-text);
    background: var(--bv-light-surface);
    border: 1px solid var(--bv-light-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.45s var(--bv-ease), border-color 0.3s var(--bv-ease), box-shadow 0.45s var(--bv-ease);
}

.bv-featured-grid .bv-featured-post:hover {
    transform: translateY(-6px);
    border-color: var(--bv-gold);
    box-shadow: 0 24px 50px -28px rgba(201, 169, 97, 0.45);
}

/* Hero card spans full width across 3 columns */
.bv-featured-grid .bv-featured-post--hero {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
    min-height: 380px;
}

.bv-featured-grid .bv-featured-post--hero .bv-featured-image-wrapper {
    flex: 1.2 1 0;
    aspect-ratio: auto;
    min-height: 360px;
}

.bv-featured-grid .bv-featured-post--hero .bv-featured-content {
    flex: 1 1 0;
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.bv-featured-grid .bv-featured-post--hero .bv-featured-title {
    font-family: var(--bv-font-editorial);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--bv-light-text);
}

.bv-featured-grid .bv-featured-post--hero .bv-featured-excerpt {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--bv-light-muted);
    margin: 0;
}

/* Image wrapper — the missing critical CSS */
.bv-featured-grid .bv-featured-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--bv-light-bg);
}

.bv-featured-grid .bv-featured-img,
.bv-featured-grid .bv-featured-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--bv-ease);
}

.bv-featured-grid .bv-featured-post:hover .bv-featured-img,
.bv-featured-grid .bv-featured-post:hover .bv-featured-image-wrapper img {
    transform: scale(1.06);
}

.bv-featured-grid .bv-featured-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bv-gold-subtle) 0%, rgba(8,145,178,0.08) 100%);
}

.bv-featured-grid .placeholder-travel    { background: linear-gradient(135deg, #c9a961 0%, #8b6f3a 100%); }
.bv-featured-grid .placeholder-finance   { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); }
.bv-featured-grid .placeholder-wellness  { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.bv-featured-grid .placeholder-tech      { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.bv-featured-grid .placeholder-default   { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }

.bv-featured-grid .bv-featured-category {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 15, 18, 0.85);
    color: #fff;
    font-family: var(--bv-font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.bv-featured-grid .category-badge--travel    { background: rgba(201, 169, 97, 0.92); color: #1a1410; }
.bv-featured-grid .category-badge--finance   { background: rgba(8, 145, 178, 0.92); }
.bv-featured-grid .category-badge--wellness  { background: rgba(5, 150, 105, 0.92); }
.bv-featured-grid .category-badge--tech      { background: rgba(37, 99, 235, 0.92); }

.bv-featured-grid .bv-featured-content {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.bv-featured-grid .bv-featured-title {
    font-family: var(--bv-font-editorial);
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--bv-light-text);
}

.bv-featured-grid .bv-featured-excerpt {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--bv-light-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bv-featured-grid .bv-featured-meta {
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--bv-font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--bv-light-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bv-featured-grid .bv-featured-meta-dot { opacity: 0.5; }

.bv-featured-grid .bv-featured-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bv-featured-grid .bv-featured-avatar img,
.bv-featured-grid .bv-featured-avatar-img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: block;
}

.bv-featured-grid .bv-featured-cta {
    margin-top: 14px;
    font-family: var(--bv-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--bv-gold);
    border-bottom: 1px solid var(--bv-gold);
    padding-bottom: 4px;
    align-self: flex-start;
    transition: gap 0.3s var(--bv-ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bv-featured-grid .bv-featured-post:hover .bv-featured-cta { gap: 14px; }

@media (max-width: 1024px) {
    .bv-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bv-featured-grid .bv-featured-post--hero { grid-column: 1 / -1; flex-direction: column; min-height: auto; }
    .bv-featured-grid .bv-featured-post--hero .bv-featured-image-wrapper { aspect-ratio: 16 / 9; min-height: 0; }
    .bv-featured-grid .bv-featured-post--hero .bv-featured-content { padding: 28px; }
}

@media (max-width: 640px) {
    .bv-featured-grid,
    .bv-bento-grid > .bv-featured-grid { grid-template-columns: 1fr; gap: 18px; }
}

.bv-writing-cta-row { margin-top: 48px; text-align: center; }

/* ========== NEWSLETTER ========== */
.bv-newsletter {
    background: var(--bv-light-bg);
    color: var(--bv-light-text);
    padding: var(--bv-section-y) 24px;
}

.bv-newsletter-card {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 64px);
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--bv-light-border);
    box-shadow: 0 24px 60px -32px rgba(0,0,0,0.18);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bv-newsletter-card::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(closest-side, var(--bv-gold-subtle), transparent);
    pointer-events: none;
}

.bv-newsletter-eyebrow {
    font-family: var(--bv-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bv-gold);
    margin: 0 0 16px;
    position: relative;
}

.bv-newsletter-title {
    font-family: var(--bv-font-editorial);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
    color: var(--bv-light-text);
    position: relative;
}

.bv-newsletter-title em { font-style: italic; color: var(--bv-gold); }

.bv-newsletter-sub {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--bv-light-muted);
    margin: 0 0 32px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.bv-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}

.bv-newsletter-row {
    display: flex;
    gap: 8px;
    background: var(--bv-light-bg);
    border: 1px solid var(--bv-light-border);
    border-radius: 999px;
    padding: 6px;
    transition: border-color 0.25s var(--bv-ease);
}

.bv-newsletter-row:focus-within { border-color: var(--bv-gold); }

.bv-newsletter-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 12px 18px !important;
    font-size: 0.95rem;
    color: var(--bv-light-text) !important;
    outline: none;
}

.bv-newsletter-btn {
    border: none;
    background: var(--bv-light-text);
    color: #fff;
    padding: 12px 24px;
    border-radius: 999px;
    font-family: var(--bv-font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s var(--bv-ease), transform 0.25s var(--bv-ease);
}

.bv-newsletter-btn:hover { background: var(--bv-gold); color: #1a1606; }
.bv-newsletter-btn:disabled { opacity: 0.6; cursor: wait; }

.bv-newsletter-msg {
    font-size: 0.85rem;
    min-height: 1.4em;
}
.bv-newsletter-msg.success { color: #059669; }
.bv-newsletter-msg.error { color: #dc2626; }

.bv-newsletter-fineprint {
    font-size: 0.72rem;
    color: var(--bv-light-muted);
    margin: 4px 0 0;
}

.bv-newsletter-fineprint a { color: var(--bv-accent); text-decoration: underline; }

/* ========== ABOUT STRIP ========== */
.bv-about-strip {
    padding: var(--bv-section-y) 24px;
    background: var(--bv-dark-bg);
    color: var(--bv-dark-text);
    text-align: center;
}

.bv-about-strip-inner {
    max-width: 720px;
    margin: 0 auto;
}

.bv-about-strip h3 {
    font-family: var(--bv-font-editorial);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    margin: 0 0 16px;
    color: var(--bv-gold);
}

.bv-about-strip p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 0 0 32px;
}

@media (max-width: 768px) {
    .bv-newsletter-row { flex-direction: column; border-radius: 16px; padding: 8px; }
    .bv-newsletter-btn { padding: 14px; }
}