* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #FF6B35;
    --secondary: #004E89;
    --accent: #1BA098;
    --footer-height: 88px;
    --light-bg: #F7F9FC;
    --dark-bg: #0F1419;
    --text-primary: #1a1a1a;
    --text-secondary: #666;
    --border-color: #e0e0e0;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.15);
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

/* Header & Navigation */
header {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    color: white;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

header::before {
    content: '🇺🇸';
    position: absolute;
    font-size: 400px;
    opacity: 0.07;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: flagWave 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    line-height: 1;
}

.header-content {
    position: relative;
    z-index: 1;
}

@keyframes flagWave {
    0%, 100% {
        transform: translate(-50%, -50%) scaleX(1) rotateZ(0deg);
    }
    25% {
        transform: translate(-45%, -50%) scaleX(1.05) rotateZ(1deg);
    }
    50% {
        transform: translate(-50%, -50%) scaleX(1.1) rotateZ(0deg);
    }
    75% {
        transform: translate(-55%, -50%) scaleX(1.05) rotateZ(-1deg);
    }
}

.header-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    position: relative;
    z-index: 1;
}

.header-nav {
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
}

.nav-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 38px;
    line-height: 1;
}

/* dark mode toggle: force square sizing to match header lock button */
.dark-mode-toggle {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
}

.nav-btn:hover {
    background: rgba(255, 107, 53, 0.3);
    border-color: rgba(255, 107, 53, 0.6);
    transform: translateY(-2px);
}

.header-right {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    align-items: start;
}

.header-top-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.header-content-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    grid-column: 2;
    justify-self: stretch;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    flex-direction: column;
    grid-column: 1;
    justify-self: start;
}

.logo:hover {
    transform: translateY(-3px);
}

.logo:hover .logo-image {
    box-shadow: 
        0 16px 40px rgba(255, 107, 53, 0.5),
        0 0 0 6px rgba(255, 107, 53, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: scale(1.08) rotate(-3deg);
}

.logo-container {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(27, 160, 152, 0.2) 100%);
    animation: glowPulse 3s ease-in-out infinite;
    z-index: 1;
}

.logo-image {
    width: 220px;
    height: 220px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.25),
        0 0 0 3px rgba(255, 107, 53, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    z-index: 2;
}

.logo-text-main {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-text-sub {
    font-size: 1rem;
    opacity: 0.8;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: var(--primary);
}

.header-tagline {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
}

.tagline-author {
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
}

.tagline-author span {
    color: var(--primary);
    font-style: italic;
}

.tagline-description {
    font-size: 0.85rem;
    color: #1a1a1a;
    font-style: italic;
    line-height: 1.5;
    font-weight: 500;
}

body.dark-mode .tagline-author {
    color: #FF6B35;
}

body.dark-mode .tagline-author span {
    color: #FFB84D;
}

body.dark-mode .tagline-description {
    color: #b0b0b0;
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(255, 107, 53, 0.3),
            0 0 40px rgba(27, 160, 152, 0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(255, 107, 53, 0.5),
            0 0 60px rgba(27, 160, 152, 0.2);
        transform: scale(1.02);
    }
}

@keyframes slideInLogo {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.logo-container {
    animation: slideInLogo 0.6s ease-out;
}

.search-container {
    flex: 1;
    max-width: 100%;
    margin: 0;
    width: 100%;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Header Info Box */
.header-info-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.header-info-box:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 107, 53, 0.5);
    box-shadow: 0 12px 48px rgba(255, 107, 53, 0.15);
}

.info-box-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}

.info-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.info-number {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.info-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.info-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, rgba(255, 107, 53, 0.3), transparent);
}

body.dark-mode .header-info-box {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 107, 53, 0.4);
}

body.dark-mode .header-info-box:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 107, 53, 0.6);
}

body.dark-mode .info-label {
    color: rgba(255, 255, 255, 0.6);
}

/* Main Container */
.container {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

/* Featured Post */
.featured-section {
    margin-bottom: 3rem;
}

.featured-post {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    cursor: pointer;
    height: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.featured-post:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-5px);
}

.featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.featured-content {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(135deg, #fff 0%, #f8fafb 100%);
}

.featured-tag {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    width: fit-content;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.featured-content h2 {
    font-size: 2rem;
    color: var(--secondary);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.featured-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.featured-meta {
    display: flex;
    gap: 2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Posts Grid */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.post-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.post-image-container {
    height: 200px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    overflow: hidden;
    position: relative;
}

.post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-card:hover .post-image {
    transform: scale(1.1);
}

.post-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.post-category-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.post-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-date {
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.post-title {
    font-size: 1.2rem;
    color: var(--secondary);
    margin-bottom: 0.8rem;
    line-height: 1.4;
    font-weight: 600;
}

.post-excerpt {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    flex: 1;
    line-height: 1.5;
}

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.read-time {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.read-btn {
    background: linear-gradient(135deg, var(--primary) 0%, #ff8557 100%);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.read-btn:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(255, 107, 53, 0.3);
}

/* Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.sidebar-title {
    font-size: 1.3rem;
    color: var(--secondary);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.filter-item {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.filter-item:hover {
    color: var(--primary);
    padding-left: 0.5rem;
}

.filter-count {
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Facebook Sidebar */
.facebook-sidebar {
    padding: 0;
    overflow: hidden;
}

.facebook-sidebar .sidebar-title {
    padding: 1.5rem 2rem 0 2rem;
    margin-bottom: 0;
}

.facebook-sidebar-embed {
    width: 100%;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

.facebook-sidebar-embed iframe {
    display: block;
    border-radius: 0 0 15px 15px;
}

body.dark-mode .facebook-sidebar {
    background: white;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stat {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}

.stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Pagination */
.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 0.7rem 1rem;
    border: 2px solid var(--border-color);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    color: var(--secondary);
}

.pagination-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.pagination-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    border-color: var(--primary);
}

/* Article Full Page */
.article-page-view {
    display: none;
    background: white;
    min-height: 100vh;
}

.article-page-view.show {
    display: block;
}

.article-header {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    color: white;
    padding: 4rem 2rem;
    text-align: center;
}

.back-to-blog {
    display: inline-block;
    margin-bottom: 2rem;
    padding: 0.6rem 1.4rem;
    background: linear-gradient(90deg, rgba(255,107,53,0.95) 0%, rgba(27,160,152,0.95) 100%);
    border: 0;
    color: white;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, opacity 220ms ease;
    font-weight: 700;
    box-shadow: 0 8px 30px rgba(27,160,152,0.14), 0 4px 12px rgba(255,107,53,0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.back-to-blog:hover,
.back-to-blog:focus {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 50px rgba(27,160,152,0.18), 0 8px 24px rgba(255,107,53,0.12);
    outline: none;
}

/* subtle pulse glow animation on idle (stops when focused) */
.back-to-blog::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6px;
    width: calc(100% + 18px);
    height: 12px;
    border-radius: 999px;
    filter: blur(10px);
    opacity: 0.45;
    background: linear-gradient(90deg, rgba(255,107,53,0.18), rgba(27,160,152,0.18));
    transition: opacity 220ms ease, transform 220ms ease;
}

.back-to-blog:active { transform: translateY(-1px) scale(0.995); }

/* Dark mode variants: invert gradient to fit dark header or page */
body.dark-mode .back-to-blog {
    background: linear-gradient(90deg, rgba(255,150,120,0.95) 0%, rgba(64,190,175,0.95) 100%);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.35);
}

/* header-sized variant for using inside nav */
.nav-btn.back-to-blog-header {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
    color: white;
    border: 1px solid rgba(255,255,255,0.16);
}

/* make sure header variant blends well on dark-mode header */
body.dark-mode .nav-btn.back-to-blog-header {
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-color: rgba(255,255,255,0.06);
}

.article-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.article-meta {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0.9;
}

body.dark-mode .article-meta {
    opacity: 1;
    color: #b0b0b0;
}

.article-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

body.dark-mode .article-container {
    background: #0f1419;
}

.article-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-primary);
}

body.dark-mode .article-content {
    color: #e8e8e8;
}

body.dark-mode .article-content p {
    color: #e8e8e8;
}

body.dark-mode .article-content h2,
body.dark-mode .article-content h3,
body.dark-mode .article-content h4 {
    color: #FF6B35;
}

body.dark-mode .article-content a {
    color: #4FC3F7;
}

body.dark-mode .article-content a:hover {
    color: #81D4FA;
}

body.dark-mode .article-content strong,
body.dark-mode .article-content b {
    color: #FFB84D;
}

body.dark-mode .article-content li,
body.dark-mode .article-content blockquote {
    color: #e8e8e8;
}

body.dark-mode .article-content pre {
    background: #1a1a1a;
    color: #e8e8e8;
}

body.dark-mode .article-content code {
    background: #2a2a2a;
    color: #4FC3F7;
}

/* Dark-mode rules for About page to ensure readable contrast */
body.dark-mode .about-intro p,
body.dark-mode .about-content p {
    color: #e8e8e8;
}

body.dark-mode .about-content .year {
    color: #FF6B35; /* accent color for year badges in dark mode */
}

body.dark-mode .about-content .year-content {
    color: #d0d0d0;
}

body.dark-mode .social-link {
    background: rgba(255,255,255,0.06);
    color: #e8e8e8;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

body.dark-mode .about-side-caption {
    color: #e0e0e0;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.post-card {
    animation: fadeInUp 0.6s ease-out;
}

/* Loading State */
.loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: 1fr;
    }

    .featured-post {
        grid-template-columns: 1fr;
        height: auto;
    }

    .featured-content {
        padding: 2rem;
    }

    .featured-content h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .header-content {
        padding: 0;
    }

    .header-nav {
        padding: 1rem;
        gap: 0.6rem;
    }

    .nav-group {
        gap: 0.6rem;
    }

    .nav-btn {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        height: 36px;
    }

    .header-right {
        grid-template-columns: 1fr;
        padding: 1.5rem 1rem;
        gap: 1rem;
    }

    .header-top-section {
        justify-content: center;
        gap: 0.8rem;
    }

    .search-container {
        max-width: 100%;
        width: 100%;
    }

    .dark-mode-toggle {
        padding: 0.6rem 1rem;
        font-size: 1.2rem;
    }

    .logo {
        grid-column: 1;
        justify-self: center;
        gap: 1rem;
    }

    .header-content-right {
        grid-column: 1;
        gap: 1rem;
    }

    .logo-container {
        width: 160px;
        height: 160px;
    }

    .logo-image {
        width: 160px;
        height: 160px;
        border-radius: 16px;
    }

    .logo-text-main {
        font-size: 1.8rem;
    }

    .logo-text-sub {
        font-size: 0.75rem;
    }

    .header-tagline {
        text-align: center;
        gap: 0.3rem;
    }

    .tagline-author {
        font-size: 0.85rem;
    }

    .tagline-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .header-info-box {
        padding: 1.2rem 1rem;
    }

    .info-box-content {
        gap: 0.8rem;
    }

    .info-number {
        font-size: 1.5rem;
    }

    .info-label {
        font-size: 0.65rem;
    }

    .info-divider {
        height: 30px;
    }

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

    .article-title {
        font-size: 1.8rem;
    }

    .article-meta {
        flex-direction: column;
        gap: 1rem;
    }
}

/* No Posts Message */
.no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.no-posts h2 {
    font-size: 1.8rem;
    color: var(--secondary);
    margin-bottom: 1rem;
}

/* Dark Mode */
body.dark-mode {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #e0e0e0;
}

body.dark-mode header {
    background: linear-gradient(135deg, #0f1419 0%, #1a1a2e 100%);
}

body.dark-mode .search-input {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .search-input:focus {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .post-card,
body.dark-mode .sidebar-card,
body.dark-mode .featured-post {
    background: #1e1e2e;
    color: #e0e0e0;
}

body.dark-mode .post-title,
body.dark-mode .featured-content h2,
body.dark-mode .sidebar-title,
body.dark-mode .article-title {
    color: #FF6B35;
}

body.dark-mode .filter-item {
    border-color: #333;
}

body.dark-mode .filter-item:hover {
    color: var(--primary);
}

body.dark-mode .article-page-view {
    background: #0f1419;
}

/* Dark Mode Toggle */
.dark-mode-toggle {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 0.8rem 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.15);
}

/* Header lock button (square) */
.header-lock-btn {
    width: 40px;
    height: 38px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
}
.header-lock-btn .lock-icon {
    display: block;
    width: 18px;
    height: 18px;
    color: white;
}
.header-lock-btn[aria-pressed="true"] {
    background: linear-gradient(90deg, rgba(255,107,53,0.95), rgba(27,160,152,0.95));
    box-shadow: 0 8px 24px rgba(27,160,152,0.12);
}

/* When header is hidden (auto-hide active), move it out of view */
header {
    transition: transform 220ms ease, box-shadow 220ms ease;
}
.header-hidden {
    transform: translateY(-110%);
}

/* Ensure header always visible when locked */
.header-locked {
    transform: translateY(0) !important;
    /* Pin header to the viewport so it no longer 'floats' relative to the document flow */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
}

/* Social Share Buttons */
.social-share {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

body.dark-mode .social-share {
    border-color: #333;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    border: 2px solid var(--border-color);
    background: white;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.9rem;
}

body.dark-mode .share-btn {
    background: #1e1e2e;
    border-color: #333;
    color: #e0e0e0;
}

.share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.share-btn.twitter:hover {
    color: #1DA1F2;
    border-color: #1DA1F2;
}

.share-btn.facebook:hover {
    color: #1877F2;
    border-color: #1877F2;
}

.share-btn.linkedin:hover {
    color: #0077B5;
    border-color: #0077B5;
}

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

/* Author Bio */
.author-bio {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    padding: 2rem;
    border-radius: 15px;
    margin-top: 3rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

body.dark-mode .author-bio {
    background: linear-gradient(135deg, #ff7543 0%, #2db5a8 100%);
}

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.author-info h3 {
    margin-bottom: 0.3rem;
}

.author-info p {
    opacity: 0.95;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Related Posts */
.related-posts-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid var(--border-color);
}

body.dark-mode .related-posts-section {
    border-color: #333;
}

.related-posts-section h2 {
    color: var(--secondary);
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

body.dark-mode .related-posts-section h2 {
    color: #FF6B35;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.related-card {
    background: var(--light-bg);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

body.dark-mode .related-card {
    background: #1e1e2e;
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.related-card-image {
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.related-card-content {
    padding: 1.5rem;
}

.related-card-title {
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.3;
}

body.dark-mode .related-card-title {
    color: #FF6B35;
}

.related-card-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Comments Section */
.comments-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid var(--border-color);
}

body.dark-mode .comments-section {
    border-color: #333;
}

.comments-section h2 {
    color: var(--secondary);
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

body.dark-mode .comments-section h2 {
    color: #FF6B35;
}

.comment-form {
    background: var(--light-bg);
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

body.dark-mode .comment-form {
    background: #1e1e2e;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    background: white;
    color: var(--text-primary);
}

body.dark-mode .comment-form input,
body.dark-mode .comment-form textarea {
    background: #0f1419;
    border-color: #333;
    color: #e0e0e0;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.comment-form button {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.comment-form button:hover {
    transform: translateX(5px);
    box-shadow: 0 10px 25px rgba(255, 107, 53, 0.3);
}

.comment {
    background: var(--light-bg);
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}

body.dark-mode .comment {
    background: #1e1e2e;
}

.comment-author {
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 0.3rem;
}

body.dark-mode .comment-author {
    color: #FF6B35;
}

.comment-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
}

.comment-text {
    color: var(--text-primary);
    line-height: 1.6;
}

body.dark-mode .comment-text {
    color: #e0e0e0;
}

/* About page styles (updated) */
.about-page {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 3rem 2rem; /* reduce horizontal padding to avoid overflow */
    background: transparent; /* inherit site background so about page matches home color/dark-mode */
    color: var(--text-primary);
    min-height: 100vh; /* keep full viewport height */
}

/* Override default .container grid for the about page so it uses full width
   and no sidebar. This only applies when the element has both classes. */
.container.about-page,
main.container.about-page {
    max-width: 100%;
    margin: 0;
    padding: 0; /* we'll handle internal padding in about-page */
    display: block;
    grid-template-columns: none;
    gap: 0;
}

/* Make about page inner content full-bleed: use the full available width
   (no centered narrow column). Padding kept for comfortable reading. */
.about-page .about-header,
.about-page .about-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Entry type tag (used inside .year-content) */
.entry-type {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: 0.6rem;
    padding: 0.12rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 800;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(27,160,152,1), rgba(255,107,53,1));
    color: #fff;
    vertical-align: middle;
    box-shadow: 0 8px 22px rgba(27,160,152,0.12);
}

.entry-type::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23ffffff'%20d='M12%203a3%203%200%200%200-3%203v5a3%203%200%200%200%206%200V6a3%203%200%200%200-3-3zM19%2011a1%201%200%200%200-2%200%205%205%200%200%201-10%200%201%201%200%200%200-2%200%207%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0.25rem;
}

body.dark-mode .entry-type {
    background: linear-gradient(90deg, rgba(64,190,175,0.95), rgba(255,150,120,0.95));
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* Timeline talk badge styling (rendered by about-timeline.js) */
.timeline-card.talk {
    border-left: 4px solid var(--accent);
}

.timeline-card .talk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: linear-gradient(90deg, rgba(27,160,152,1), rgba(0,78,137,1));
    color: white;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    border-radius: 999px;
    margin-bottom: 0.6rem;
    box-shadow: 0 12px 30px rgba(27,160,152,0.12);
}

.timeline-card .talk-badge::before {
    content: '';
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23ffffff'%20d='M12%203a3%203%200%200%200-3%203v5a3%203%200%200%200%206%200V6a3%203%200%200%200-3-3zM19%2011a1%201%200%200%200-2%200%205%205%200%200%201-10%200%201%201%200%200%200-2%200%207%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0.45rem;
}

body.dark-mode .timeline-card .talk-badge {
    background: linear-gradient(90deg, rgba(64,190,175,0.95), rgba(0,78,137,0.95));
}

/* position context so the left image can be absolutely positioned */
.about-page { position: relative; }

.about-page h1 {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
    text-align: left;
}

.about-page h2 {
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 1.35rem;
    color: var(--secondary);
    letter-spacing: 0.6px;
}

/* Footer */
.site-footer {
    background: linear-gradient(135deg, rgba(10,12,20,0.95), rgba(27,40,60,0.95));
    color: #e6e6e6;
    padding: 2.5rem 0 1.5rem;
}
.site-footer .footer-inner {
    max-width: 1500px; /* slightly wider */
    margin: 0 auto;
    padding: 1.25rem 1.5rem; /* inner padding for bordered box */
    /* boxed appearance: slightly higher contrast border & subtle tint */
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
    box-shadow: 0 10px 40px rgba(0,0,0,0.14) inset;
    display: grid;
    /* widen the right column so the terminal can expand closer to the center copy */
    grid-template-columns: 220px 1fr 420px; /* left, center, right */
    gap: 1.25rem;
    align-items: center;
}

.footer-grid {
    display: contents; /* keep semantic grid but let .footer-inner handle layout */
}

.footer-brand {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-self: start;
}

.footer-logo {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.footer-logo img {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 10px 36px rgba(0,0,0,0.55), 0 0 0 6px rgba(255,107,53,0.06);
}
.footer-site-title {
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.footer-tagline {
    margin-top: 6px;
    color: rgba(230,230,230,0.85);
    font-size: 0.92rem;
}

.footer-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    justify-self: center;
}
.footer-links a {
    color: rgba(230,230,230,0.9);
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    transition: all 200ms ease;
}
.footer-links a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255,107,53,0.08);
}

/* small terms link variant */
.footer-links .footer-terms {
    font-size: 0.85rem;
    opacity: 0.85;
    padding: 0.25rem 0.4rem;
}

.footer-links .centered {
    display: inline-block;
    margin: 0 auto;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.footer-center {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
}
.footer-center { padding: 0 1rem; }
.footer-top {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center; /* center the small group (Terms + built-with) */
    width: 100%;
    max-width: 1000px;
}

.footer-top { margin-bottom: 0.25rem; }

/* Small hacker-style terminal inside footer */
.footer-terminal {
    width: 100%;
    max-width: 720px;
    background: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(6,6,6,1));
    color: #00ff41; /* hacker green */
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
    border-radius: 10px;
    padding: 0.45rem 0.7rem;
    box-shadow: inset 0 -6px 18px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: center;
    overflow: hidden;
    margin-top: 0.25rem;
}
.footer-terminal .footer-terminal-screen {
    flex: 1 1 auto;
    /* accommodate more visible lines (approx 10 lines) */
    min-height: 220px;
    max-height: 360px;
    line-height: 1.25;
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}
.footer-terminal .terminal-caret {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: #00ff41; /* caret in hacker green */
    margin-left: 6px;
    border-radius: 2px;
    opacity: 0.95;
    animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* small control label on the right (pause/play) */
.footer-terminal .terminal-controls {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.65);
    opacity: 0.9;
}

/* responsive: shrink terminal on small screens */
@media (max-width: 640px) {
    .footer-terminal { max-width: 100%; padding: 0.45rem 0.6rem; }
    .footer-terminal .footer-terminal-screen { font-size: 0.78rem; min-height: 44px; }
    .footer-terminal .terminal-caret { width: 6px; height: 12px; }
}
.footer-copy {
    color: rgba(230,230,230,0.9);
    font-size: 0.95rem;
    display: block;
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: 0.4rem;
}
.footer-copy a { color: inherit; text-decoration: underline; }

/* small built-with area (yeti avatar + short copy) */
.footer-built {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: 0.4rem;
    color: rgba(230,230,230,0.9);
    font-size: 0.95rem;
}
.footer-built.left-built {
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
    align-items: center;
    margin-left: 0.25rem;
}
.footer-yeti.small { width: 96px; height: 96px; max-width: 96px; max-height: 96px; border-radius: 12px; }
.footer-yeti {
    width: 96px;
    height: 96px;
    max-width: 120px;
    max-height: 120px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.06);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.footer-yeti {
    /* smooth transform for hover interaction */
    transition: transform 240ms cubic-bezier(0.2, 0.9, 0.2, 1),
                box-shadow 240ms cubic-bezier(0.2, 0.9, 0.2, 1);
    transform-origin: center center;
    will-change: transform, box-shadow;
    z-index: 2;
}
.footer-yeti:hover,
.footer-yeti:focus {
    transform: translateY(-6px) scale(1.12) rotate(-1deg);
    box-shadow: 0 20px 48px rgba(0,0,0,0.55);
}
.footer-built-text { font-weight: 600; }

/* Ensure footer terms link matches site color and is readable (not fluorescent) */
.footer-terms {
    color: rgba(230,230,230,0.95) !important;
    text-decoration: none;
    font-weight: 700;
    font-family: inherit;
    transition: color 160ms ease, text-decoration-color 160ms ease;
}
.footer-terms:hover,
.footer-terms:focus {
    color: white !important;
    text-decoration: underline;
}

/* make sure footer text uses the page font and a pleasant weight */
.site-footer, .site-footer a, .site-footer button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgba(230,230,230,0.95);
}

/* On small screens stack the top row and keep terms full-width but visually distinct */
@media (max-width: 640px) {
    .footer-top {
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
    }
    .footer-terms {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
    .footer-built { gap: 0.5rem; }
    .footer-yeti { width: 72px; height: 72px; max-width: 28%; max-height: 72px; }
    .footer-terminal { max-width: 100%; padding: 0.35rem 0.5rem; }
}

.footer-social {
    display: flex;
    gap: 0.75rem;
    justify-self: end;
    flex-direction: row; /* terminal on the left, social links on the right */
    align-items: center;
}
.footer-social .footer-social-links { display:flex; gap:0.6rem; flex-direction: column; align-items: flex-end; }
.footer-terminal-right {
    flex: 1 1 auto; /* take remaining space */
    /* fill the right column so terminal reaches closer to the center copy */
    width: 100%;
    max-width: 100%;
    min-width: 220px;
}
.footer-terminal-right .footer-terminal-screen { font-size: 0.95rem; min-height: 220px; max-height: 360px; }
.footer-social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

/* small permission grant button inside terminal */
.perm-btn {
    margin-left: 0.6rem;
    padding: 0.25rem 0.45rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.35);
    color: #dfffe6;
    font-size: 0.75rem;
    cursor: pointer;
}
.perm-btn:disabled { opacity: 0.6; cursor: default; }
.footer-social .social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(27,160,152,0.08);
    background: linear-gradient(90deg, rgba(255,107,53,0.95), rgba(27,160,152,0.95));
}

.footer-bottom {
    margin-top: 1rem;
    text-align: center;
    color: rgba(230,230,230,0.7);
    padding-top: 0.8rem;
}

/* responsive: make the inner box stack on small screens */
@media (max-width: 768px) {
    .site-footer .footer-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        align-items: center;
    }
    .footer-links { order: 2; }
    .footer-social { order: 3; }
    .footer-brand { order: 1; }
    .footer-logo img { width: 72px; height: 72px; }
}

@media (max-width: 640px) {
    /* stack terminal above icons on small screens */
    .footer-social { flex-direction: column; align-items: stretch; }
    .footer-social .footer-social-links { order: 2; flex-direction: row; justify-content: center; }
    .footer-terminal-right { order: 1; width: 100%; max-width: none; }
}

/* Header terminal variant: smaller, placed in header area */
.header-terminal { max-width: 100%; padding: 0.35rem 0.5rem; }

/* make the header terminal lightly transparent so the animated flag in the header shows through */
.header-terminal {
    background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(6,6,6,0.55));
    border: 1px solid rgba(255,255,255,0.04);
    backdrop-filter: blur(6px) saturate(1.05);
    box-shadow: inset 0 -6px 18px rgba(0,0,0,0.35);
}
.header-terminal .footer-terminal-screen { font-size: 0.82rem; min-height: 88px; max-height: 180px; background: transparent; }

/* Dark-mode: make header terminal even more transparent so the animated flag shows through */
body.dark-mode .header-terminal {
    /* very subtle light tint instead of heavy black so underlying flag remains visible */
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    border-color: rgba(255,255,255,0.06);
    /* reduce the inset shadow so it doesn't mask the flag */
    box-shadow: inset 0 -6px 18px rgba(0,0,0,0.10);
    /* keep the subtle blur/saturation effect */
    backdrop-filter: blur(6px) saturate(1.05);
}

/* Structured per-line log entries inside header terminal */
.header-terminal .footer-terminal-screen .log-line {
    padding: 0.18rem 0.28rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    color: #9cffb6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
    font-size: 0.82rem;
}
.header-terminal .footer-terminal-screen .log-line .log-ts { color: #cdebd2; opacity: 0.95; }
.header-terminal .footer-terminal-screen .log-line .log-ago { color: rgba(220,255,210,0.8); font-size: 0.75rem; opacity: 0.9; }
.header-terminal .footer-terminal-screen .log-line .log-path { color: #9cffb6; opacity: 0.95; }
.header-terminal .footer-terminal-screen .log-line .log-title { color: #eafff0; opacity: 0.98; font-weight: 600; }

/* make the tooltip appear using native title, but provide a focusable hover effect */
.header-terminal .footer-terminal-screen .log-line:hover { background: rgba(255,255,255,0.02); }

/* preview line inserted on hover (temporary) */
.header-terminal .footer-terminal-screen .log-preview {
    display: block;
    padding: 0.2rem 0.3rem;
    color: #9cffb6;
    font-weight: 700;
}

/* small label indicating event type (hover/click/visit) */
.header-terminal .footer-terminal-screen .log-line .log-type {
    color: rgba(180,255,200,0.95);
    font-size: 0.78rem;
    opacity: 0.95;
    min-width: 46px;
    display:inline-block;
}

/* header terminal controls */
.header-terminal-controls { display: flex; gap: 0.4rem; position: absolute; right: 1rem; top: 0.5rem; z-index: 3; }
.header-terminal .perm-btn { font-size: 0.72rem; padding: 0.25rem 0.45rem; }
.header-terminal.collapsed .footer-terminal-screen { min-height: 28px; max-height: 120px; font-size: 0.78rem; }

/* expand toggle for very small screens */
.header-expand-toggle { display: none; position: absolute; right: 1rem; top: 0.6rem; z-index: 1200; }

@media (max-width: 480px) {
    /* hide the full header terminal on very small screens; show a small toggle */
    .header-terminal { display: none; }
    .header-expand-toggle { display: inline-block; }
}

/* decreased header terminal min-height on narrower viewports */
@media (max-width: 1024px) {
    .header-terminal .footer-terminal-screen { min-height: 72px; max-height: 140px; font-size: 0.78rem; }
}


/* ensure main content areas expand so footer stays at bottom on short pages */
#blogView, .article-page-view, main {
    flex: 1 0 auto;
}

/* Floating back to top button */
.back-to-top {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--footer-height) + 1rem);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(10,14,20,0.18);
    border: none;
    cursor: pointer;
    z-index: 1400;
    transition: transform 180ms ease, opacity 180ms ease;
    opacity: 0; /* hidden by default, shown when JS toggles class */
}
.back-to-top svg { display:block; color: white; }
.back-to-top.show { opacity: 1; transform: translateY(0); }
.back-to-top:focus { outline: none; box-shadow: 0 0 0 6px rgba(27,160,152,0.12); }

/* if the footer grows larger on smaller screens, push the button up a bit more */
@media (max-width: 768px) {
    .back-to-top { right: 0.8rem; bottom: calc(var(--footer-height) + 0.6rem); }
}

body.dark-mode .site-footer {
    background: linear-gradient(135deg, #071018, #081426);
    color: #dcdcdc;
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-social { justify-content: center; }
    .footer-links { justify-content: center; flex-wrap: wrap; }
    .footer-brand { justify-content: center; }
}

.about-header {
    display: block;
    margin-bottom: 1.5rem;
    width: 100%;
}

.about-avatar {
    display: none;
}

.about-intro p {
    line-height: 1.8;
    color: var(--text-primary);
    font-size: 1.04rem;
    width: 100%;
}

.avatar-wrap { display:flex; flex-direction:column; align-items:center; gap:0.6rem; }
.avatar-caption { font-weight:800; color:var(--secondary); font-size:0.95rem; }

.social-links { display:flex; gap:0.6rem; margin-top:0.8rem; flex-direction: column; align-items: flex-start; }
.social-link { display:inline-flex; align-items:center; justify-content:center; padding:0.45rem 0.7rem; border-radius:8px; background:white; color:var(--secondary); box-shadow:0 8px 20px rgba(12,17,23,0.06); text-decoration:none; font-weight:700; }

/* Main content card */
.about-content {
    width: 100%;
    max-width: none;
    margin: 1.25rem 0 2rem 0;
    background: transparent; /* remove card look to avoid sidebar feel */
    padding: 0.5rem 0; /* keep paragraphs flowing but allow some breathing room */
    border-radius: 0;
    box-shadow: none;
}

.about-content p { margin: 0 0 1.25rem 0; line-height: 1.85; font-size: 1.03rem; color: #111; }

.about-content .year { display:block; font-weight:900; color:var(--secondary); font-size:1.05rem; margin-bottom:0.35rem; }
.about-content .year-content { display:block; color:var(--text-secondary); font-weight:500; }

@media (max-width: 900px) {
    .about-page { padding: 1rem 1rem; }
    .about-header { flex-direction: column; align-items: center; }
    .about-avatar { width: 140px; height: 140px; }
    .about-content { padding: 1rem; }
}

/* Floating left image in the white-space next to content */

.about-left-image {
    position: absolute;
    top: 140px;
    /* place the image left of the centered content (content max-width = 1100px) */
    left: calc(50% - 700px);
    width: 220px;
    text-align: center;
    pointer-events: auto;
}

.about-side-img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 18px 50px rgba(10,14,20,0.12);
    border: 6px solid rgba(255,255,255,0.95);
    transition: transform 320ms cubic-bezier(.2,.9,.3,1), box-shadow 320ms ease;
}

/* Hover animation and subtle bob */
.about-left-image:hover .about-side-img {
    transform: translateY(-8px) scale(1.04) rotate(-1.2deg);
    box-shadow: 0 30px 70px rgba(10,14,20,0.18);
}

@keyframes floatBob {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

.about-left-image .about-side-img { animation: floatBob 6s ease-in-out infinite; }

.about-side-caption { margin-top: 0.45rem; font-weight:700; color:var(--secondary); font-size:0.95rem; }

@media (max-width: 1200px) {
    .about-left-image { display: none; }
}

/* Ensure content is vertically centered when there's little content */
/* natural flow for .about-content (no forced min-height) */

/* Keep backward compatibility for small utility */
.about-page .timeline-entry { margin-bottom: 1rem; }

/* Timeline component styles */
.timeline-wrap {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 2rem 0;
    padding: 2rem 0;
}

/* central vertical line */
.timeline-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    transform: translateX(-50%);
    border-radius: 4px;
}

.timeline-item {
    /* Make each timeline entry span the full width and center the card.
       The card itself will be narrower but will use most of the available space
       so the wording can take almost the full width. */
    position: relative;
    width: 100%;
    padding: 0.75rem 0;
    /* reserve larger vertical space at the top so the badge doesn't overlap the card text */
    padding-top: 5.5rem;
    display: flex;
    justify-content: center;
    text-align: left;
}

.timeline-item.left,
.timeline-item.right {
    left: 0;
    text-align: left;
}

.timeline-badge {
    position: absolute;
    top: 18px;
    /* centered on the central line */
    left: 50%;
    transform: translateX(-50%);
    /* make badge a rounded rectangle to accommodate year ranges */
    min-width: 86px;
    height: auto;
    padding: 10px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: white;
    background: var(--secondary);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    white-space: nowrap;
    text-align: center;
    z-index: 6; /* stay above cards */
}

/* Alternate badge colors for visual variety */
.timeline-wrap .timeline-item:nth-child(odd) .timeline-badge {
    background: linear-gradient(135deg, var(--primary) 0%, #ff8a63 100%);
}
.timeline-wrap .timeline-item:nth-child(even) .timeline-badge {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
}

/* Ensure badges are keyboard-focusable and show a clear outline */
.timeline-badge:focus,
.timeline-badge:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px rgba(27,160,152,0.12), 0 12px 40px rgba(0,0,0,0.12);
    transform: scale(1.05);
}

/* make the badge anchor show pointer cursor */
.timeline-badge {
    cursor: pointer;
    text-decoration: none;
}

/* Focus styles for accessibility */
.timeline-badge:focus {
    outline: none;
    box-shadow: 0 0 0 6px rgba(27,160,152,0.12), 0 8px 30px rgba(0,0,0,0.12);
    transform: scale(1.03);
}

.timeline-card {
    display: block;
    background: white;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(10,14,20,0.06);
    /* make the card span most of the available width while leaving
       room for the central line and badge */
    width: calc(100% - 180px);
    max-width: none;
    box-sizing: border-box;
    margin: 0 auto;
}

.timeline-card:focus {
    outline: none;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 6px rgba(255,107,53,0.06);
    transform: translateY(-4px);
}

/* Ensure badge stays centered on the central line; remove per-side offsets that
    previously pulled the badge out of center. */
.timeline-item.left .timeline-badge,
.timeline-item.right .timeline-badge { left: 50%; transform: translateX(-50%); }

.timeline-year-small { font-size: 0.95rem; letter-spacing: 0.6px; }
.timeline-content { color: var(--text-secondary); line-height: 1.6; }

.timeline-item .connector {
    /* connectors are hidden in the centered-card layout to avoid visual clutter */
    display: none;
}

/* Prevent the connector from visually obscuring the badge year by putting
   the badge above the connector and slightly adjusting connector placement.
   The badge has a higher stacking context so the year remains readable. */
.timeline-badge { z-index: 5; }
.timeline-item .connector { z-index: 2; }

/* Slightly shorten the connector and vertically center it to avoid overlapping
   the numeric year text inside the circular badge. */
.timeline-item .connector {
    width: 20px;
    height: 6px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 900px) {
    .timeline-wrap::before { left: 20px; }
    .timeline-item { width: 100%; padding: 0.5rem 0; padding-top: 3rem; }
    .timeline-item.left, .timeline-item.right { left: 0; text-align: left; }
    .timeline-item .timeline-badge { left: 20px; transform: translateX(0); min-width: 56px; padding: 8px 10px; border-radius: 10px; white-space: normal; }
    .about-left-image { display: none; }
}

/* Desktop: allocate a left column for the floating image to avoid overlap
   This converts the about page into a two-column layout on wide screens so
   the avatar/image sits in its own column and the content/timeline live
   in the right column without colliding. */
@media (min-width: 1200px) {
    .container.about-page {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 2rem;
        align-items: start;
        padding: 3rem 2rem;
    }

    /* make the floating image part of the header layout (no absolute positioning) */
    .about-left-image {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 220px;
        margin: 0;
        justify-self: start;
        align-self: start;
        display: block;
        flex-shrink: 0;
    }

    /* force header and content into second column */
    .about-header, .about-content, .timeline-wrap {
        grid-column: 2;
        max-width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* layout header: image next to intro */
    .about-header {
        display: flex;
        gap: 1.5rem;
        align-items: flex-start; /* align top of image with intro text */
    }

    .about-intro {
        flex: 1 1 auto;
    }

    /* keep timeline centered inside the content column and limit its width */
    .timeline-card {
        display: block;
        background: white;
        padding: 1rem 1.25rem;
        border-radius: 10px;
        box-shadow: 0 8px 30px rgba(10,14,20,0.06);
        /* keep a sane maximum width to avoid cards stretching under the central line */
        /* allow the card to be wider so long descriptions have more room */
        width: calc(100% - 120px);
        max-width: 1100px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    /* Terms modal styles */
    .site-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(6,10,14,0.6);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1600;
        padding: 1.5rem;
    }
    .site-modal-backdrop.show {
        display: flex;
    }
    .site-modal-panel {
        width: 100%;
        max-width: 980px;
        max-height: 86vh;
        background: white;
        border-radius: 12px;
        overflow: auto;
        box-shadow: 0 30px 80px rgba(0,0,0,0.6);
        position: relative;
        padding: 1.25rem 1.5rem;
    }
    body.dark-mode .site-modal-panel { background: #0f1419; color: #e8e8e8; }
    .site-modal-close {
        position: absolute;
        right: 12px;
        top: 12px;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: rgba(255,255,255,0.06);
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .site-modal-close:focus { outline: none; box-shadow: 0 0 0 6px rgba(27,160,152,0.12); }
    .site-modal-body { padding-top: 0.75rem; }

    /* prevent body scroll when modal is open */
    body.modal-open { overflow: hidden; }