/* =============================================
   BLOG INDEX — Page Styles
   Extracted from blog.html's inline <style> block.
   Built on the tokens defined in base.css (loaded before this file).

   NOTE: the .page-header / .page-logo / .page-back / .page-main /
   .page-hero classes here are named generically (not "blog-"
   prefixed) — if about.html/faq.html/safety.html/terms.html use this
   exact same header/hero pattern with their own inline copies, this
   file could likely be shared across all of them rather than
   duplicated per page. Left scoped to just this page's needs for now
   since I haven't seen those files to confirm they match exactly.
   ============================================= */

.page-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 1.5rem;
    background: rgba(7, 8, 15, .85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.page-logo {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.04em;
    background: linear-gradient(130deg, #fff 30%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}

.page-back {
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-3);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color .2s;
}

.page-back:hover {
    color: var(--text-1);
}

.page-main {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 1.5rem 6rem;
}

.page-hero {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.page-hero h1 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.15;
    margin-bottom: 10px;
}

.page-hero p {
    font-size: .95rem;
    color: var(--text-2);
    line-height: 1.8;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.blog-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 22px;
    text-decoration: none;
    display: block;
    transition: background .2s, border-color .2s, transform .15s;
}

.blog-card:hover {
    background: var(--bg-elevated);
    border-color: var(--border-md);
    transform: translateY(-2px);
}

.b-tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    display: block;
}

.blog-card h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 10px;
    line-height: 1.4;
}

.blog-card p {
    font-size: .855rem;
    color: var(--text-2);
    line-height: 1.7;
    margin-bottom: 14px;
}

.read-more {
    font-size: .8rem;
    font-weight: 600;
    color: var(--accent);
}

@media (max-width: 600px) {
    .page-main {
        padding: 2rem 1rem 4rem;
    }

    .page-hero h1 {
        font-size: 1.7rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }
}