:root {
	--bg: #0b0b0b;
	--card: #121212;
	--text: #f8f8f8;
	--muted: #c9c9c9;
	--brand: #7BA05B;    /* 主色：绿茶色 */
	--brand-2: #5C8A47;  /* 次色：深茶绿 */
	--ring: rgba(123, 160, 91, .35);
	--shadow: 0 10px 30px rgba(0,0,0,.35);
	--radius: 16px;
	--maxw: 1100px;
}

/* Global Image Reset - Fixes overhead sized images */
img { max-width: 100%; height: auto; display: block; }

* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	color: var(--text);
	background: var(--bg);
}

/* --- Layout 1: Home Page (Parallax Blur) --- */
/* Only applies when body has class="home-page" */
body.home-page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background: url('../img/bg.jpg') center center / cover no-repeat;
	/* 
	   Dynamic effect based on --scroll-ratio (0 to 1):
	   - Filter: Blurs from 0px to 8px
	   - Brightness: Darkens from 80% to 40% (simulating fading to average color)
	   - Scale: Zooms in slightly from 1.0 to 1.1 for depth
	*/
	filter: blur(calc(var(--scroll-ratio, 0) * 8px)) brightness(calc(0.8 - var(--scroll-ratio, 0) * 0.4));
	transform: scale(calc(1 + var(--scroll-ratio, 0) * 0.1));
	/* transition toggled off to prevent flickering during scroll */
	/* transition: filter 0.1s linear, transform 0.1s linear; */ 
	pointer-events: none;
	will-change: transform, filter;
}

/* --- Layout 2: Sub-pages (Sketch / Negative) --- */
/* Concept: "Dark Blueprint" - High contrast inverted sketch-like texture */
body:not(.home-page) {
	background-color: #0b0b0b;
	background-image: none;
}

body:not(.home-page)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: url('../img/bg.jpg') center center / cover no-repeat;
	/* 
	   Simulate "Line Art / Edge Detection" effect:
	   1. grayscale(1): Remove color to make it monochrome.
	   2. invert(1): Turn dark areas (features) to light, creating a "negative" look.
	   3. contrast(3): Push greys to black/white to simulate line art.
	*/
	filter: grayscale(100%) invert(100%) contrast(300%) brightness(1.2);
	
	/* Blend into the dark background */
	opacity: 0.13; /* Keep it very subtle */
	mix-blend-mode: screen; /* Light parts (lines) show up on dark bg */
	pointer-events: none;
}


a { color: inherit; text-decoration: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 24px; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(10px); background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; }
.brand .dot { width:10px; height:10px; border-radius:50%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: 0 0 0 4px var(--ring); }
.nav-links { display:flex; gap:18px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:999px; border:1px solid color-mix(in oklab, var(--brand) 45%, transparent); background: color-mix(in oklab, var(--card) 80%, transparent); box-shadow: var(--shadow); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); border-color: #B8860B; }

/* Hero Section */
.hero { display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; padding: 40px 0 24px; }
.hero-card { background: linear-gradient(180deg, color-mix(in oklab, var(--card) 88%, transparent), color-mix(in oklab, var(--card) 100%, transparent)); border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent); border-radius: calc(var(--radius) + 6px); padding: 28px; box-shadow: var(--shadow); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.hero-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); border-color: #B8860B; }

.kicker { color: var(--brand-2); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:12px; }
.title { font-size: clamp(28px, 4vw, 44px); line-height:1.12; margin:10px 0; font-weight:800; }
.subtitle { color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); line-height:1.7; }
.cta { margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }

/* Avatar */
.avatar-card { position: relative; aspect-ratio:1/1; border-radius:22px; overflow:hidden; background:#111; border:1px solid color-mix(in oklab, var(--brand) 20%, transparent); box-shadow: var(--shadow); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.avatar-card:hover { transform: scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.3); border-color: #B8860B; }
.avatar-card img { width:100%; height:100%; object-fit: cover; }
.badge { position:absolute; left:14px; bottom:14px; padding:8px 12px; border-radius:999px; font-size:13px; font-weight:700; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#111; }

/* Section & Cards */
.section { padding:8px 0 40px; }
.sec-title { font-size:20px; font-weight:800; margin:0 0 14px; }
.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:18px; }
.card { grid-column: span 6; border-radius:var(--radius); padding:20px; background: var(--card); border:1px solid color-mix(in oklab, var(--brand) 18%, transparent); box-shadow: var(--shadow); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.25); border-color: #B8860B; }
.card p { margin:8px 0 0; color:var(--muted); line-height:1.8; }
.kv { display:grid; grid-template-columns: 120px 1fr; gap:8px; padding:10px 0; border-bottom:1px dashed color-mix(in oklab, var(--brand) 25%, transparent); }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--muted); }

/* Thumbnails */
.thumb { width:100%; aspect-ratio: 16/9; border-radius: 12px; border:1px dashed color-mix(in oklab, var(--brand) 40%, transparent); background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--brand) 22%, transparent) 0 12px, transparent 12px 24px); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; }

/* Social Icons */
.social a { display:inline-flex; align-items:center; gap:8px; margin: 6px 0; }
.ico { width: 18px; height: 18px; display:inline-block; }
.ico svg { width:100%; height:100%; fill: currentColor; }

/* Page Specifics (from other files) */
.page-head { display:flex; align-items:center; gap:18px; padding: 28px 0 12px; }
.page-head .logo { width:56px; height:56px; border-radius:14px; overflow:hidden; border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); box-shadow: var(--shadow); }
.page-head .logo img { width:100%; height:100%; object-fit: cover; }
.page-title { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; margin: 0; }
.crumbs { display:flex; gap:8px; align-items:center; color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.article-card { background: var(--card); border:1px solid color-mix(in oklab, var(--brand) 18%, transparent); box-shadow: var(--shadow); border-radius: var(--radius); padding: 22px; line-height: 1.85; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.article-card:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,0.25); border-color: #B8860B; }
.article { background: var(--card); border:1px solid color-mix(in oklab, var(--brand) 18%, transparent); box-shadow: var(--shadow); border-radius: var(--radius); padding: 22px; line-height: 1.85; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.article:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,0.25); border-color: #B8860B; }
.article p { color: var(--text); margin: 0 0 1em; }
.article strong { color: color-mix(in oklab, var(--text) 92%, var(--brand) 8%); }
.lead { color: var(--muted); margin: 6px 0 16px; }
.figure { margin-top: 18px; border-radius: 14px; overflow: hidden; border:1px solid color-mix(in oklab, var(--brand) 22%, transparent); box-shadow: var(--shadow); transition: all 0.3s ease; }
.figure:hover { transform: scale(1.01); border-color: #B8860B; }
.figure img { width:100%; height:auto; display:block; }
.actions { display:flex; gap:10px; margin-top: 18px; }

footer { margin:40px 0 10px; color:var(--muted); font-size:14px; display:flex; justify-content:center; }
@media (max-width: 900px){ .hero{grid-template-columns:1fr;} .card{grid-column:span 12 !important;} }
.prof-link { color: #1a73e8; text-decoration: underline dashed; text-underline-offset: 3px; }
.prof-link:hover { color: #0c47a1; }

/* Project Page Specifics */
.page-sub { color:var(--muted); margin:4px 0 0; }
.list { display:grid; gap:16px; padding:10px 0 32px; }
.rowcard { display:grid; grid-template-columns: 320px 1fr; gap:16px; align-items:center; padding:14px; border-radius:var(--radius); background:var(--card); border:1px solid color-mix(in oklab, var(--brand) 18%, transparent); box-shadow:var(--shadow); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.rowcard:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.25); border-color: #B8860B; }
.rc-title { font-weight:800; font-size:18px; margin:0 0 6px; }
.rc-desc { color:var(--muted); line-height:1.75; margin:0; }
.meta { color:var(--muted); font-size:13px; margin-top:8px; }
@media (max-width: 820px){ .rowcard{grid-template-columns:1fr;} }

/* Links Page Specifics */
.friend { display:flex; align-items:center; gap:14px; padding:14px; border-radius:14px; border:1px solid color-mix(in oklab, var(--brand) 22%, transparent); background:color-mix(in oklab, var(--card) 96%, transparent); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.friend:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); border-color: #B8860B; }
.avatar { width:64px; height:64px; border-radius:50%; overflow:hidden; border:1px solid color-mix(in oklab, var(--brand) 30%, transparent); }
.avatar img { width:100%; height:100%; object-fit:cover; }
.f-title { font-weight:800; }
.f-desc { color:var(--muted); margin-top:4px; }
.f-actions { margin-left:auto; }
.tag { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid color-mix(in oklab, var(--brand) 40%, transparent); background:color-mix(in oklab, var(--card) 92%, transparent); font-size:13px; }
@media (max-width: 700px){ .friend{ flex-wrap:wrap; } .f-actions{ width:100%; margin-left:0; margin-top:8px; } }

/* Blog Page Specifics */
.card h3 { margin: 0 0 6px; }
.muted { color: var(--muted); }
.post { display:flex; gap:14px; padding:12px; border:1px solid color-mix(in oklab, var(--brand) 22%, transparent); border-radius: 12px; background: color-mix(in oklab, var(--card) 96%, transparent); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.post:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); border-color: #B8860B; }
.post .dot { margin-top:8px; flex: 0 0 auto; } 
.post-title { font-weight: 700; }
.post-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* Homepage Project Card Gold Glow */
.project-card {
    display: block;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.project-card:hover {
    transform: translateY(-5px); /* Changed from -6px */
    box-shadow: 0 15px 35px rgba(0,0,0,0.25); /* Revert back to match .card:hover */
    border-color: #B8860B; /* DarkGoldenRod */
}
/* Removed the glow inner shadow pseudo element logic */
.project-card::after {
   /* No content for glow anymore */
   display: none;
}

/* --- Mobile Navigation --- */
.mobile-menu-btn {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	z-index: 100;
}
.mobile-menu-btn span {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--text);
	margin: 5px 0;
	transition: 0.3s;
}

@media (max-width: 900px) {
	.mobile-menu-btn {
		display: block;
	}

	.nav-links {
		display: none; /* Hide by default on mobile */
		position: absolute; /* Using absolute relative to the sticky header */
		top: 100%;
		left: 0;
		right: 0;
		background: rgba(11, 11, 11, 0.98);
		backdrop-filter: blur(15px);
		flex-direction: column;
		align-items: center;
		padding: 24px 0;
		gap: 20px;
		border-bottom: 1px solid var(--brand);
        	z-index: 1000; /* Ensure it's on top */
		box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	}

	/* Separate rule to override display:none when active */
	.nav-links.active {
		display: flex !important;
		animation: slideDown 0.3s ease-out;
	}

    	@keyframes slideDown {
		from { opacity: 0; transform: translateY(-10px); }
		to { opacity: 1; transform: translateY(0); }
	}
    
    /* Hamburger Animation */
    .mobile-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}