:root {
            --beige:      #F0EAD6;
            --tan:        #D2B48C;
            --tan-dk:     #b8956a;
            --rose:       #BC4749;
            --rose-dk:    #9b3a3c;
            --rose-lt:    #f5e0e0;
            --teal:       #70A3A7;
            --teal-dk:    #4e7d80;
            --teal-lt:    #e8f2f3;
            --charcoal:   #403B33;
            --charcoal-lt:#5a5449;
        }

        /* ── DARK MODE ────────────────────────────── */
        /* ── Dark mode overrides ─────────────────────────── */
        [data-theme="dark"] body { background-color: #1e1c18 !important; color: #f0ead6 !important; }
        [data-theme="dark"] { 
            --beige:      #1e1c18;
            --tan:        #3a3528;
            --tan-dk:     #2e2a20;
            --rose-lt:    #4a2020;
            --teal-lt:    #1a3535;
            --charcoal:   #f0ead6;
            --charcoal-lt:#c8bfaa;
            --white:      #2a2720;
        }
        [data-theme="dark"] .site-header { background: rgba(20,18,14,.97) !important; border-color: rgba(240,234,214,.08) !important; }
        [data-theme="dark"] .nav-link { color: #c8bfaa !important; }
        [data-theme="dark"] .nav-link:hover { background: #2a2720 !important; color: #f0ead6 !important; }
        [data-theme="dark"] .logo-name { filter: brightness(1.3); }
        [data-theme="dark"] .main-nav { background: #1e1c18 !important; border-color: rgba(240,234,214,.08) !important; }
        [data-theme="dark"] .main-nav a { color: #c8bfaa !important; }
        [data-theme="dark"] .main-nav a:hover { background: #2a2720 !important; }
        /* ── End dark mode ────────────────────────────────── */

        .header-nav{display:flex;align-items:center;gap:4px}
        @media(max-width:860px){.header-nav,.nav-cta{display:none!important}.nav-toggle{display:block!important}}

        /* Dark toggle btn */
        .theme-toggle{background:none;border:1.5px solid rgba(64,59,51,.2);border-radius:8px;padding:5px 9px;font-size:.9rem;cursor:pointer;flex-shrink:0;margin-left:4px;transition:background .15s}
        .theme-toggle:hover{background:rgba(64,59,51,.08)}
        [data-theme="dark"] .theme-toggle{border-color:rgba(240,234,214,.2)}
        [data-theme="dark"] .theme-toggle:hover{background:rgba(240,234,214,.08)}

        /* ── HERO ─────────────────────────────────── */
        .hero {
            background: var(--charcoal);
            padding: 72px 24px 80px;
            position: relative; overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(ellipse at 75% 40%, rgba(112,163,167,.14) 0%, transparent 55%),
                        radial-gradient(ellipse at 20% 80%, rgba(188,71,73,.1) 0%, transparent 50%);
            pointer-events: none;
        }
        .hero-inner {
            max-width: 720px; margin: 0 auto;
            text-align: center; position: relative; z-index: 1;
        }
        .hero-eyebrow {
            font-size: .72rem; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; color: var(--teal);
            border: 1.5px solid rgba(112,163,167,.3); border-radius: 999px;
            padding: 5px 16px; display: inline-block; margin-bottom: 20px;
        }
        .hero-title {
            font-family: 'Fredoka', cursive;
            font-size: clamp(2.4rem, 6vw, 3.8rem);
            font-weight: 700; color: white; line-height: 1.05;
            margin-bottom: 14px;
        }
        .hero-title span { color: var(--teal); }
        .hero-sub {
            font-size: 1rem; color: rgba(240,234,214,.65);
            line-height: 1.75; max-width: 500px; margin: 0 auto 32px;
        }
        .hero-meta {
            display: flex; gap: 20px; justify-content: center;
            flex-wrap: wrap;
        }
        .hero-stat {
            text-align: center;
        }
        .hero-stat-val {
            font-family: 'Fredoka', cursive;
            font-size: 1.8rem; font-weight: 700;
            color: white; line-height: 1;
        }
        .hero-stat-lbl {
            font-size: .65rem; font-weight: 700; letter-spacing: .1em;
            text-transform: uppercase; color: rgba(240,234,214,.35);
            margin-top: 3px;
        }

        /* ── FILTER BAR ───────────────────────────── */
        .filter-bar {
            background: white;
            border-bottom: 1px solid rgba(64,59,51,.07);
            padding: 0 24px;
            position: sticky; top: 68px; z-index: 40;
            box-shadow: 0 2px 12px rgba(64,59,51,.05);
        }
        [data-theme="dark"] .filter-bar { background: #1a1814; border-color: rgba(240,234,214,.07); }
        .filter-inner {
            max-width: 1100px; margin: 0 auto;
            display: flex; align-items: center; gap: 8px;
            padding: 12px 0; overflow-x: auto; scrollbar-width: none;
        }
        .filter-inner::-webkit-scrollbar { display: none; }
        .filter-btn {
            font-size: .78rem; font-weight: 700; letter-spacing: .04em;
            padding: 6px 16px; border-radius: 999px; border: 1.5px solid transparent;
            cursor: pointer; white-space: nowrap; transition: all .15s;
            background: none; color: var(--charcoal-lt);
            border-color: rgba(64,59,51,.15);
        }
        .filter-btn:hover { background: var(--beige); border-color: var(--tan); color: var(--charcoal); }
        .filter-btn.active { background: var(--charcoal); color: var(--beige); border-color: var(--charcoal); }
        [data-theme="dark"] .filter-btn { color: #c8bfaa; border-color: rgba(240,234,214,.15); }
        [data-theme="dark"] .filter-btn:hover { background: #2a2720; }
        [data-theme="dark"] .filter-btn.active { background: var(--beige); color: var(--charcoal); border-color: var(--beige); }
        .filter-count {
            margin-left: auto; flex-shrink: 0;
            font-size: .75rem; font-weight: 600;
            color: var(--charcoal-lt); white-space: nowrap;
        }
        [data-theme="dark"] .filter-count { color: #8a8070; }

        /* ── POST GRID ────────────────────────────── */
        .posts-section {
            max-width: 1100px; margin: 0 auto;
            padding: 52px 24px 80px;
        }
        .posts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 24px;
        }
        @media(max-width: 480px) { .posts-grid { grid-template-columns: 1fr; } }

        /* ── POST CARD ────────────────────────────── */
        .post-card {
            background: white; border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(64,59,51,.08);
            transition: transform .22s ease, box-shadow .22s ease;
            display: flex; flex-direction: column;
            cursor: pointer;
        }
        .post-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(64,59,51,.13); }
        [data-theme="dark"] .post-card { background: #2a2620; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
        [data-theme="dark"] .post-card:hover { box-shadow: 0 14px 36px rgba(0,0,0,.4); }

        /* Card image */
        .post-thumb {
            width: 100%; aspect-ratio: 16/9;
            background: var(--tan); overflow: hidden;
            position: relative; flex-shrink: 0;
        }
        .post-thumb img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform .4s ease;
        }
        .post-card:hover .post-thumb img { transform: scale(1.04); }
        .post-thumb-placeholder {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            font-size: 3rem;
        }
        /* Per-tag thumb colours */
        .post-card[data-tag="books"]   .post-thumb-placeholder { background: linear-gradient(135deg, #f5e0e0, #e8c4c4); }
        .post-card[data-tag="games"]   .post-thumb-placeholder { background: linear-gradient(135deg, #e0edef, #c4d8da); }
        .post-card[data-tag="life"]    .post-thumb-placeholder { background: linear-gradient(135deg, #f5f0e8, #e8dfc8); }
        .post-card[data-tag="process"] .post-thumb-placeholder { background: linear-gradient(135deg, #ede8f5, #d8cfec); }
        .post-card[data-tag="update"]  .post-thumb-placeholder { background: linear-gradient(135deg, #e8f5e0, #cfe8c4); }

        /* Tag badge on thumb */
        .post-tag-badge {
            position: absolute; top: 12px; left: 12px;
            font-size: .62rem; font-weight: 800; letter-spacing: .07em;
            text-transform: uppercase; padding: 4px 11px;
            border-radius: 999px; z-index: 2;
        }
        .tag-site    { background: var(--teal-dk); color: white; }
        .tag-games   { background: var(--rose);    color: white; }
        .tag-update  { background: #4a7a3a;        color: white; }
        .tag-apps    { background: #3a6a9b;        color: white; }
        .tag-tools   { background: var(--tan-dk);  color: white; }
        .tag-brand   { background: #7a6a9b;        color: white; }

        /* Card body */
        .post-body {
            padding: 20px 22px 22px;
            display: flex; flex-direction: column; flex: 1;
        }
        .post-date {
            font-size: .68rem; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; color: var(--tan-dk);
            margin-bottom: 8px;
        }
        [data-theme="dark"] .post-date { color: #a08060; }
        .post-title {
            font-family: 'Lora', serif;
            font-size: 1.1rem; font-weight: 600;
            color: var(--charcoal); line-height: 1.35;
            margin-bottom: 10px;
        }
        [data-theme="dark"] .post-title { color: #f0ead6; }
        .post-excerpt {
            font-size: .85rem; color: var(--charcoal-lt);
            line-height: 1.7; flex: 1; margin-bottom: 16px;
        }
        [data-theme="dark"] .post-excerpt { color: #a09880; }
        .post-read-more {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: .8rem; font-weight: 700;
            color: var(--teal-dk);
            transition: gap .15s, color .15s;
        }
        .post-card:hover .post-read-more { gap: 9px; color: var(--rose); }

        /* ── EXPANDED POST MODAL ──────────────────── */
        .modal-backdrop {
            position: fixed; inset: 0; z-index: 200;
            background: rgba(40,35,28,.7);
            backdrop-filter: blur(6px);
            display: flex; align-items: flex-start; justify-content: center;
            padding: 40px 16px 40px;
            overflow-y: auto;
            opacity: 0; pointer-events: none;
            transition: opacity .3s ease;
        }
        .modal-backdrop.open { opacity: 1; pointer-events: all; }

        .modal {
            background: white; border-radius: 24px;
            width: 100%; max-width: 680px;
            box-shadow: 0 24px 80px rgba(0,0,0,.25);
            overflow: hidden;
            transform: translateY(24px) scale(.98);
            transition: transform .3s cubic-bezier(.34,1.56,.64,1);
            flex-shrink: 0;
        }
        [data-theme="dark"] .modal { background: #26221e; }
        .modal-backdrop.open .modal { transform: translateY(0) scale(1); }

        .modal-thumb {
            width: 100%; aspect-ratio: 16/9;
            overflow: hidden; position: relative;
        }
        .modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .modal-thumb-placeholder {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            font-size: 5rem;
        }
        .modal-close {
            position: absolute; top: 14px; right: 14px;
            background: rgba(0,0,0,.5); color: white;
            border: none; border-radius: 50%;
            width: 36px; height: 36px;
            font-size: 1.1rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background .15s; z-index: 5;
        }
        .modal-close:hover { background: rgba(0,0,0,.75); }

        .modal-body { padding: 32px 36px 40px; }
        @media(max-width:560px){ .modal-body { padding: 24px; } }

        .modal-tag { display: inline-block; margin-bottom: 10px; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
        .modal-date { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tan-dk); margin-bottom: 12px; }
        [data-theme="dark"] .modal-date { color: #a08060; }
        .modal-title {
            font-family: 'Lora', serif;
            font-size: clamp(1.4rem, 4vw, 1.9rem);
            font-weight: 600; color: var(--charcoal);
            line-height: 1.25; margin-bottom: 20px;
        }
        [data-theme="dark"] .modal-title { color: #f0ead6; }
        .modal-content {
            font-size: .95rem; color: var(--charcoal-lt);
            line-height: 1.85;
        }
        [data-theme="dark"] .modal-content { color: #b0a890; }
        .modal-content p { margin-bottom: 16px; }
        .modal-content p:last-child { margin-bottom: 0; }

        .modal-footer {
            padding: 20px 36px 28px;
            border-top: 1px solid rgba(64,59,51,.08);
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            flex-wrap: wrap;
        }
        [data-theme="dark"] .modal-footer { border-color: rgba(240,234,214,.07); }
        .modal-nav-btns { display: flex; gap: 10px; }
        .modal-nav-btn {
            font-size: .82rem; font-weight: 700;
            padding: 8px 16px; border-radius: 10px; border: none;
            cursor: pointer; transition: background .15s, color .15s;
            background: var(--beige); color: var(--charcoal);
        }
        .modal-nav-btn:hover { background: var(--tan); }
        .modal-nav-btn:disabled { opacity: .35; cursor: default; }
        [data-theme="dark"] .modal-nav-btn { background: #332e28; color: #c8bfaa; }
        [data-theme="dark"] .modal-nav-btn:hover { background: #3e3830; }
        .modal-close-btn {
            font-size: .82rem; font-weight: 700;
            padding: 8px 18px; border-radius: 10px; border: none;
            cursor: pointer; background: var(--rose); color: white;
            transition: filter .15s;
        }
        .modal-close-btn:hover { filter: brightness(1.1); }

        /* ── EMPTY STATE ──────────────────────────── */
        .empty-state {
            text-align: center; padding: 80px 24px; display: none;
        }
        .empty-state.show { display: block; }
        .empty-emoji { font-size: 3rem; margin-bottom: 16px; }
        .empty-msg { font-size: 1rem; color: var(--charcoal-lt); }

        /* ── NEW POST CTA ─────────────────────────── */
        .add-post-card {
            background: none;
            border: 2.5px dashed rgba(64,59,51,.18);
            border-radius: 20px;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 10px; padding: 40px 24px;
            cursor: default; min-height: 280px;
            color: var(--charcoal-lt);
        }
        [data-theme="dark"] .add-post-card { border-color: rgba(240,234,214,.12); color: #8a8070; }
        .add-post-icon { font-size: 2rem; opacity: .4; }
        .add-post-label { font-size: .82rem; font-weight: 600; opacity: .5; }

        /* ── FOOTER ───────────────────────────────── */
    



            :root {
            --beige:      #F0EAD6;
            --tan:        #D2B48C;
            --tan-dk:     #b8956a;
            --rose:       #BC4749;
            --rose-dk:    #9b3a3c;
            --rose-lt:    #f5e0e0;
            --teal:       #70A3A7;
            --teal-dk:    #4e7d80;
            --teal-lt:    #e8f2f3;
            --charcoal:   #403B33;
            --charcoal-lt:#5a5449;
        }

        /* ── DARK MODE ────────────────────────────── */
        /* ── Dark mode overrides ─────────────────────────── */
        [data-theme="dark"] body { background-color: #1e1c18 !important; color: #f0ead6 !important; }
        [data-theme="dark"] { 
            --beige:      #1e1c18;
            --tan:        #3a3528;
            --tan-dk:     #2e2a20;
            --rose-lt:    #4a2020;
            --teal-lt:    #1a3535;
            --charcoal:   #f0ead6;
            --charcoal-lt:#c8bfaa;
            --white:      #2a2720;
        }
        [data-theme="dark"] .site-header { background: rgba(20,18,14,.97) !important; border-color: rgba(240,234,214,.08) !important; }
        [data-theme="dark"] .nav-link { color: #c8bfaa !important; }
        [data-theme="dark"] .nav-link:hover { background: #2a2720 !important; color: #f0ead6 !important; }
        [data-theme="dark"] .logo-name { filter: brightness(1.3); }
        [data-theme="dark"] .main-nav { background: #1e1c18 !important; border-color: rgba(240,234,214,.08) !important; }
        [data-theme="dark"] .main-nav a { color: #c8bfaa !important; }
        [data-theme="dark"] .main-nav a:hover { background: #2a2720 !important; }
        /* ── End dark mode ────────────────────────────────── */

        .header-nav{display:flex;align-items:center;gap:4px}
        @media(max-width:860px){.header-nav,.nav-cta{display:none!important}.nav-toggle{display:block!important}}

        /* Dark toggle btn */
        .theme-toggle{background:none;border:1.5px solid rgba(64,59,51,.2);border-radius:8px;padding:5px 9px;font-size:.9rem;cursor:pointer;flex-shrink:0;margin-left:4px;transition:background .15s}
        .theme-toggle:hover{background:rgba(64,59,51,.08)}
        [data-theme="dark"] .theme-toggle{border-color:rgba(240,234,214,.2)}
        [data-theme="dark"] .theme-toggle:hover{background:rgba(240,234,214,.08)}

        /* ── HERO ─────────────────────────────────── */
        .hero {
            background: var(--charcoal);
            padding: 72px 24px 80px;
            position: relative; overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(ellipse at 75% 40%, rgba(112,163,167,.14) 0%, transparent 55%),
                        radial-gradient(ellipse at 20% 80%, rgba(188,71,73,.1) 0%, transparent 50%);
            pointer-events: none;
        }
        .hero-inner {
            max-width: 720px; margin: 0 auto;
            text-align: center; position: relative; z-index: 1;
        }
        .hero-eyebrow {
            font-size: .72rem; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; color: var(--teal);
            border: 1.5px solid rgba(112,163,167,.3); border-radius: 999px;
            padding: 5px 16px; display: inline-block; margin-bottom: 20px;
        }
        .hero-title {
            font-family: 'Fredoka', cursive;
            font-size: clamp(2.4rem, 6vw, 3.8rem);
            font-weight: 700; color: white; line-height: 1.05;
            margin-bottom: 14px;
        }
        .hero-title span { color: var(--teal); }
        .hero-sub {
            font-size: 1rem; color: rgba(240,234,214,.65);
            line-height: 1.75; max-width: 500px; margin: 0 auto 32px;
        }
        .hero-meta {
            display: flex; gap: 20px; justify-content: center;
            flex-wrap: wrap;
        }
        .hero-stat {
            text-align: center;
        }
        .hero-stat-val {
            font-family: 'Fredoka', cursive;
            font-size: 1.8rem; font-weight: 700;
            color: white; line-height: 1;
        }
        .hero-stat-lbl {
            font-size: .65rem; font-weight: 700; letter-spacing: .1em;
            text-transform: uppercase; color: rgba(240,234,214,.35);
            margin-top: 3px;
        }

        /* ── FILTER BAR ───────────────────────────── */
        .filter-bar {
            background: white;
            border-bottom: 1px solid rgba(64,59,51,.07);
            padding: 0 24px;
            position: sticky; top: 68px; z-index: 40;
            box-shadow: 0 2px 12px rgba(64,59,51,.05);
        }
        [data-theme="dark"] .filter-bar { background: #1a1814; border-color: rgba(240,234,214,.07); }
        .filter-inner {
            max-width: 1100px; margin: 0 auto;
            display: flex; align-items: center; gap: 8px;
            padding: 12px 0; overflow-x: auto; scrollbar-width: none;
        }
        .filter-inner::-webkit-scrollbar { display: none; }
        .filter-btn {
            font-size: .78rem; font-weight: 700; letter-spacing: .04em;
            padding: 6px 16px; border-radius: 999px; border: 1.5px solid transparent;
            cursor: pointer; white-space: nowrap; transition: all .15s;
            background: none; color: var(--charcoal-lt);
            border-color: rgba(64,59,51,.15);
        }
        .filter-btn:hover { background: var(--beige); border-color: var(--tan); color: var(--charcoal); }
        .filter-btn.active { background: var(--charcoal); color: var(--beige); border-color: var(--charcoal); }
        [data-theme="dark"] .filter-btn { color: #c8bfaa; border-color: rgba(240,234,214,.15); }
        [data-theme="dark"] .filter-btn:hover { background: #2a2720; }
        [data-theme="dark"] .filter-btn.active { background: var(--beige); color: var(--charcoal); border-color: var(--beige); }
        .filter-count {
            margin-left: auto; flex-shrink: 0;
            font-size: .75rem; font-weight: 600;
            color: var(--charcoal-lt); white-space: nowrap;
        }
        [data-theme="dark"] .filter-count { color: #8a8070; }

        /* ── POST GRID ────────────────────────────── */
        .posts-section {
            max-width: 1100px; margin: 0 auto;
            padding: 52px 24px 80px;
        }
        .posts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 24px;
        }
        @media(max-width: 480px) { .posts-grid { grid-template-columns: 1fr; } }

        /* ── POST CARD ────────────────────────────── */
        .post-card {
            background: white; border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(64,59,51,.08);
            transition: transform .22s ease, box-shadow .22s ease;
            display: flex; flex-direction: column;
            cursor: pointer;
        }
        .post-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(64,59,51,.13); }
        [data-theme="dark"] .post-card { background: #2a2620; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
        [data-theme="dark"] .post-card:hover { box-shadow: 0 14px 36px rgba(0,0,0,.4); }

        /* Card image */
        .post-thumb {
            width: 100%; aspect-ratio: 16/9;
            background: var(--tan); overflow: hidden;
            position: relative; flex-shrink: 0;
        }
        .post-thumb img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform .4s ease;
        }
        .post-card:hover .post-thumb img { transform: scale(1.04); }
        .post-thumb-placeholder {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            font-size: 3rem;
        }
        /* Per-tag thumb colours */
        .post-card[data-tag="books"]   .post-thumb-placeholder { background: linear-gradient(135deg, #f5e0e0, #e8c4c4); }
        .post-card[data-tag="games"]   .post-thumb-placeholder { background: linear-gradient(135deg, #e0edef, #c4d8da); }
        .post-card[data-tag="life"]    .post-thumb-placeholder { background: linear-gradient(135deg, #f5f0e8, #e8dfc8); }
        .post-card[data-tag="process"] .post-thumb-placeholder { background: linear-gradient(135deg, #ede8f5, #d8cfec); }
        .post-card[data-tag="update"]  .post-thumb-placeholder { background: linear-gradient(135deg, #e8f5e0, #cfe8c4); }

        /* Tag badge on thumb */
        .post-tag-badge {
            position: absolute; top: 12px; left: 12px;
            font-size: .62rem; font-weight: 800; letter-spacing: .07em;
            text-transform: uppercase; padding: 4px 11px;
            border-radius: 999px; z-index: 2;
        }
        .tag-site    { background: var(--teal-dk); color: white; }
        .tag-games   { background: var(--rose);    color: white; }
        .tag-update  { background: #4a7a3a;        color: white; }
        .tag-apps    { background: #3a6a9b;        color: white; }
        .tag-tools   { background: var(--tan-dk);  color: white; }
        .tag-brand   { background: #7a6a9b;        color: white; }

        /* Card body */
        .post-body {
            padding: 20px 22px 22px;
            display: flex; flex-direction: column; flex: 1;
        }
        .post-date {
            font-size: .68rem; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; color: var(--tan-dk);
            margin-bottom: 8px;
        }
        [data-theme="dark"] .post-date { color: #a08060; }
        .post-title {
            font-family: 'Lora', serif;
            font-size: 1.1rem; font-weight: 600;
            color: var(--charcoal); line-height: 1.35;
            margin-bottom: 10px;
        }
        [data-theme="dark"] .post-title { color: #f0ead6; }
        .post-excerpt {
            font-size: .85rem; color: var(--charcoal-lt);
            line-height: 1.7; flex: 1; margin-bottom: 16px;
        }
        [data-theme="dark"] .post-excerpt { color: #a09880; }
        .post-read-more {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: .8rem; font-weight: 700;
            color: var(--teal-dk);
            transition: gap .15s, color .15s;
        }
        .post-card:hover .post-read-more { gap: 9px; color: var(--rose); }

        /* ── EXPANDED POST MODAL ──────────────────── */
        .modal-backdrop {
            position: fixed; inset: 0; z-index: 200;
            background: rgba(40,35,28,.7);
            backdrop-filter: blur(6px);
            display: flex; align-items: flex-start; justify-content: center;
            padding: 40px 16px 40px;
            overflow-y: auto;
            opacity: 0; pointer-events: none;
            transition: opacity .3s ease;
        }
        .modal-backdrop.open { opacity: 1; pointer-events: all; }

        .modal {
            background: white; border-radius: 24px;
            width: 100%; max-width: 680px;
            box-shadow: 0 24px 80px rgba(0,0,0,.25);
            overflow: hidden;
            transform: translateY(24px) scale(.98);
            transition: transform .3s cubic-bezier(.34,1.56,.64,1);
            flex-shrink: 0;
        }
        [data-theme="dark"] .modal { background: #26221e; }
        .modal-backdrop.open .modal { transform: translateY(0) scale(1); }

        .modal-thumb {
            width: 100%; aspect-ratio: 16/9;
            overflow: hidden; position: relative;
        }
        .modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .modal-thumb-placeholder {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            font-size: 5rem;
        }
        .modal-close {
            position: absolute; top: 14px; right: 14px;
            background: rgba(0,0,0,.5); color: white;
            border: none; border-radius: 50%;
            width: 36px; height: 36px;
            font-size: 1.1rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background .15s; z-index: 5;
        }
        .modal-close:hover { background: rgba(0,0,0,.75); }

        .modal-body { padding: 32px 36px 40px; }
        @media(max-width:560px){ .modal-body { padding: 24px; } }

        .modal-tag { display: inline-block; margin-bottom: 10px; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
        .modal-date { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tan-dk); margin-bottom: 12px; }
        [data-theme="dark"] .modal-date { color: #a08060; }
        .modal-title {
            font-family: 'Lora', serif;
            font-size: clamp(1.4rem, 4vw, 1.9rem);
            font-weight: 600; color: var(--charcoal);
            line-height: 1.25; margin-bottom: 20px;
        }
        [data-theme="dark"] .modal-title { color: #f0ead6; }
        .modal-content {
            font-size: .95rem; color: var(--charcoal-lt);
            line-height: 1.85;
        }
        [data-theme="dark"] .modal-content { color: #b0a890; }
        .modal-content p { margin-bottom: 16px; }
        .modal-content p:last-child { margin-bottom: 0; }

        .modal-footer {
            padding: 20px 36px 28px;
            border-top: 1px solid rgba(64,59,51,.08);
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            flex-wrap: wrap;
        }
        [data-theme="dark"] .modal-footer { border-color: rgba(240,234,214,.07); }
        .modal-nav-btns { display: flex; gap: 10px; }
        .modal-nav-btn {
            font-size: .82rem; font-weight: 700;
            padding: 8px 16px; border-radius: 10px; border: none;
            cursor: pointer; transition: background .15s, color .15s;
            background: var(--beige); color: var(--charcoal);
        }
        .modal-nav-btn:hover { background: var(--tan); }
        .modal-nav-btn:disabled { opacity: .35; cursor: default; }
        [data-theme="dark"] .modal-nav-btn { background: #332e28; color: #c8bfaa; }
        [data-theme="dark"] .modal-nav-btn:hover { background: #3e3830; }
        .modal-close-btn {
            font-size: .82rem; font-weight: 700;
            padding: 8px 18px; border-radius: 10px; border: none;
            cursor: pointer; background: var(--rose); color: white;
            transition: filter .15s;
        }
        .modal-close-btn:hover { filter: brightness(1.1); }

        /* ── EMPTY STATE ──────────────────────────── */
        .empty-state {
            text-align: center; padding: 80px 24px; display: none;
        }
        .empty-state.show { display: block; }
        .empty-emoji { font-size: 3rem; margin-bottom: 16px; }
        .empty-msg { font-size: 1rem; color: var(--charcoal-lt); }

        /* ── NEW POST CTA ─────────────────────────── */
        .add-post-card {
            background: none;
            border: 2.5px dashed rgba(64,59,51,.18);
            border-radius: 20px;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 10px; padding: 40px 24px;
            cursor: default; min-height: 280px;
            color: var(--charcoal-lt);
        }
        [data-theme="dark"] .add-post-card { border-color: rgba(240,234,214,.12); color: #8a8070; }
        .add-post-icon { font-size: 2rem; opacity: .4; }
        .add-post-label { font-size: .82rem; font-weight: 600; opacity: .5; }

        /* ── FOOTER ───────────────────────────────── */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap}
.reveal{opacity:1!important;transform:none!important}

/* ── RELATED LINKS IN A POST ──────────────── */
.modal-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(64,59,51,.12)}
.modal-link{display:inline-flex;align-items:center;gap:7px;font-size:.87rem;font-weight:700;text-decoration:none;padding:11px 20px;border-radius:999px;transition:filter .15s,background .15s}
.modal-link--primary{background:var(--teal-dk);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.modal-link--primary:hover{filter:brightness(1.1)}
.modal-link--secondary{background:var(--beige);color:var(--charcoal);border:1.5px solid rgba(64,59,51,.16)}
.modal-link--secondary:hover{background:var(--tan)}
[data-theme="dark"] .modal-link--secondary{background:#332e28;color:#e8ddd0}
[data-theme="dark"] .modal-link--secondary:hover{background:#3e3830}
[data-theme="dark"] .modal-links{border-top-color:rgba(240,234,214,.12)}