/* ==========================================================================
   充电鸣谢 —— 荣誉墙（手帐拟物）
   --------------------------------------------------------------------------
   上一版是「木墙 + 铜牌」：平面渐变 + 硬边框 + 金色浮雕，
   看着像 Flash 做的按钮，和首页那套手帐完全不搭。

   这一版照首页的语言重做 —— 首页正文是一本摊开的深色手帐：
       · 内容不放在面板里，而是直接写在纸上
       · 照片像实体冲印相片一样散在纸面，带白边、胶带、轻微旋转
       · 强调色是官方 MC 绿
   所以这里也照办：每块铭牌是一张**米色相片卡**，顶上一道半透明胶带，
   整体轻微歪一点，投影柔和；悬停时像被拿起来一样摆正、抬起。

   配色沿用首页的令牌（--ink / --ink-mute / --mc-green-*），不另起一套，
   免得半页深半页浅。
   ========================================================================== */

.hw {
	--hw-head: 52px;          /* 头像边长 */
	--hw-scale: 7;            /* 皮肤放大倍数，与 --hw-head 对应 */
	--card: #f7f3ea;          /* 相片纸 —— 与首页散落照片同一个色 */
	--on-card: #2e2a26;       /* 手帐上的字：深墨写在米色纸上 */
	--on-card-soft: #7d7368;

	max-width: 1000px;
	margin: 0 auto 2.5em;
}

/* --------------------------------------------------------------------------
   标题
   -------------------------------------------------------------------------- */
.hw-title {
	position: relative;
	margin: 0 0 10px;
	text-align: center;
	z-index: 0;                    /* 建一层，好让荧光笔压到字下面 */
}

.hw-title b {
	position: relative;
	display: inline-block;
	padding: 2px 18px 6px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: .3em;
	text-indent: .3em;             /* 字距会在末尾多出一格，缩回来才真正居中 */
	color: var(--ink);
	text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
	z-index: 1;
}

/* 荧光笔：压在字的下半部分，不是一条规规矩矩的底线 */
.hw-title b::after {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	height: 13px;
	background: linear-gradient(90deg, rgba(108, 195, 73, .46), rgba(134, 213, 98, .3));
	box-shadow: 0 4px 10px -5px rgba(108, 195, 73, .7);
	transform: rotate(-.7deg);
	pointer-events: none;
}

.hw-sub {
	margin: 14px 0 34px;
	text-align: center;
	font-size: 13px;
	letter-spacing: .18em;
	color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   相片卡
   -------------------------------------------------------------------------- */
.hw-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 32px 22px;
}

.hw-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;

	padding: 13px 15px 13px 14px;

	/*
	 * 相片纸：不是一块纯色，而是极淡的竖向渐变 + 一层几乎看不见的纸纹。
	 * 纯色平涂就是「Flash 感」的来源 —— 真实的纸一定有细微的不匀。
	 */
	background-color: var(--card);
	background-image:
		repeating-linear-gradient(180deg, rgba(120, 100, 70, .028) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #fbf8f1 0%, #f4efe4 62%, #ece5d6 100%);

	border: 1px solid rgba(0, 0, 0, .34);
	border-radius: 1px;            /* 冲印相片是直角，圆角反而假 */

	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 10px 22px -12px rgba(0, 0, 0, .85),
		0 2px 5px rgba(0, 0, 0, .35);

	/* 每张歪一点，像随手贴上去的 */
	transform: rotate(var(--rot, 0deg));
	transition: transform .22s ease, box-shadow .22s ease;
}

/*
 * 三张一组换一个角度 —— 全用一个角度会显得整齐得死板。
 * 和首页散落照片是同一套做法。
 */
.hw-card:nth-child(3n+1) { --rot: -.85deg; }
.hw-card:nth-child(3n+2) { --rot: .7deg; }
.hw-card:nth-child(3n)   { --rot: -.35deg; }

/* 胶带：压在卡片上沿，半透明绿 */
.hw-card::before {
	content: "";
	position: absolute;
	top: -11px;
	left: 50%;
	width: 64px;
	height: 22px;
	transform: translateX(-50%) rotate(-2.5deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(108, 195, 73, .5) 0 8px,
		rgba(160, 224, 129, .34) 8px 16px
	);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
	pointer-events: none;
}

.hw-card:nth-child(3n+2)::before {
	transform: translateX(-50%) rotate(2.5deg);
	width: 54px;
}

.hw-card:nth-child(3n)::before {
	transform: translateX(-50%) rotate(-1deg) translateX(10px);
	width: 70px;
}

/* 拿起来：摆正、抬起、影子拉长 */
.hw-card:hover {
	transform: rotate(0deg) translateY(-4px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 20px 34px -16px rgba(0, 0, 0, .9),
		0 4px 10px rgba(0, 0, 0, .4);
}

/* --------------------------------------------------------------------------
   头像：从皮肤里切出来的那一格
   --------------------------------------------------------------------------
   皮肤 64×64，头部正面在 (8,8) 起的 8×8 格，所以
       background-size:     64 × 缩放
       background-position: -(8 × 缩放)
   放大 7 倍正好 52px，配 pixelated 才不会糊。
   -------------------------------------------------------------------------- */
.hw-head {
	flex: 0 0 auto;
	width: var(--hw-head);
	height: var(--hw-head);

	background-color: #584a3a;
	background-repeat: no-repeat;
	background-size: calc(64 * var(--hw-scale) * 1px) calc(64 * var(--hw-scale) * 1px);
	background-position: calc(-8 * var(--hw-scale) * 1px) calc(-8 * var(--hw-scale) * 1px);
	image-rendering: pixelated;
	image-rendering: crisp-edges;

	/* 像贴在卡片上的一张小照片：白边 + 细框 */
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 3px 7px -2px rgba(0, 0, 0, .35);

	/* 像随手贴上去的一张小照片，角度略有不同 */
	transform: rotate(var(--hrot, 0deg));
}

.hw-card:nth-child(3n+1) .hw-head { --hrot: -1.5deg; }
.hw-card:nth-child(3n+2) .hw-head { --hrot: 1.2deg; }
.hw-card:nth-child(3n)   .hw-head { --hrot: -.6deg; }

.hw-name {
	min-width: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--on-card);
	overflow-wrap: anywhere;
}

/* 名字下那行小字：像相片下面用笔写的一行说明 */
.hw-name small {
	display: block;
	position: relative;
	margin-top: 6px;
	padding-top: 6px;
	font-size: 11px;
	font-weight: 400;
	font-style: italic;
	letter-spacing: .06em;
	color: var(--on-card-soft);
}

/* 那行小字上面压一条极细的绿线，是整张卡唯一的彩色分隔 */
.hw-name small::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 1px;
	background: linear-gradient(90deg, var(--mc-green-4), transparent);
}

/* --------------------------------------------------------------------------
   落款
   -------------------------------------------------------------------------- */
.hw-note {
	margin: 34px 0 0;
	text-align: center;
	font-size: 13px;
	letter-spacing: .16em;
	color: var(--ink-mute);
}

.hw-note em {
	font-style: normal;
	color: var(--ink-soft);
}

@media screen and (max-width: 47.99em) {

	.hw {
		--hw-head: 42px;
		--hw-scale: 6;
	}

	.hw-title b { font-size: 22px; }
	.hw-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 26px 14px; }
	.hw-name { font-size: 14px; }
	.hw-card { padding: 10px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {

	.hw-card,
	.hw-card:hover { transition: none; }
}