/* ============================================================
 * style.css — 暖色编辑风（warm editorial）
 * 设计系统：奶油纸底 + 陶土橙/赭黄 accent + 中文衬线大标题
 * 刻意避开「暗色 + 薄荷青 + 等宽字体 + SaaS 组件」的 AI 套路，
 * 用纸纹质感、衬线标题与长截图设备框营造手作 / 小众感。
 * ============================================================ */

:root {
	/* —— 暖色令牌 —— */
	--bg-base: #f6efe6; /* 奶油纸底 */
	--bg-surface: #fbf6ee; /* 卡片 */
	--bg-warm: #efe3d3; /* 暖块 / 标签底 */
	--ink: #2b221c; /* 暖墨（近黑）*/
	--ink-soft: #6b5b4e; /* 次要文字 */
	--ink-faint: #9a8775; /* 辅助文字 */
	--accent: #c2562f; /* 陶土橙（主强调）*/
	--accent-2: #d99a4e; /* 赭黄（次强调）*/
	--line: #e2d4c2; /* 细线 */
	--line-soft: #ece1d2; /* 更浅的分隔 */

	/* —— 字体 —— */
	--font-serif:
		"Noto Serif SC", "Songti SC", "STSong", Georgia, "Times New Roman", serif;
	--font-sans:
		"Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system,
		sans-serif;
}

* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	position: relative;
	background-color: var(--bg-base);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* 纸纹质感：极淡噪点，置于内容之下 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 140px;
	opacity: 0.05;
}

section {
	scroll-margin-top: 84px;
}

/* ---------- 顶部导航 ---------- */
.topnav {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 40px;
	background: rgba(246, 239, 230, 0.82);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.brand {
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}
.brand span {
	color: var(--accent);
}
.navlinks a {
	margin-left: 28px;
	color: var(--ink-soft);
	text-decoration: none;
	font-size: 15px;
	transition: color 0.2s ease;
}
.navlinks a:hover {
	color: var(--accent);
}
.navlinks a.active {
	color: var(--accent);
	font-weight: 700;
	position: relative;
}
.navlinks a.active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

/* ---------- 容器 ---------- */
.wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 40px;
}
.block {
	padding: 84px 0;
	border-bottom: 1px solid var(--line-soft);
}
.block:last-child {
	border-bottom: none;
}

/* ---------- 标签 / 小标题 ---------- */
.label {
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 3px;
	color: var(--accent);
	margin: 0 0 30px;
}
.label em {
	font-style: normal;
	color: var(--ink-faint);
	letter-spacing: 1px;
}

/* ---------- Hero ---------- */
.hero {
	min-height: 76vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hero .eyebrow {
	font-size: 13px;
	letter-spacing: 4px;
	color: var(--accent);
	margin: 0 0 18px;
}
.hero h1 {
	font-family: var(--font-serif);
	font-size: clamp(44px, 9vw, 88px);
	line-height: 1.05;
	font-weight: 600;
	margin: 0 0 18px;
	color: var(--ink);
}
.hero-role {
	font-size: 20px;
	color: var(--ink-soft);
	margin: 0 0 18px;
}
.hero-tag {
	font-size: 18px;
	color: var(--ink-faint);
	max-width: 580px;
	margin: 0 0 34px;
}
.hero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* ---------- 按钮 ---------- */
.btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 999px;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	font-family: var(--font-sans);
	transition: all 0.2s ease;
}
.btn-primary {
	background: var(--accent);
	color: #fff;
}
.btn-primary:hover {
	background: #a8471f;
	transform: translateY(-1px);
}
.btn-ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}
.btn-ghost:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.btn.sm {
	padding: 8px 18px;
	font-size: 14px;
}

/* ---------- About ---------- */
.about {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 44px;
	align-items: start;
}
.about .lead {
	font-size: 19px;
	line-height: 1.85;
	color: var(--ink);
	margin: 0;
}
.meta {
	list-style: none;
	padding: 0;
	margin: 28px 0 0;
}
.meta li {
	display: flex;
	gap: 16px;
	padding: 11px 0;
	border-top: 1px solid var(--line-soft);
	font-size: 15px;
	color: var(--ink-soft);
}
.meta li span {
	color: var(--ink-faint);
	min-width: 56px;
}
.portrait .avatar {
	width: 200px;
	height: 200px;
	border-radius: 24px;
	background: var(--bg-warm);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-serif);
	font-size: 72px;
	color: var(--accent);
}
.portrait img {
	width: 200px;
	height: 200px;
	border-radius: 24px;
	object-fit: cover;
}

/* ---------- Skills ---------- */
.skill-group {
	margin-bottom: 30px;
}
.skill-group h4 {
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--ink-faint);
	margin: 0 0 14px;
	font-weight: 500;
}
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.chip {
	font-size: 13px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--bg-warm);
	color: var(--ink-soft);
	border: 1px solid var(--line);
}
.chip.tag {
	background: transparent;
}

/* ---------- Work：长截图展示 ---------- */
.filters {
	display: flex;
	gap: 10px;
	margin-bottom: 50px;
	flex-wrap: wrap;
}
.filter {
	font-family: var(--font-sans);
	font-size: 14px;
	padding: 8px 22px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink-soft);
	cursor: pointer;
	transition: all 0.2s ease;
}
.filter:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.filter.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.work-item {
	padding: 60px 0;
	border-bottom: 1px solid var(--line-soft);
}
.work-item:last-child {
	border-bottom: none;
}

/* 信息区：文字介绍在图片上方——整块居中成列，但内部文字左对齐 */
.info {
	max-width: 780px;
	margin: 0 auto 36px;
	text-align: left;
}
.info-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	margin-bottom: 12px;
}
.cat {
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 999px;
	padding: 3px 13px;
}
.year {
	font-size: 13px;
	color: var(--ink-faint);
}
.info h3 {
	font-family: var(--font-serif);
	font-size: 30px;
	font-weight: 600;
	margin: 0 0 14px;
	color: var(--ink);
}
.info .summary {
	font-size: 16px;
	line-height: 1.85;
	color: var(--ink-soft);
	margin: 0 0 20px;
	text-align: left;
}
.info .chips {
	margin-bottom: 22px;
	justify-content: flex-start;
}

/* 大图展示区：左箭头 + 主图 + 右箭头，居中排列 */
.showcase {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0 auto;
	max-width: 980px;
}
.stage-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}
.stage {
	flex: 0 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

/* 白色半透明翻页箭头 */
.nav-arrow {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(43, 34, 28, 0.16);
	transition:
		background 0.2s ease,
		transform 0.15s ease;
	user-select: none;
}
.nav-arrow:hover {
	background: rgba(255, 255, 255, 0.92);
	transform: scale(1.07);
}
.nav-arrow:active {
	transform: scale(0.95);
}
.nav-arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	background: rgba(255, 255, 255, 0.32);
	box-shadow: none;
}
.nav-arrow:disabled:hover {
	background: rgba(255, 255, 255, 0.32);
	transform: none;
}

/* 设备框（手机 / 浏览器）*/
.device {
	box-shadow: 0 22px 55px rgba(43, 34, 28, 0.18);
}
.device .screen {
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	background: var(--bg-warm);
}
.device .screen::-webkit-scrollbar {
	display: none;
}
.device .screen img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: top;
}

/* 手机框：高度随截图内容自适应，避免固定高度导致手机端留白 */
.device.phone {
	width: 300px;
	height: auto;
	border-radius: 40px;
	background: #2b221c;
	padding: 12px;
}
.device.phone .screen {
	width: 100%;
	height: auto;
	border-radius: 30px;
	overflow: hidden;
}

/* 浏览器框 */
.device.browser {
	width: min(860px, 100%);
	max-height: 600px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.device.browser .bar {
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	border-bottom: 1px solid var(--line);
	background: var(--bg-surface);
}
.device.browser .dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #e2c9b0;
}
.device.browser .url {
	flex: 1;
	height: 22px;
	border-radius: 11px;
	background: var(--bg-warm);
	margin-left: 8px;
	font-size: 12px;
	color: var(--ink-soft);
	display: flex;
	align-items: center;
	padding: 0 12px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.device.browser .screen {
	flex: 1;
	background: var(--bg-surface);
}

/* 在线预览（无本地截图时）*/
.device.browser .screen.is-online {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background:
		radial-gradient(
			120% 120% at 50% 0%,
			rgba(217, 154, 78, 0.18),
			transparent 60%
		),
		var(--bg-surface);
}
.online {
	padding: 24px;
}
.online-tag {
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--accent);
	margin: 0 0 14px;
}
.online-title {
	font-family: var(--font-serif);
	font-size: 24px;
	color: var(--ink);
	margin: 0 0 18px;
}
.online-url {
	font-size: 12px;
	color: var(--ink-faint);
	margin: 16px 0 0;
	word-break: break-all;
}

/* 缩略图画廊：点击切换主图 */
.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 12px;
	margin: 22px auto 0;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
}
.thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-sans);
}
.thumb .frame {
	border: 1px solid var(--line);
	overflow: hidden;
	background: var(--bg-warm);
	display: block;
	transition:
		border-color 0.2s ease,
		transform 0.2s ease;
}
.thumb:hover .frame {
	transform: translateY(-2px);
	border-color: var(--accent-2);
}
.thumb.active .frame {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-color: var(--accent);
}
.thumb .frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.thumb.phone .frame {
	width: 54px;
	height: 108px;
	border-radius: 8px;
}
.thumb.web .frame {
	width: 104px;
	height: 64px;
	border-radius: 6px;
}
.thumb .frame-online {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--accent);
	background: var(--bg-warm);
}
.thumb .cap {
	font-size: 11px;
	color: var(--ink-faint);
	max-width: 92px;
	text-align: center;
	line-height: 1.3;
}

/* 无截图占位（如 shots 为空的项目）*/
.no-shot-block {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	max-width: 860px;
	height: 320px;
	border: 1px dashed var(--line);
	border-radius: 14px;
	background: var(--bg-surface);
}
.no-shot-text {
	font-size: 15px;
	color: var(--ink-faint);
	margin: 0;
	letter-spacing: 1px;
}

/* ---------- Contact ---------- */
.contact h2 {
	font-family: var(--font-serif);
	font-size: 40px;
	font-weight: 600;
	margin: 0 0 14px;
	color: var(--ink);
}
.contact-sub {
	color: var(--ink-soft);
	margin: 0 0 28px;
	font-size: 17px;
}
.socials {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 30px;
}
.social {
	font-size: 14px;
	color: var(--ink-soft);
	text-decoration: none;
	border: 1px solid var(--line);
	padding: 8px 18px;
	border-radius: 999px;
	transition: all 0.2s ease;
}
.social:hover {
	color: var(--accent);
	border-color: var(--accent);
}

/* ---------- Footer ---------- */
.foot {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 1080px;
	margin: 0 auto;
	padding: 30px 40px;
	font-size: 13px;
	color: var(--ink-faint);
	border-top: 1px solid var(--line);
}

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
	.topnav {
		padding: 16px 22px;
	}
	.navlinks a {
		margin-left: 18px;
		font-size: 14px;
	}
	.wrap {
		padding: 0 22px;
	}
	.block {
		padding: 60px 0;
	}
	.about {
		grid-template-columns: 1fr;
	}
	.portrait .avatar,
	.portrait img {
		width: 160px;
		height: 160px;
		font-size: 60px;
	}
	.work-item .info {
		margin-bottom: 26px;
	}
	.device.phone {
		width: 260px;
	}
	.nav-arrow {
		width: 40px;
		height: 40px;
	}
	.showcase {
		gap: 10px;
	}
	.hero h1 {
		font-size: clamp(40px, 12vw, 60px);
	}
	.info h3 {
		font-size: 24px;
	}
	.foot {
		padding: 24px 22px;
	}
}

/* ---------- 微信弹框 ---------- */
.modal-mask {
	position: fixed;
	inset: 0;
	background: rgba(43, 34, 28, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 24px;
}
.modal-card {
	position: relative;
	width: min(420px, 100%);
	background: var(--bg-surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 38px 34px 32px;
	box-shadow: 0 30px 70px rgba(43, 34, 28, 0.32);
	text-align: center;
}
.modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: var(--ink-faint);
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.2s ease;
}
.modal-close:hover {
	background: var(--bg-warm);
	color: var(--ink);
}
.modal-eyebrow {
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--accent);
	margin: 0 0 8px;
}
.modal-hint {
	font-size: 14px;
	color: var(--ink-soft);
	margin: 0 0 22px;
	line-height: 1.6;
}
.wechat-id-row {
	display: flex;
	align-items: stretch;
	gap: 12px;
}
.wechat-id {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--ink);
	background: var(--bg-warm);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
	user-select: all;
	word-break: break-all;
}
.copy-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 76px;
	padding: 0 18px;
	border: none;
	border-radius: 12px;
	background: var(--accent);
	color: #fff;
	font-size: 15px;
	font-family: var(--font-sans);
	cursor: pointer;
	transition: all 0.2s ease;
}
.copy-btn:hover {
	background: #a8481f;
}
.copy-btn:active {
	transform: scale(0.96);
}
/* 弹框淡入淡出 */
.fade-enter-active, .fade-leave-active {
	transition: opacity 0.22s ease;
}
.fade-enter-from, .fade-leave-to {
	opacity: 0;
}

/* ---------- 图片点击预览（lightbox） ---------- */
.stage {
	position: relative;
	cursor: zoom-in;
}
.stage:hover .device {
	box-shadow: 0 26px 62px rgba(43, 34, 28, 0.26);
}
.zoom-hint {
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--ink-faint);
	background: transparent;
	padding: 8px 11px 0;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(6px);
	transition: all 0.2s ease;
	pointer-events: none;
}
.stage-wrap:hover .zoom-hint {
	opacity: 1;
	transform: translateY(0);
}
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 6vw;
	background: rgba(31, 24, 19, 0.94);
	backdrop-filter: blur(6px);
}
.lb-img {
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	background: #fff;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	cursor: grab;
}
.lb-img:active {
	cursor: grabbing;
}
.lb-close {
	position: absolute;
	top: 22px;
	right: 26px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s ease;
}
.lb-close:hover {
	background: rgba(255, 255, 255, 0.32);
}