/* ===== Jessie Vlog — Travel & Nature ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;background:#FFFBF5;color:#3D3D3D;line-height:1.8;font-size:16px}

/* Nav — soft natural green */
nav{background:#4A7C59;padding:0;position:sticky;top:0;z-index:999;box-shadow:0 2px 20px rgba(74,124,89,.2)}
.nav-inner{max-width:1000px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:58px}
.nav-logo{color:#fff;text-decoration:none;font-size:21px;font-weight:700;letter-spacing:.3px;display:flex;align-items:center;gap:10px}
.nav-logo img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.nav-links{display:flex;gap:28px}
.nav-links a{color:rgba(255,255,255,.8);text-decoration:none;font-size:15px;transition:color .2s;font-weight:500}
.nav-links a:hover{color:#FFE8A1}

/* Hero — with avatar */
.hero{background:linear-gradient(170deg,#E8F0E3 0%,#F5EDE0 60%,#FFFBF5 100%);padding:80px 24px 50px;text-align:center}
.hero-avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 4px 20px rgba(0,0,0,.1);margin-bottom:24px}
.hero h1{font-size:44px;font-weight:700;color:#3D3D3D;margin-bottom:10px;line-height:1.2}
.hero .tagline{font-size:18px;color:#7A8B6F;margin-bottom:6px;font-style:italic}
.hero p{font-size:16px;color:#888;max-width:500px;margin:auto;line-height:1.7}

/* Blog Grid */
.section-title{text-align:center;font-size:28px;color:#4A7C59;margin:50px 0 8px;font-weight:600}
.section-sub{text-align:center;color:#999;margin-bottom:35px;font-size:15px}
.blog-grid{max-width:1000px;margin:auto;padding:0 24px 80px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.post-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #F0EBE3;transition:all .35s;text-decoration:none;color:inherit;display:block}
.post-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(74,124,89,.1);border-color:#D4E0CF}
.post-thumb{width:100%;height:210px;object-fit:cover;background:linear-gradient(135deg,#E8F0E3,#F5EDE0)}
.post-body{padding:22px}
.post-date{font-size:12px;color:#B5A898;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;font-weight:600}
.post-body h2{font-size:20px;margin-bottom:8px;line-height:1.3;color:#3D3D3D}
.post-excerpt{font-size:14px;color:#888;line-height:1.7}

/* Full Post */
.post-full{max-width:720px;margin:auto;padding:50px 24px 80px}
.post-full h1{font-size:36px;font-weight:700;margin-bottom:6px;line-height:1.3;color:#3D3D3D}
.post-full .post-meta{color:#B5A898;font-size:14px;margin-bottom:35px}
.post-full .post-content{font-size:17px;line-height:2;color:#555}
.post-full .post-content p{margin-bottom:22px}
.post-full .post-content h2{font-size:24px;margin:45px 0 18px;color:#4A7C59;font-weight:600}
.post-full .post-content img,.post-full .post-content video{max-width:100%;border-radius:12px;margin:20px 0}
.post-video{position:relative;padding-bottom:56.25%;height:0;margin:20px 0;border-radius:12px;overflow:hidden}
.post-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.post-back{display:inline-block;color:#B5A898;text-decoration:none;font-size:14px;margin-bottom:40px;transition:color .2s}
.post-back:hover{color:#4A7C59}

/* About Page */
.about-page{max-width:700px;margin:auto;padding:60px 24px 80px;text-align:center}
.about-avatar{width:130px;height:130px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 8px 30px rgba(0,0,0,.08);margin-bottom:24px}
.about-page h1{font-size:36px;font-weight:700;margin-bottom:8px;color:#3D3D3D}
.about-page .about-tag{font-size:17px;color:#4A7C59;margin-bottom:24px;font-style:italic}
.about-page p{font-size:17px;color:#666;line-height:2;margin-bottom:20px;text-align:left}
.about-social{margin-top:35px}
.about-social a{display:inline-block;color:#4A7C59;text-decoration:none;margin:0 12px;font-weight:600;font-size:15px;transition:color .2s}
.about-social a:hover{color:#E8927C}

/* Footer */
footer{background:#4A7C59;color:rgba(255,255,255,.7);text-align:center;padding:35px 24px;font-size:13px}
footer a{color:#FFE8A1;text-decoration:none}
footer a:hover{color:#fff}

/* Responsive */
@media(max-width:600px){
  .hero h1{font-size:30px}
  .hero .tagline{font-size:15px}
  .hero p{font-size:14px}
  .hero-avatar{width:90px;height:90px}
  .blog-grid{grid-template-columns:1fr;gap:20px}
  .post-full h1{font-size:26px}
  .about-page h1{font-size:28px}
  .about-avatar{width:100px;height:100px}
}