:root {
      --color-bg: #F3F0E6;
      --color-text: #6A6456;
      --color-primary: #C49A5A;
      --color-border: #DCCFB8;
    }
    body { font-family: 'Libre Baskerville', serif; color: #6A6456; background-color: #F3F0E6; -webkit-font-smoothing: antialiased; }
    h1,h2,h3,h4,h5,h6 { font-family: 'Lora', serif; color: #3F3A33; }
    .nav-scrolled { background: rgba(243,240,230,0.85); backdrop-filter: blur(12px); border-color: #DCCFB8; }
    /* Menu mobile: backdrop solid agar link terbaca jelas, tidak tembus konten di belakangnya */
    #navbar.nav-open { background: #F3F0E6; border-color: #DCCFB8; box-shadow: 0 16px 36px -22px rgba(63,58,51,0.4); }
    .scroll-animate { opacity:0; transform:translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
    .scroll-animate.visible { opacity:1; transform:translateY(0); }
    .toast { transform:translateY(100px); opacity:0; transition:all 0.4s ease; }
    .toast.show { transform:translateY(0); opacity:1; }

    /* ═══════════════════════════════════════════════
       BLOG CARD
       ═══════════════════════════════════════════════ */
    .blog-card { display:flex; flex-direction:column; background:#FCFBF5; border:1px solid #DCCFB8; border-radius:0.5rem; overflow:hidden; position:relative; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
    .blog-card:hover { border-color:#C49A5A; box-shadow:0 8px 24px rgba(0,0,0,0.08); transform:translateY(-2px); }
    .blog-card__media { aspect-ratio:16/9; overflow:hidden; background:#E7DFC6; }
    .blog-card__media img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
    .blog-card:hover .blog-card__media img { transform:scale(1.05); }
    .blog-card__body { padding:1.25rem; flex:1; display:flex; flex-direction:column; }
    .blog-card__label { font-family:'IBM Plex Mono',monospace; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:#C49A5A; }
    .blog-card__date { font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:#6A6456; }
    .blog-card__title { font-family:Lora,serif; font-size:1.125rem; line-height:1.3; color:#3F3A33; margin:0.5rem 0 0.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .blog-card__excerpt { font-size:0.875rem; color:#6A6456; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .blog-card__readmore { margin-top:1rem; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:#3F3A33; }
    .blog-card__link { position:absolute; inset:0; z-index:1; }

    .blog-skeleton { background:linear-gradient(90deg,#E7DFC6 25%,#F3F0E6 50%,#E7DFC6 75%); background-size:200% 100%; animation:blogSkeleton 1.5s ease-in-out infinite; }
    @keyframes blogSkeleton { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

    .page-btn { transition: all 150ms ease; }

    /* Mobile font — teks diperbesar agar nyaman dibaca di layar kecil */
    @media (max-width: 767px){
      .text-sm { font-size:1rem !important; }
      .text-xs { font-size:0.8125rem !important; }
      .text-\[10px\] { font-size:0.75rem !important; }
      .blog-card__title { font-size:1.25rem; }
      .blog-card__excerpt { font-size:0.9375rem; }
      .blog-card__date, .blog-card__label, .blog-card__readmore { font-size:0.75rem; }
    }