/* ==========================================================================
   Blue Ocean — style.css
   Stitch: flat minimalist editorial. Primary #002a48, Secondary #00629d.
   Font: Inter 400/500/600/700. Max-width: 1140px. Light bg: #f7f9ff.
   ========================================================================== */

/* ==========================================================================
   1. CSS Variables — from Stitch DESIGN.md + Tailwind config
   ========================================================================== */
:root {
    /* Core palette */
    --bo-primary:                  #002a48;
    --bo-primary-container:        #00416a;
    --bo-on-primary:               #ffffff;
    --bo-on-primary-container:     #7faddc;
    --bo-primary-fixed:            #cfe5ff;
    --bo-primary-fixed-dim:        #9ccbfb;

    --bo-secondary:                #00629d;
    --bo-secondary-container:      #68b6fe;
    --bo-on-secondary:             #ffffff;
    --bo-on-secondary-container:   #004672;
    --bo-secondary-fixed:          #cfe5ff;
    --bo-secondary-fixed-dim:      #99cbff;
    --bo-on-secondary-fixed:       #001d34;
    --bo-on-secondary-fixed-var:   #004a78;

    --bo-surface:                  #f7f9ff;
    --bo-surface-bright:           #f7f9ff;
    --bo-surface-dim:              #cbdcef;
    --bo-surface-container-lowest: #ffffff;
    --bo-surface-container-low:    #edf4ff;
    --bo-surface-container:        #e2efff;
    --bo-surface-container-high:   #d9eafe;
    --bo-surface-container-highest:#d3e4f8;
    --bo-surface-variant:          #d3e4f8;
    --bo-surface-tint:             #31628d;

    --bo-background:               #f7f9ff;
    --bo-on-background:            #0c1d2b;
    --bo-on-surface:               #0c1d2b;
    --bo-on-surface-variant:       #42474e;
    --bo-inverse-surface:          #223241;
    --bo-inverse-on-surface:       #e8f2ff;
    --bo-inverse-primary:          #9ccbfb;

    --bo-outline:                  #72777f;
    --bo-outline-variant:          #c2c7cf;

    --bo-error:                    #ba1a1a;
    --bo-error-container:          #ffdad6;

    /* Typography scale — from Stitch fontSize config */
    --bo-headline-xl:              48px;
    --bo-headline-xl-lh:           1.2;
    --bo-headline-xl-ls:           -0.02em;
    --bo-headline-xl-mobile:       32px;
    --bo-headline-xl-mobile-ls:    -0.01em;
    --bo-headline-lg:              30px;
    --bo-headline-lg-lh:           1.3;
    --bo-headline-lg-ls:           -0.01em;
    --bo-headline-md:              24px;
    --bo-headline-md-lh:           1.4;
    --bo-body-lg:                  18px;
    --bo-body-lg-lh:               1.6;
    --bo-body-md:                  16px;
    --bo-body-md-lh:               1.6;
    --bo-label-md:                 14px;
    --bo-label-md-lh:              1;
    --bo-label-md-ls:              0.02em;
    --bo-caption:                  12px;
    --bo-caption-lh:               1.4;

    /* Spacing — from Stitch config */
    --bo-xs:       4px;
    --bo-sm:       8px;
    --bo-md:       16px;
    --bo-lg:       24px;
    --bo-xl:       48px;
    --bo-gutter:   24px;
    --bo-margin-m: 16px;

    /* Container */
    --bo-container: 1140px;

    /* Border radius — from Stitch borderRadius config */
    --bo-radius:    0.125rem;   /* DEFAULT */
    --bo-radius-lg: 0.25rem;
    --bo-radius-xl: 0.5rem;
    --bo-radius-full: 0.75rem;  /* Stitch "full" = 0.75rem */
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--bo-body-md);
    line-height: var(--bo-body-md-lh);
    background-color: var(--bo-background);
    color: var(--bo-on-surface);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img  { max-width: 100%; height: auto; display: block; }
a    { color: var(--bo-secondary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--bo-primary); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ==========================================================================
   3. Layout utilities
   ========================================================================== */
.bo-container {
    max-width: var(--bo-container);
    margin: 0 auto;
    padding-left: var(--bo-margin-m);
    padding-right: var(--bo-margin-m);
}

@media (min-width: 768px) {
    .bo-container { padding-left: var(--bo-lg); padding-right: var(--bo-lg); }
}

.bo-main { flex: 1; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   4. Header / Navigation
   Stitch: bg-surface sticky, border-b, h-16, brand text-secondary bold headline-md
   ========================================================================== */
.bo-header {
    background: var(--bo-surface);
    border-bottom: 1px solid var(--bo-outline-variant);
    position: sticky;
    top: 0;
    z-index: 50;
    transition: box-shadow 0.2s;
}

.bo-header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.bo-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: var(--bo-lg);
}

/* Brand */
.bo-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.bo-brand-text {
    font-size: var(--bo-headline-md);
    line-height: var(--bo-headline-md-lh);
    font-weight: 700;
    color: var(--bo-secondary);
    margin: 0;
    font-family: inherit;
}

/* Nav center */
.bo-nav-center {
    flex: 1;
    display: flex;
    align-items: center;
}

.bo-nav-links {
    display: none;
    align-items: center;
    gap: var(--bo-lg);
}

@media (min-width: 768px) {
    .bo-nav-links { display: flex; }
}

.bo-nav-link {
    font-size: var(--bo-body-md);
    line-height: var(--bo-body-md-lh);
    color: var(--bo-on-surface-variant);
    text-decoration: none;
    transition: color 0.2s;
    padding-bottom: 4px;
}

.bo-nav-link:hover { color: var(--bo-primary); }

.bo-nav-link--active {
    color: var(--bo-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--bo-primary);
}

/* Nav actions (right) */
.bo-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--bo-sm);
    flex-shrink: 0;
}

/* Desktop inline search */
.bo-search-inline {
    display: none;
    align-items: center;
    gap: var(--bo-sm);
    background: var(--bo-surface-container-low);
    border: 1px solid var(--bo-outline-variant);
    border-radius: var(--bo-radius-lg);
    padding: var(--bo-xs) var(--bo-sm);
    transition: border-color 0.15s;
}

@media (min-width: 768px) { .bo-search-inline { display: flex; } }

.bo-search-inline:focus-within { border-color: var(--bo-primary); }

.bo-search-inline-icon { color: var(--bo-on-surface-variant); flex-shrink: 0; }

.bo-search-inline-input {
    border: none;
    background: none;
    outline: none;
    font-size: var(--bo-body-md);
    color: var(--bo-on-surface);
    width: 192px;
}

.bo-search-inline-input::placeholder { color: var(--bo-outline); }

/* Icon buttons */
.bo-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--bo-radius-full);
    color: var(--bo-primary);
    transition: background 0.15s;
}

.bo-icon-btn:hover { background: var(--bo-surface-container-high); }

/* Search toggle (mobile only) */
.bo-search-toggle { display: flex; }
@media (min-width: 768px) { .bo-search-toggle { display: none; } }

/* Hamburger (mobile only) */
.bo-hamburger { display: flex; }
@media (min-width: 768px) { .bo-hamburger { display: none; } }

/* Mobile search bar */
.bo-mobile-search-bar {
    background: var(--bo-surface-container-low);
    border-top: 1px solid var(--bo-outline-variant);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s;
}

.bo-mobile-search-bar.open {
    max-height: 72px;
    padding: var(--bo-xs) 0;
}

.bo-mobile-search-form {
    display: flex;
    align-items: center;
    gap: var(--bo-sm);
    height: 44px;
}

.bo-mobile-search-icon { color: var(--bo-outline); flex-shrink: 0; }

.bo-mobile-search-input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: var(--bo-body-md);
    color: var(--bo-on-surface);
}

.bo-mobile-search-input::placeholder { color: var(--bo-outline); }

/* Mobile drawer */
.bo-mobile-drawer {
    display: none;
    flex-direction: column;
    background: var(--bo-surface);
    border-top: 1px solid var(--bo-outline-variant);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

@media (max-width: 767px) { .bo-mobile-drawer { display: flex; } }

.bo-mobile-drawer.open { max-height: 400px; }

.bo-mobile-link {
    display: block;
    padding: 12px var(--bo-md);
    font-size: var(--bo-body-md);
    color: var(--bo-on-surface-variant);
    text-decoration: none;
    border-bottom: 1px solid var(--bo-outline-variant);
    transition: color 0.15s, background 0.15s;
}

.bo-mobile-link:hover { color: var(--bo-primary); background: var(--bo-surface-container-low); }
.bo-mobile-link--active { color: var(--bo-primary); font-weight: 600; }

/* ==========================================================================
   5. Homepage
   ========================================================================== */
.bo-homepage { padding: 0; }

/* Hero section */
.bo-hero-section {
    margin-bottom: var(--bo-xl);
    padding-top: var(--bo-xl);
}

/* 12-col hero grid: image 7/12, text 5/12 */
.bo-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bo-lg);
    align-items: stretch;
}

@media (min-width: 768px) {
    .bo-hero-grid { grid-template-columns: 7fr 5fr; }
}

.bo-hero-image-col {
    border-radius: var(--bo-radius-xl);
    overflow: hidden;
    border: 1px solid var(--bo-outline-variant);
    position: relative;
    height: 400px;
}

@media (min-width: 768px) { .bo-hero-image-col { height: 520px; } }

.bo-hero-image-wrap {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.bo-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bo-hero-badge {
    position: absolute;
    top: var(--bo-md);
    left: var(--bo-md);
    background: var(--bo-primary);
    color: var(--bo-on-primary);
    font-size: var(--bo-caption);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--bo-xs) var(--bo-sm);
    border-radius: var(--bo-radius);
}

.bo-hero-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--bo-md) 0;
}

@media (min-width: 768px) {
    .bo-hero-text-col { padding: var(--bo-md) 0 var(--bo-md) var(--bo-lg); }
}

.bo-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--bo-xs);
    margin-bottom: var(--bo-sm);
    color: var(--bo-on-surface-variant);
}

.bo-chip-secondary {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--bo-sm);
    background: none;
    color: var(--bo-secondary);
    font-size: var(--bo-label-md);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--bo-label-md-ls);
    text-decoration: none;
    transition: color 0.15s;
}

.bo-chip-secondary:hover { color: var(--bo-primary); }

.bo-hero-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--bo-outline-variant);
}

.bo-reading-time {
    font-size: var(--bo-caption);
    color: var(--bo-on-surface-variant);
}

.bo-hero-title {
    font-size: var(--bo-headline-xl-mobile);
    line-height: var(--bo-headline-xl-lh);
    letter-spacing: var(--bo-headline-xl-mobile-ls);
    font-weight: 700;
    color: var(--bo-primary);
    margin-bottom: var(--bo-md);
}

@media (min-width: 768px) {
    .bo-hero-title {
        font-size: var(--bo-headline-xl);
        letter-spacing: var(--bo-headline-xl-ls);
    }
}

.bo-hero-title a { color: inherit; text-decoration: none; }
.bo-hero-title a:hover { color: var(--bo-secondary); }

.bo-hero-excerpt {
    font-size: var(--bo-body-lg);
    line-height: var(--bo-body-lg-lh);
    color: var(--bo-on-surface-variant);
    margin-bottom: var(--bo-lg);
    max-width: 65ch;
}

.bo-hero-actions { display: flex; gap: var(--bo-md); flex-wrap: wrap; }

/* Divider */
.bo-divider {
    width: 100%;
    height: 1px;
    background: var(--bo-outline-variant);
    margin-bottom: var(--bo-xl);
}

/* Articles section header */
.bo-articles-section { margin-bottom: var(--bo-xl); }

.bo-articles-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--bo-lg);
}

.bo-articles-heading {
    font-size: var(--bo-headline-lg);
    line-height: var(--bo-headline-lg-lh);
    letter-spacing: var(--bo-headline-lg-ls);
    font-weight: 600;
    color: var(--bo-primary);
}

.bo-articles-sub {
    font-size: var(--bo-body-md);
    color: var(--bo-on-surface-variant);
    margin-top: var(--bo-xs);
}

.bo-view-archive {
    display: none;
    align-items: center;
    gap: var(--bo-xs);
    color: var(--bo-secondary);
    font-size: var(--bo-label-md);
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s;
}

@media (min-width: 768px) { .bo-view-archive { display: flex; } }
.bo-view-archive:hover { opacity: 0.75; color: var(--bo-secondary); }

/* ==========================================================================
   6. Article Cards (Homepage 4-col flat-card grid)
   Stitch: flat-card white bg, border outline-variant, hover border-primary,
           aspect-square image, rounded-xl, p-xs, category caption, h3 headline-md
   ========================================================================== */
.bo-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bo-gutter);
}

@media (min-width: 640px)  { .bo-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bo-card-grid { grid-template-columns: repeat(4, 1fr); } }

.bo-card {
    background: var(--bo-surface-container-lowest);
    border: 1px solid var(--bo-outline-variant);
    border-radius: var(--bo-radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color 0.2s;
}

.bo-card:hover { border-color: var(--bo-primary); }

/* Aspect-square image */
.bo-card-image-wrap {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background: var(--bo-surface-container);
}

.bo-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.bo-card:hover .bo-card-image { transform: scale(1.05); }

.bo-card-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--bo-surface-container-high);
}

.bo-card-body {
    padding: var(--bo-xs) var(--bo-sm) var(--bo-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--bo-xs);
}

.bo-card-category {
    font-size: var(--bo-caption);
    font-weight: 500;
    color: var(--bo-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    display: block;
    margin-bottom: var(--bo-xs);
}

.bo-card-title {
    font-size: var(--bo-headline-md);
    line-height: var(--bo-headline-md-lh);
    font-weight: 600;
    color: var(--bo-primary);
    transition: color 0.2s;
}

.bo-card:hover .bo-card-title { color: var(--bo-secondary); }

.bo-card-title a { color: inherit; text-decoration: none; }

.bo-card-excerpt {
    font-size: var(--bo-body-md);
    line-height: var(--bo-body-md-lh);
    color: var(--bo-on-surface-variant);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.bo-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.bo-card-date {
    font-size: var(--bo-caption);
    color: var(--bo-outline);
}

.bo-card-arrow {
    color: var(--bo-outline);
    flex-shrink: 0;
    transition: color 0.2s;
}

.bo-card:hover .bo-card-arrow { color: var(--bo-primary); }

/* Small card variant */
.bo-card--sm .bo-card-image-wrap { aspect-ratio: 16/9; }

/* ==========================================================================
   7. Article (Single Post) Page
   Stitch: max-w-[800px] mx-auto, white card, border, rounded-xl
   ========================================================================== */
.bo-article-page {
    padding: var(--bo-lg) 0 var(--bo-xl);
}

/* Breadcrumb */
.bo-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--bo-xs);
    color: var(--bo-on-surface-variant);
    font-size: var(--bo-label-md);
    line-height: var(--bo-label-md-lh);
    margin-bottom: var(--bo-lg);
}

.bo-breadcrumb-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.bo-breadcrumb-link:hover { color: var(--bo-primary); }

.bo-breadcrumb-sep { flex-shrink: 0; }

.bo-breadcrumb-current {
    color: var(--bo-primary);
    font-weight: 600;
}

/* Article card */
.bo-article-card {
    max-width: 800px;
    margin: 0 auto var(--bo-xl);
    background: var(--bo-surface-container-lowest);
    border: 1px solid var(--bo-outline-variant);
    border-radius: var(--bo-radius-xl);
    overflow: hidden;
}

/* Featured image: aspect-video full width */
.bo-article-image-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.bo-article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content body */
.bo-article-body {
    padding: var(--bo-lg);
}

@media (min-width: 768px) { .bo-article-body { padding: var(--bo-xl); } }

/* Category chip */
.bo-article-category-wrap { margin-bottom: var(--bo-md); }

.bo-chip-article {
    display: inline-flex;
    align-items: center;
    padding: var(--bo-xs) var(--bo-md);
    background: var(--bo-secondary-fixed);
    color: var(--bo-on-secondary-fixed-var);
    font-size: var(--bo-label-md);
    font-weight: 500;
    border-radius: var(--bo-radius-full);
    text-decoration: none;
    transition: background 0.15s;
}

.bo-chip-article:hover { background: var(--bo-secondary-fixed-dim); }

/* Article header */
.bo-article-header { margin-bottom: var(--bo-lg); }

.bo-article-title {
    font-size: var(--bo-headline-xl-mobile);
    line-height: var(--bo-headline-xl-lh);
    letter-spacing: var(--bo-headline-xl-mobile-ls);
    font-weight: 700;
    color: var(--bo-primary);
    margin-bottom: var(--bo-md);
}

@media (min-width: 768px) {
    .bo-article-title {
        font-size: var(--bo-headline-xl);
        letter-spacing: var(--bo-headline-xl-ls);
    }
}

.bo-article-subtitle {
    font-size: var(--bo-body-lg);
    line-height: var(--bo-body-lg-lh);
    color: var(--bo-on-surface-variant);
}

/* Author row */
.bo-article-author-row {
    display: flex;
    align-items: center;
    gap: var(--bo-md);
    border-top: 1px solid var(--bo-outline-variant);
    border-bottom: 1px solid var(--bo-outline-variant);
    padding: var(--bo-md) 0;
    margin-bottom: var(--bo-xl);
}

.bo-author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--bo-outline);
    background: var(--bo-surface-container-high);
    color: var(--bo-primary);
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.bo-author-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bo-author-name {
    font-size: var(--bo-label-md);
    font-weight: 700;
    color: var(--bo-on-surface);
}

.bo-author-meta {
    font-size: var(--bo-caption);
    color: var(--bo-on-surface-variant);
}

.bo-article-actions {
    display: flex;
    align-items: center;
    gap: var(--bo-sm);
    margin-left: auto;
}

/* Article footer */
.bo-article-footer {
    margin-top: var(--bo-xl);
    padding-top: var(--bo-lg);
    border-top: 1px solid var(--bo-outline-variant);
    display: flex;
    flex-wrap: wrap;
    gap: var(--bo-md);
    align-items: center;
    justify-content: space-between;
}

.bo-tags { display: flex; gap: var(--bo-sm); flex-wrap: wrap; }

.bo-tag {
    background: var(--bo-surface-container-high);
    color: var(--bo-on-surface-variant);
    font-size: var(--bo-label-md);
    padding: var(--bo-xs) var(--bo-sm);
    border-radius: var(--bo-radius);
}

.bo-article-share-row {
    display: flex;
    align-items: center;
    gap: var(--bo-md);
}

.bo-share-label {
    font-size: var(--bo-label-md);
    color: var(--bo-on-surface-variant);
}

.bo-share-icons { display: flex; gap: var(--bo-sm); }

.bo-share-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--bo-outline-variant);
    color: var(--bo-on-surface-variant);
    background: none;
    transition: border-color 0.2s, color 0.2s;
    text-decoration: none;
}

.bo-share-icon-btn:hover { border-color: var(--bo-primary); color: var(--bo-primary); }

/* Related */
.bo-related { margin-top: var(--bo-xl); padding-bottom: var(--bo-xl); }

.bo-related-heading {
    font-size: var(--bo-headline-lg);
    font-weight: 600;
    color: var(--bo-primary);
    margin-bottom: var(--bo-lg);
}

/* ==========================================================================
   8. Category Page
   ========================================================================== */
.bo-category-page { padding: var(--bo-xl) 0; }

.bo-cat-header { margin-bottom: var(--bo-xl); }

.bo-cat-title {
    font-size: var(--bo-headline-xl-mobile);
    line-height: var(--bo-headline-xl-lh);
    letter-spacing: var(--bo-headline-xl-ls);
    font-weight: 700;
    color: var(--bo-primary);
    margin-bottom: var(--bo-sm);
}

@media (min-width: 768px) {
    .bo-cat-title { font-size: var(--bo-headline-xl); }
}

.bo-cat-desc {
    font-size: var(--bo-body-lg);
    line-height: var(--bo-body-lg-lh);
    color: var(--bo-on-surface-variant);
    max-width: 42rem;
}

/* Controls */
.bo-cat-controls {
    display: flex;
    flex-direction: column;
    gap: var(--bo-md);
    align-items: flex-start;
    border-bottom: 1px solid var(--bo-outline-variant);
    padding-bottom: var(--bo-md);
    margin-bottom: var(--bo-lg);
}

@media (min-width: 768px) {
    .bo-cat-controls { flex-direction: row; align-items: center; justify-content: space-between; }
}

.bo-cat-filter-row { display: flex; align-items: center; gap: var(--bo-md); }

.bo-filter-btn {
    display: flex;
    align-items: center;
    gap: var(--bo-xs);
    padding: var(--bo-xs) var(--bo-md);
    border-radius: var(--bo-radius-lg);
    font-size: var(--bo-label-md);
    font-weight: 500;
    letter-spacing: var(--bo-label-md-ls);
    transition: opacity 0.15s;
    cursor: pointer;
    border: none;
    background: var(--bo-surface-container-low);
    color: var(--bo-on-surface-variant);
    border: 1px solid var(--bo-outline-variant);
}

.bo-filter-btn--active {
    background: var(--bo-primary);
    color: var(--bo-on-primary);
    border-color: var(--bo-primary);
}

.bo-cat-sort { display: flex; align-items: center; gap: var(--bo-sm); }

.bo-sort-label {
    font-size: var(--bo-label-md);
    color: var(--bo-on-surface-variant);
}

.bo-sort-btn {
    display: flex;
    align-items: center;
    gap: var(--bo-xs);
    padding: var(--bo-xs) var(--bo-md);
    background: var(--bo-surface-container-lowest);
    border: 1px solid var(--bo-outline-variant);
    border-radius: var(--bo-radius-lg);
    color: var(--bo-primary);
    font-size: var(--bo-label-md);
    font-weight: 500;
    transition: background 0.15s;
}

.bo-sort-btn:hover { background: var(--bo-surface-container-low); }

/* Category grid: 3 cols, featured spans 2 */
.bo-cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bo-gutter);
}

@media (min-width: 768px)  { .bo-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bo-cat-grid { grid-template-columns: repeat(3, 1fr); } }

/* Featured card (md:col-span-2, flex row) */
.bo-cat-card-featured {
    background: var(--bo-surface-container-lowest);
    border: 1px solid var(--bo-outline-variant);
    border-radius: var(--bo-radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .bo-cat-card-featured {
        grid-column: span 2;
        flex-direction: row;
    }
}

.bo-cat-card-featured:hover { border-color: var(--bo-primary); }

.bo-cat-featured-image-col {
    overflow: hidden;
    background: var(--bo-surface-container);
    height: 256px;
}

@media (min-width: 768px) {
    .bo-cat-featured-image-col { width: 50%; height: auto; }
}

.bo-cat-featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.bo-cat-card-featured:hover .bo-cat-featured-image { transform: scale(1.05); }

.bo-cat-featured-body {
    padding: var(--bo-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.bo-chip-featured {
    display: inline-block;
    padding: var(--bo-xs) var(--bo-sm);
    background: var(--bo-surface-container-highest);
    color: var(--bo-secondary);
    font-size: var(--bo-label-md);
    font-weight: 500;
    border-radius: var(--bo-radius);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: var(--bo-md);
}

.bo-cat-featured-title {
    font-size: var(--bo-headline-lg);
    line-height: var(--bo-headline-lg-lh);
    letter-spacing: var(--bo-headline-lg-ls);
    font-weight: 600;
    color: var(--bo-primary);
    margin-bottom: var(--bo-md);
    transition: color 0.2s;
}

.bo-cat-card-featured:hover .bo-cat-featured-title { color: var(--bo-secondary); }

.bo-cat-featured-title a { color: inherit; text-decoration: none; }

.bo-cat-featured-excerpt {
    font-size: var(--bo-body-md);
    color: var(--bo-on-surface-variant);
    line-height: var(--bo-body-md-lh);
    margin-bottom: var(--bo-lg);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bo-cat-featured-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.bo-cat-arrow {
    color: var(--bo-primary);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.bo-cat-card-featured:hover .bo-cat-arrow { transform: translateX(4px); }

/* Regular category cards */
.bo-cat-card {
    background: var(--bo-surface-container-lowest);
    border: 1px solid var(--bo-outline-variant);
    border-radius: var(--bo-radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s;
}

.bo-cat-card:hover { border-color: var(--bo-primary); }

.bo-cat-card-image-wrap {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--bo-surface-container);
    position: relative;
}

.bo-cat-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.bo-cat-card:hover .bo-cat-card-image { transform: scale(1.05); }

.bo-cat-card-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--bo-surface-container-high);
}

.bo-cat-card-body { padding: var(--bo-lg); }

.bo-chip-surface {
    display: inline-block;
    padding: var(--bo-xs) var(--bo-sm);
    background: var(--bo-surface-container);
    color: var(--bo-on-surface-variant);
    font-size: var(--bo-label-md);
    font-weight: 500;
    border-radius: var(--bo-radius);
    text-decoration: none;
    margin-bottom: var(--bo-md);
}

.bo-cat-card-title {
    font-size: var(--bo-headline-md);
    line-height: var(--bo-headline-md-lh);
    font-weight: 600;
    color: var(--bo-primary);
    margin-bottom: var(--bo-sm);
    transition: color 0.2s;
}

.bo-cat-card:hover .bo-cat-card-title { color: var(--bo-secondary); }

.bo-cat-card-title a { color: inherit; text-decoration: none; }

.bo-cat-card-excerpt {
    font-size: var(--bo-body-md);
    color: var(--bo-on-surface-variant);
    margin-bottom: var(--bo-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bo-caption-text {
    font-size: var(--bo-caption);
    color: var(--bo-on-surface-variant);
}

/* ==========================================================================
   9. Search Page
   ========================================================================== */
.bo-search-page { padding: var(--bo-xl) 0; }

.bo-search-header { margin-bottom: var(--bo-xl); }

.bo-search-label {
    font-size: var(--bo-label-md);
    color: var(--bo-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: var(--bo-xs);
}

.bo-search-title {
    font-size: var(--bo-headline-xl-mobile);
    line-height: var(--bo-headline-xl-lh);
    letter-spacing: var(--bo-headline-xl-mobile-ls);
    font-weight: 700;
    color: var(--bo-primary);
}

@media (min-width: 768px) {
    .bo-search-title { font-size: var(--bo-headline-xl); letter-spacing: var(--bo-headline-xl-ls); }
}

.bo-search-count {
    font-size: var(--bo-body-md);
    color: var(--bo-on-surface-variant);
    margin-top: var(--bo-sm);
}

/* 12-col search grid */
.bo-search-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bo-xl);
}

@media (min-width: 1024px) {
    .bo-search-grid { grid-template-columns: 3fr 9fr; }
}

/* Sidebar */
.bo-search-sidebar {
    display: none;
}

@media (min-width: 1024px) { .bo-search-sidebar { display: block; } }

.bo-sidebar-section { margin-bottom: var(--bo-lg); }

.bo-sidebar-section--border {
    padding-top: var(--bo-lg);
    border-top: 1px solid var(--bo-outline-variant);
}

.bo-sidebar-heading {
    font-size: var(--bo-label-md);
    font-weight: 500;
    color: var(--bo-primary);
    letter-spacing: var(--bo-label-md-ls);
    margin-bottom: var(--bo-md);
}

.bo-sidebar-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--bo-sm);
}

.bo-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--bo-body-md);
    color: var(--bo-on-surface-variant);
    cursor: pointer;
    transition: color 0.15s;
}

.bo-sidebar-item:hover,
.bo-sidebar-item--active { color: var(--bo-primary); font-weight: 600; }

.bo-sidebar-item a { color: inherit; text-decoration: none; }

.bo-sidebar-count { font-size: var(--bo-caption); }

.bo-sidebar-radios {
    display: flex;
    flex-direction: column;
    gap: var(--bo-sm);
}

.bo-sidebar-radio {
    display: flex;
    align-items: center;
    gap: var(--bo-sm);
    cursor: pointer;
    font-size: var(--bo-body-md);
}

.bo-radio {
    accent-color: var(--bo-primary);
    width: 16px;
    height: 16px;
}

/* Result list */
.bo-result-list {
    display: flex;
    flex-direction: column;
    gap: var(--bo-lg);
}

.bo-result-card {
    display: flex;
    flex-direction: column;
    gap: var(--bo-lg);
    background: var(--bo-surface-container-lowest);
    border: 1px solid var(--bo-outline-variant);
    border-radius: var(--bo-radius-xl);
    padding: var(--bo-md);
    cursor: pointer;
    transition: border-color 0.2s;
}

@media (min-width: 768px) {
    .bo-result-card {
        flex-direction: row;
        padding: var(--bo-lg);
    }
}

.bo-result-card:hover { border-color: var(--bo-primary); }

.bo-result-thumb {
    flex-shrink: 0;
    width: 100%;
    height: 128px;
    background: var(--bo-surface-container);
    border-radius: var(--bo-radius);
    overflow: hidden;
}

@media (min-width: 768px) {
    .bo-result-thumb { width: 192px; }
}

.bo-result-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bo-result-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--bo-sm);
}

.bo-result-meta {
    display: flex;
    align-items: center;
    gap: var(--bo-sm);
    margin-bottom: var(--bo-xs);
}

.bo-result-date { font-size: var(--bo-caption); color: var(--bo-outline); }

.bo-result-title {
    font-size: var(--bo-headline-md);
    line-height: var(--bo-headline-md-lh);
    font-weight: 600;
    color: var(--bo-primary);
    margin-bottom: var(--bo-sm);
    transition: color 0.2s;
}

.bo-result-card:hover .bo-result-title { color: var(--bo-secondary); }

.bo-result-title a { color: inherit; text-decoration: none; }

.bo-result-excerpt {
    font-size: var(--bo-body-md);
    color: var(--bo-on-surface-variant);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bo-result-read-link {
    display: inline-flex;
    align-items: center;
    gap: var(--bo-xs);
    color: var(--bo-secondary);
    font-size: var(--bo-label-md);
    font-weight: 500;
    text-decoration: none;
    margin-top: var(--bo-md);
    transition: opacity 0.15s;
}

.bo-result-read-link:hover { text-decoration: underline; color: var(--bo-secondary); }

/* ==========================================================================
   10. Static Page
   ========================================================================== */
.bo-page { padding: 0 0 var(--bo-xl); }

.bo-page-hero {
    padding: var(--bo-xl) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bo-page-badge {
    display: inline-block;
    padding: var(--bo-xs) var(--bo-sm);
    background: var(--bo-secondary-fixed);
    color: var(--bo-on-secondary-fixed-var);
    font-size: var(--bo-label-md);
    font-weight: 500;
    border-radius: var(--bo-radius-full);
    text-transform: uppercase;
    letter-spacing: var(--bo-label-md-ls);
    margin-bottom: var(--bo-lg);
}

.bo-page-title {
    font-size: var(--bo-headline-xl-mobile);
    line-height: var(--bo-headline-xl-lh);
    letter-spacing: var(--bo-headline-xl-mobile-ls);
    font-weight: 700;
    color: var(--bo-primary);
    max-width: 48rem;
}

@media (min-width: 768px) {
    .bo-page-title { font-size: var(--bo-headline-xl); letter-spacing: var(--bo-headline-xl-ls); }
}

.bo-page-body {
    max-width: 800px;
    margin: 0 auto;
}

.bo-page-image-wrap {
    aspect-ratio: 16/9;
    border-radius: var(--bo-radius-xl);
    overflow: hidden;
    border: 1px solid var(--bo-outline-variant);
    margin-bottom: var(--bo-xl);
}

.bo-page-image { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   11. 404 Page
   ========================================================================== */
.bo-error-page {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--bo-xl) var(--bo-md);
    gap: var(--bo-md);
    max-width: var(--bo-container);
    margin: 0 auto;
}

.bo-error-code {
    font-size: 120px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--bo-outline-variant);
    line-height: 1;
}

.bo-error-title {
    font-size: var(--bo-headline-xl-mobile);
    font-weight: 700;
    color: var(--bo-primary);
}

.bo-error-desc {
    font-size: var(--bo-body-lg);
    color: var(--bo-on-surface-variant);
    max-width: 420px;
}

.bo-error-actions { display: flex; gap: var(--bo-md); flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   12. Footer
   Stitch: bg-surface-container-low, border-t, single row
   ========================================================================== */
.bo-footer {
    background: var(--bo-surface-container-low);
    border-top: 1px solid var(--bo-outline-variant);
    margin-top: auto;
}

.bo-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bo-md);
    padding: var(--bo-lg) 0;
}

@media (min-width: 768px) {
    .bo-footer-inner { flex-direction: row; justify-content: space-between; }
}

.bo-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bo-xs);
}

@media (min-width: 768px) { .bo-footer-brand { align-items: flex-start; } }

.bo-footer-brand-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--bo-secondary);
    text-decoration: none;
}

.bo-footer-copy {
    font-size: var(--bo-caption);
    color: var(--bo-on-surface-variant);
}

.bo-footer-links {
    display: flex;
    gap: var(--bo-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.bo-footer-link {
    font-size: var(--bo-caption);
    color: var(--bo-on-surface-variant);
    text-decoration: underline;
    transition: color 0.2s;
}

.bo-footer-link:hover { color: var(--bo-primary); }

/* ==========================================================================
   13. Buttons
   ========================================================================== */
.bo-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bo-sm);
    padding: var(--bo-sm) var(--bo-lg);
    background: var(--bo-primary);
    color: var(--bo-on-primary);
    font-size: var(--bo-label-md);
    font-weight: 500;
    letter-spacing: var(--bo-label-md-ls);
    border-radius: var(--bo-radius-lg);
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.bo-btn-primary:hover { background: var(--bo-primary-container); color: var(--bo-on-primary); }

.bo-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bo-sm);
    padding: var(--bo-sm) var(--bo-lg);
    background: none;
    color: var(--bo-primary);
    font-size: var(--bo-label-md);
    font-weight: 500;
    letter-spacing: var(--bo-label-md-ls);
    border-radius: var(--bo-radius-lg);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--bo-primary);
    transition: background 0.2s, color 0.2s;
}

.bo-btn-outline:hover { background: var(--bo-primary); color: var(--bo-on-primary); }

/* Empty state */
.bo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bo-md);
    padding: var(--bo-xl) 0;
    text-align: center;
}

.bo-empty-text { font-size: var(--bo-headline-md); font-weight: 600; color: var(--bo-on-surface); }
.bo-empty-sub  { font-size: var(--bo-body-md); color: var(--bo-on-surface-variant); }

/* ==========================================================================
   14. Pagination
   ========================================================================== */
.bo-pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--bo-xl);
}

.pagination, .bo-pagination {
    display: flex;
    align-items: center;
    gap: var(--bo-md);
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-list { display: flex; gap: var(--bo-md); list-style: none; }

.pagination-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bo-outline-variant);
    border-radius: var(--bo-radius);
    font-size: var(--bo-label-md);
    font-weight: 500;
    color: var(--bo-on-surface-variant);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pagination-link:hover { background: var(--bo-primary); color: var(--bo-on-primary); border-color: var(--bo-primary); }

.pagination-link--active,
.pagination-item.active .pagination-link {
    background: var(--bo-primary);
    color: var(--bo-on-primary);
    border-color: var(--bo-primary);
    font-weight: 700;
    border-width: 2px;
}

.pagination-dots span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--bo-on-surface-variant);
}

/* ==========================================================================
   15. Prose Content Styles
   ========================================================================== */
.bo-prose {
    font-size: var(--bo-body-md);
    line-height: var(--bo-body-md-lh);
    color: var(--bo-on-surface);
}

.bo-prose p { margin-bottom: 1.5rem; }

.bo-prose h2 {
    font-size: var(--bo-headline-md);
    line-height: var(--bo-headline-md-lh);
    font-weight: 600;
    color: var(--bo-secondary);
    margin-top: var(--bo-xl);
    margin-bottom: var(--bo-md);
}

.bo-prose h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--bo-primary);
    margin-top: 1.75em;
    margin-bottom: var(--bo-sm);
}

/* Pull-quote: border-left primary, italic body-lg, light bg */
.bo-prose blockquote {
    margin: var(--bo-lg) 0;
    padding: var(--bo-lg);
    background: var(--bo-surface-container-low);
    border-left: 4px solid var(--bo-primary);
    border-radius: 0 var(--bo-radius-lg) var(--bo-radius-lg) 0;
}

.bo-prose blockquote p {
    font-size: var(--bo-body-lg);
    line-height: var(--bo-body-lg-lh);
    font-style: italic;
    color: var(--bo-primary);
    margin-bottom: 0;
}

.bo-prose ul { list-style: disc; padding-left: var(--bo-lg); margin-bottom: 1.5rem; }
.bo-prose ol { list-style: decimal; padding-left: var(--bo-lg); margin-bottom: 1.5rem; }
.bo-prose li { margin-bottom: var(--bo-sm); }

.bo-prose a { color: var(--bo-secondary); text-decoration: underline; text-underline-offset: 3px; }
.bo-prose a:hover { color: var(--bo-primary); }

.bo-prose img {
    max-width: 100%;
    border-radius: var(--bo-radius-lg);
    border: 1px solid var(--bo-outline-variant);
    margin: 1.5rem 0;
}

.bo-prose figure { margin: var(--bo-xl) 0; }

.bo-prose figcaption {
    text-align: center;
    font-size: var(--bo-caption);
    color: var(--bo-on-surface-variant);
    margin-top: var(--bo-sm);
}

.bo-prose code {
    font-family: 'Fira Code', monospace;
    background: var(--bo-surface-container-high);
    padding: 2px 4px;
    border-radius: var(--bo-radius);
    font-size: 0.875em;
    color: var(--bo-primary);
}

.bo-prose pre {
    background: var(--bo-inverse-surface);
    color: var(--bo-inverse-on-surface);
    padding: var(--bo-lg);
    border-radius: var(--bo-radius-lg);
    overflow-x: auto;
    margin-bottom: var(--bo-lg);
    font-size: 14px;
}

.bo-prose pre code { background: none; padding: 0; color: inherit; border-radius: 0; }

.bo-prose hr { border: none; border-top: 1px solid var(--bo-outline-variant); margin: 2.5em 0; }

/* ==========================================================================
   16. Responsive
   ========================================================================== */
@media (max-width: 767px) {
    .bo-nav-links, .bo-search-inline { display: none !important; }
    .bo-hamburger, .bo-search-toggle { display: flex; }
    .bo-error-code { font-size: 80px; }
    .bo-error-actions { flex-direction: column; }
}

@media (min-width: 768px) {
    .bo-hamburger, .bo-search-toggle { display: none !important; }
    .bo-mobile-drawer { display: none !important; }
}