/*
Theme Name: 黑胶环保 Heijiao Vinyl
Theme URI: https://example.com/
Author: 老唱针
Author URI: https://example.com/
Description: 黑胶唱片美学的中文废气治理主题:暖棕黑盘面、一圈圈同心沟槽、奶油唱片标与唱针橙红,为「上海黑胶环保科技有限公司」(虚构演示)而作。首页是一张可旋转的巨型黑胶,唱臂缓缓落下;产品做成一张张专辑,参数排成唱片背面的曲目单。整套母带自带,不向外部借一分声音。
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heijiao-vinyl
Tags: business, custom-menu, custom-logo, two-columns, right-sidebar, featured-images, translation-ready, threaded-comments
*/

/* =========================================================
   0. 变量:一张黑胶的配色母带
   ========================================================= */
:root {
	--ink: #211a16;          /* 暖棕黑 · 盘面 */
	--ink-deep: #14100d;     /* 更深 · 最底 */
	--ink-soft: #2a211a;     /* 稍浅的沟槽底 */
	--cream: #ece1c8;        /* 奶油标纸 */
	--cream-soft: #f3ecda;   /* 更亮的标纸 */
	--paper: #e8e2d6;        /* 正文暖白 */
	--rust: #d95d34;         /* 唱针橙红 */
	--rust-deep: #bd4a26;    /* 深一档橙红(浅底上用) */
	--gold: #c79a4e;         /* 暖金 · 极小点缀 */

	--muted: #b6a98f;        /* 暗底次要文字 */
	--muted-ink: #6f6252;    /* 亮底次要文字 */

	--line: rgba(236, 225, 200, 0.16);
	--line-strong: rgba(236, 225, 200, 0.32);
	--line-ink: rgba(33, 26, 22, 0.16);
	--line-ink-strong: rgba(33, 26, 22, 0.30);

	--groove: rgba(236, 225, 200, 0.055);

	--radius-sleeve: 7px;    /* 封套 · 近直角 */
	--radius-card: 16px;
	--pill: 999px;

	--shadow-disc: 0 34px 66px -26px rgba(0, 0, 0, 0.78);
	--shadow-card: 0 18px 40px -26px rgba(0, 0, 0, 0.6);
	--shadow-label: 0 10px 26px -14px rgba(0, 0, 0, 0.55);

	--font-head: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", system-ui, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	--font-mono: "SFMono-Regular", ui-monospace, "Menlo", "Consolas", "Roboto Mono", "Courier New", monospace;

	--wrap: 1180px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   1. 基础
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--paper);
	background-color: var(--ink);
	/* 极细的沟槽噪底,像唱片的哑光盘面 */
	background-image:
		repeating-radial-gradient(circle at 84% -10%, var(--groove) 0 1px, transparent 1px 4px),
		repeating-radial-gradient(circle at 8% 120%, var(--groove) 0 1px, transparent 1px 4px);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: 0.01em;
	margin: 0 0 0.5em;
	color: var(--cream);
}

p {
	margin: 0 0 1.1em;
}

a {
	color: var(--rust);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

a:hover,
a:focus {
	color: var(--gold);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol {
	margin: 0 0 1.1em;
	padding-left: 1.3em;
}

figure {
	margin: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

code, kbd {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: rgba(236, 225, 200, 0.1);
	padding: 0.1em 0.4em;
	border-radius: 4px;
}

blockquote {
	margin: 0;
}

:focus-visible {
	outline: 3px solid var(--rust);
	outline-offset: 2px;
	border-radius: 3px;
}

.wrap {
	width: min(var(--wrap), 92vw);
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 200;
	background: var(--rust);
	color: var(--ink-deep);
	padding: 12px 20px;
	border-radius: 0 0 var(--radius-sleeve) 0;
	font-weight: 700;
}

.skip-link:focus {
	left: 0;
	color: var(--ink-deep);
}

/* =========================================================
   2. 按钮:唱针橙红胶囊 / 描边
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: 0.02em;
	padding: 0.82em 1.5em;
	border-radius: var(--pill);
	background: var(--rust);
	color: var(--ink-deep);
	border: 2px solid var(--rust);
	cursor: pointer;
	transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
	box-shadow: 0 10px 22px -12px rgba(217, 93, 52, 0.8);
}

.btn::before {
	content: "\25B6";
	font-size: 0.72em;
	line-height: 1;
}

.btn:hover,
.btn:focus {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--ink-deep);
	transform: translateY(-2px);
}

.btn.ghost {
	background: transparent;
	color: var(--cream);
	border-color: var(--line-strong);
	box-shadow: none;
}

.btn.ghost::before {
	content: "\23F8";
}

.btn.ghost:hover,
.btn.ghost:focus {
	border-color: var(--rust);
	color: var(--rust);
	background: transparent;
}

/* 亮底上的按钮 */
.on-cream .btn.ghost {
	color: var(--ink);
	border-color: var(--line-ink-strong);
}

.on-cream .btn.ghost:hover,
.on-cream .btn.ghost:focus {
	color: var(--rust-deep);
	border-color: var(--rust-deep);
}

/* =========================================================
   3. 页眉:沟槽栏 + 迷你唱片 logo
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(20, 16, 13, 0.86);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	border-bottom: 1px solid var(--line);
	transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.site-header.is-scrolled {
	background: rgba(20, 16, 13, 0.96);
	box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.8);
}

.header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 74px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.brand-badge {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
}

.brand-badge .mini-disc {
	width: 42px;
	height: 42px;
}

.site-header.is-scrolled .brand-badge .mini-disc {
	animation-duration: 5s;
}

.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.brand-name {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.16rem;
	letter-spacing: 0.04em;
	color: var(--cream);
}

.brand-name:hover {
	color: var(--cream);
}

.brand-tagline {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
	margin-top: 3px;
}

/* 导航 */
.main-nav {
	display: flex;
	align-items: center;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 9px;
	background: transparent;
	border: 1px solid var(--line-strong);
	color: var(--cream);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.9rem;
	padding: 9px 14px;
	border-radius: var(--pill);
	cursor: pointer;
}

.nav-toggle .bars {
	position: relative;
	width: 18px;
	height: 12px;
}

.nav-toggle .bars span,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.nav-toggle .bars span { top: 5px; }
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars::after { top: 10px; }

.main-nav.is-open .nav-toggle .bars span { opacity: 0; }
.main-nav.is-open .nav-toggle .bars::before { transform: translateY(5px) rotate(45deg); }
.main-nav.is-open .nav-toggle .bars::after { transform: translateY(-5px) rotate(-45deg); }

.menu-wrap .menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
}

.menu-wrap .menu-item > a {
	display: block;
	padding: 9px 15px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.96rem;
	color: var(--paper);
	border-radius: var(--pill);
	position: relative;
}

.menu-wrap .menu-item > a:hover,
.menu-wrap .menu-item > a:focus {
	color: var(--cream);
	background: rgba(236, 225, 200, 0.07);
}

.menu-wrap .current-menu-item > a,
.menu-wrap .current_page_item > a {
	color: var(--rust);
}

.menu-wrap .current-menu-item > a::after,
.menu-wrap .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 2px;
	height: 2px;
	background: var(--rust);
	border-radius: 2px;
}

.menu-wrap .sub-menu {
	list-style: none;
	margin: 0;
	padding: 6px;
}

/* =========================================================
   4. 区块骨架 & 唱盘唱片图形
   ========================================================= */
.site-main {
	display: block;
}

section {
	position: relative;
}

.block {
	padding: clamp(58px, 8vw, 104px) 0;
}

.block.deep {
	background: var(--ink-deep);
}

.block.cream {
	background: var(--cream);
	color: var(--ink);
}

.block.cream h1,
.block.cream h2,
.block.cream h3 {
	color: var(--ink);
}

.block.cream a {
	color: var(--rust-deep);
}

.block.cream a:hover {
	color: var(--ink);
}

/* 区块小标题:SIDE 标 + 曲序 */
.side-head {
	max-width: 720px;
	margin-bottom: 42px;
}

.side-head.center {
	margin-inline: auto;
	text-align: center;
}

.kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 16px;
}

.kicker .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rust);
	display: inline-block;
}

.side-tag {
	font-family: var(--font-head);
	font-weight: 800;
	color: var(--ink-deep);
	background: var(--gold);
	padding: 2px 9px;
	border-radius: var(--pill);
	letter-spacing: 0.08em;
	font-size: 0.68rem;
}

.side-head h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.7rem);
	margin: 0 0 0.4em;
}

.side-head .lead {
	color: var(--muted);
	font-size: 1.04rem;
	margin: 0;
}

.block.cream .side-head .lead {
	color: var(--muted-ink);
}

/* 沟槽分隔线:几道同心弧 */
.groove-sep {
	display: block;
	width: 100%;
	max-width: 260px;
	height: 20px;
	margin: 22px 0 0;
	color: var(--rust);
	opacity: 0.85;
}

.side-head.center .groove-sep {
	margin-inline: auto;
}

.groove-sep line,
.groove-sep path {
	stroke: currentColor;
	fill: none;
}

/* =========================================================
   5. HERO:巨型黑胶 + 唱臂
   ========================================================= */
.hero {
	background:
		radial-gradient(120% 90% at 82% 10%, rgba(217, 93, 52, 0.13), transparent 55%),
		radial-gradient(90% 80% at 10% 100%, rgba(199, 154, 78, 0.1), transparent 55%),
		var(--ink-deep);
	padding: clamp(48px, 7vw, 84px) 0 clamp(56px, 8vw, 96px);
	overflow: hidden;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(30px, 5vw, 64px);
	align-items: center;
}

.hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 22px;
}

.hero h1 {
	font-size: clamp(2.1rem, 5.2vw, 3.7rem);
	line-height: 1.12;
	margin: 0 0 0.5em;
	color: var(--cream);
}

.hero h1 .accent {
	color: var(--rust);
}

.hero-lead {
	font-size: 1.1rem;
	color: var(--paper);
	max-width: 33em;
	margin-bottom: 28px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-bottom: 26px;
}

/* 播放控制条 */
.transport {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px;
	border: 1px solid var(--line-strong);
	border-radius: var(--pill);
	background: rgba(236, 225, 200, 0.04);
}

.transport button {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--cream);
	font-size: 0.9rem;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.transport button:hover,
.transport button:focus {
	background: var(--rust);
	color: var(--ink-deep);
}

.transport .play-toggle {
	background: var(--rust);
	color: var(--ink-deep);
}

.transport .play-toggle:hover,
.transport .play-toggle:focus {
	background: var(--gold);
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--muted);
	letter-spacing: 0.04em;
}

.hero-meta b {
	color: var(--gold);
	font-weight: 500;
}

/* 唱盘 */
.turntable {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 460px;
	margin-inline: auto;
}

.platter {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	filter: drop-shadow(var(--shadow-disc));
}

.disc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 38% 30%, rgba(236, 225, 200, 0.12), transparent 42%),
		repeating-radial-gradient(circle at center,
			#1b1510 0 1.4px,
			#251d16 1.4px 2.1px,
			#181209 2.1px 3.4px),
		#1d1610;
	box-shadow:
		inset 0 0 0 2px rgba(0, 0, 0, 0.6),
		inset 0 0 40px rgba(0, 0, 0, 0.55);
}

/* 高光弧,随盘旋转 */
.disc::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 210deg,
		transparent 0deg,
		rgba(236, 225, 200, 0.11) 24deg,
		transparent 60deg,
		transparent 200deg,
		rgba(199, 154, 78, 0.08) 232deg,
		transparent 268deg);
	mix-blend-mode: screen;
}

/* 唱片标:奶油圆标 */
.label {
	position: absolute;
	inset: 32%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 32%, var(--cream-soft), var(--cream) 62%);
	color: var(--ink);
	display: grid;
	place-content: center;
	text-align: center;
	box-shadow: var(--shadow-label), inset 0 0 0 1px rgba(33, 26, 22, 0.12);
	padding: 6%;
}

.label::before {
	content: "";
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	border: 1px solid rgba(189, 74, 38, 0.45);
}

.label-art {
	width: 34px;
	height: 34px;
	margin: 0 auto 5px;
	color: var(--rust-deep);
}

.label-brand {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.86rem;
	letter-spacing: 0.06em;
	color: var(--ink);
	line-height: 1.1;
}

.label-sub {
	font-family: var(--font-mono);
	font-size: 0.5rem;
	letter-spacing: 0.24em;
	color: var(--rust-deep);
	text-transform: uppercase;
	margin-top: 3px;
}

.label-rpm {
	font-family: var(--font-mono);
	font-size: 0.52rem;
	letter-spacing: 0.14em;
	color: var(--muted-ink);
	margin-top: 6px;
}

/* 中心孔 */
.spindle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--ink-deep);
	box-shadow: 0 0 0 2px var(--gold);
	z-index: 3;
}

/* 唱臂 */
.tonearm {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	transform-origin: 87% 15%;
	pointer-events: none;
}

.tonearm .arm {
	stroke: #d9cbb0;
	stroke-width: 4;
	stroke-linecap: round;
	fill: none;
}

.tonearm .arm-fill {
	fill: #cfc0a4;
}

.tonearm .pivot {
	fill: var(--ink-soft);
	stroke: var(--gold);
	stroke-width: 2;
}

.tonearm .counter {
	fill: var(--ink-soft);
	stroke: var(--muted);
	stroke-width: 1.5;
}

.tonearm .headshell {
	fill: var(--rust);
}

.tonearm .needle {
	fill: var(--gold);
}

.turntable figcaption {
	position: absolute;
	left: 50%;
	bottom: -14px;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--muted);
	white-space: nowrap;
}

/* RPM 徽章 */
.rpm-badge {
	position: absolute;
	top: 6%;
	left: 2%;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	background: rgba(20, 16, 13, 0.7);
	display: grid;
	place-content: center;
	text-align: center;
	color: var(--gold);
	z-index: 5;
}

.rpm-badge b {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--cream);
	line-height: 1;
}

.rpm-badge span {
	font-family: var(--font-mono);
	font-size: 0.52rem;
	letter-spacing: 0.16em;
}

/* 旋转动画(仅无 reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
	.disc,
	.mini-disc-spin {
		animation: hjv-spin 8s linear infinite;
	}

	.turntable.is-paused .disc {
		animation-play-state: paused;
	}

	.tonearm {
		animation: hjv-arm-drop 1.4s var(--ease) 0.3s both;
	}
}

@keyframes hjv-spin {
	to { transform: rotate(360deg); }
}

@keyframes hjv-arm-drop {
	0%   { transform: rotate(-11deg); }
	70%  { transform: rotate(1.5deg); }
	100% { transform: rotate(0deg); }
}

/* =========================================================
   6. 计数条:转速/播放计数
   ========================================================= */
.counter-bar {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background:
		repeating-radial-gradient(circle at 50% -60%, var(--groove) 0 1px, transparent 1px 6px),
		var(--ink);
	padding: 40px 0;
}

.counter-caption {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
	text-align: center;
	margin-bottom: 26px;
}

.counter-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: center;
}

.counter-item strong {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	color: var(--rust);
	line-height: 1;
	letter-spacing: 0.01em;
}

.counter-item strong sup {
	font-size: 0.42em;
	color: var(--gold);
	margin-left: 2px;
	vertical-align: super;
}

.counter-item span {
	display: block;
	margin-top: 10px;
	font-size: 0.86rem;
	color: var(--muted);
}

/* =========================================================
   7. 专辑目录(产品)
   ========================================================= */
.album-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
}

.album {
	background: var(--ink-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 22px;
	display: flex;
	flex-direction: column;
	transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.album:hover {
	transform: translateY(-6px);
	border-color: rgba(217, 93, 52, 0.55);
	box-shadow: var(--shadow-card);
}

/* 封套:方形 + 露出一角唱片 */
.sleeve {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sleeve);
	background:
		linear-gradient(135deg, #2c221a 0%, #1c1610 100%);
	border: 1px solid var(--line);
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.sleeve-disc {
	position: absolute;
	top: -22%;
	right: -22%;
	width: 62%;
	height: 62%;
	border-radius: 50%;
	background:
		radial-gradient(circle at center, var(--cream) 0 15%, transparent 15%),
		repeating-radial-gradient(circle at center, #191309 0 1.3px, #241b13 1.3px 3px);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.sleeve-disc::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--ink-deep);
	box-shadow: 0 0 0 1.5px var(--gold);
}

.sleeve-tag {
	position: absolute;
	left: 16px;
	top: 16px;
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	color: var(--gold);
}

.sleeve-size {
	position: absolute;
	left: 16px;
	bottom: 16px;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	color: var(--cream);
	line-height: 0.95;
}

.sleeve-size small {
	display: block;
	font-size: 0.34em;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--rust);
	margin-top: 4px;
}

.album-model {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	color: var(--gold);
	margin-bottom: 6px;
}

.album h3 {
	font-size: 1.28rem;
	margin: 0 0 8px;
}

.album h3 a {
	color: var(--cream);
}

.album h3 a:hover {
	color: var(--rust);
}

.album-desc {
	color: var(--muted);
	font-size: 0.94rem;
	margin-bottom: 16px;
}

.album-thumb {
	border-radius: var(--radius-sleeve);
	overflow: hidden;
	margin-bottom: 16px;
	border: 1px solid var(--line);
}

.album-sides {
	list-style: none;
	margin: 0 0 18px;
	padding: 14px 0 0;
	border-top: 1px dashed var(--line-strong);
	display: grid;
	gap: 8px;
}

.album-sides li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 0.86rem;
}

.album-sides .side-mark {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.72rem;
	background: rgba(217, 93, 52, 0.16);
	color: var(--rust);
}

.album-sides .side-k {
	color: var(--muted);
}

.album-sides .side-v {
	margin-left: auto;
	font-family: var(--font-mono);
	color: var(--paper);
	text-align: right;
}

.album .more {
	margin-top: auto;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--rust);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.album .more::after {
	content: "\2192";
	transition: transform 0.2s var(--ease);
}

.album:hover .more::after {
	transform: translateX(4px);
}

/* =========================================================
   8. A面/B面 双面结构:曲目单
   ========================================================= */
.sides-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}

.side-panel {
	border-radius: var(--radius-card);
	padding: clamp(24px, 3vw, 38px);
}

.side-panel.a-side {
	background: var(--ink-soft);
	border: 1px solid var(--line);
}

.side-panel.b-side {
	background: var(--cream);
	color: var(--ink);
	border: 1px solid rgba(33, 26, 22, 0.12);
}

.side-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-head);
	font-weight: 800;
	margin-bottom: 6px;
}

.side-label .disc-chip {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background:
		radial-gradient(circle at center, currentColor 0 22%, transparent 22%),
		repeating-radial-gradient(circle at center, rgba(0,0,0,0.55) 0 1.2px, transparent 1.2px 2.6px);
	position: relative;
}

.a-side .side-label { color: var(--rust); }
.b-side .side-label { color: var(--rust-deep); }

.side-panel h3 {
	font-size: 1.4rem;
	margin: 0 0 4px;
}

.b-side h3 { color: var(--ink); }

.side-panel .side-sub {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	margin-bottom: 20px;
	color: var(--muted);
}

.b-side .side-sub { color: var(--muted-ink); }

/* 曲目单 */
.tracklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tracklist li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
}

.b-side .tracklist li {
	border-bottom-color: rgba(33, 26, 22, 0.12);
}

.tracklist li:last-child {
	border-bottom: 0;
}

.t-no {
	flex: none;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	color: var(--gold);
	width: 2.4em;
}

.b-side .t-no { color: var(--rust-deep); }

.t-body {
	flex: 1;
	min-width: 0;
}

.t-name {
	font-weight: 600;
	color: var(--cream);
	display: block;
}

.b-side .t-name { color: var(--ink); }

.t-note {
	display: block;
	font-size: 0.82rem;
	color: var(--muted);
	margin-top: 2px;
}

.b-side .t-note { color: var(--muted-ink); }

.t-lead {
	flex: none;
	align-self: flex-end;
	flex-grow: 1;
	border-bottom: 1px dotted var(--line-strong);
	margin: 0 6px 5px;
	min-width: 20px;
}

.b-side .t-lead { border-bottom-color: rgba(33, 26, 22, 0.3); }

.t-time {
	flex: none;
	font-family: var(--font-mono);
	font-size: 0.86rem;
	color: var(--rust);
	white-space: nowrap;
}

.b-side .t-time { color: var(--rust-deep); }

/* =========================================================
   9. 首席压片厂卡(金浩丰)· 唱片标样式
   ========================================================= */
.master-card {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 30px;
	align-items: center;
	background: var(--cream);
	color: var(--ink);
	border-radius: var(--radius-card);
	padding: clamp(24px, 3vw, 40px);
	box-shadow: var(--shadow-card);
}

.master-disc {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background:
		repeating-radial-gradient(circle at center, #191309 0 1.6px, #251c14 1.6px 3.4px),
		#1d1610;
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-label);
}

.master-disc .inner {
	width: 54%;
	height: 54%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 32%, var(--cream-soft), var(--cream) 60%);
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--rust-deep);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	box-shadow: inset 0 0 0 1px rgba(189, 74, 38, 0.4);
}

.master-card .master-kicker {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rust-deep);
	margin-bottom: 8px;
}

.master-card h3 {
	color: var(--ink);
	font-size: 1.4rem;
	margin: 0 0 10px;
}

.master-card p {
	margin: 0;
	color: #40352b;
	font-size: 1rem;
}

/* =========================================================
   10. 试听记录(案例)· 曲目卡
   ========================================================= */
.audition-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 26px;
}

.audition-card {
	background: var(--ink-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 26px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.audition-card::before {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle at center, transparent 0 5px, var(--groove) 5px 6px);
	pointer-events: none;
}

.audition-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.play-dot {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--rust);
	color: var(--ink-deep);
	display: grid;
	place-items: center;
	font-size: 0.9rem;
}

.audition-track {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var(--gold);
}

.audition-card h3 {
	font-size: 1.16rem;
	margin: 2px 0 0;
	color: var(--cream);
}

.audition-meta {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 7px;
	font-size: 0.86rem;
}

.audition-meta li {
	display: flex;
	gap: 10px;
}

.audition-meta .k {
	flex: none;
	width: 4.2em;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 0.78rem;
}

.audition-meta .v {
	color: var(--paper);
}

.audition-review {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px dashed var(--line-strong);
	font-size: 0.94rem;
	color: var(--paper);
	font-style: italic;
}

.audition-review .wf {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 18px;
	margin-bottom: 12px;
}

.audition-review .wf i {
	width: 3px;
	background: var(--rust);
	border-radius: 2px;
	opacity: 0.75;
}

/* =========================================================
   11. 数据区:转速表盘
   ========================================================= */
.dial-grid {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: clamp(28px, 5vw, 60px);
	align-items: center;
}

.rpm-dial {
	width: 100%;
	max-width: 340px;
	margin-inline: auto;
}

.rpm-dial .dial-face { fill: var(--ink-soft); stroke: var(--line-strong); stroke-width: 2; }
.rpm-dial .tick { stroke: var(--muted); stroke-width: 2; }
.rpm-dial .tick.major { stroke: var(--cream); stroke-width: 2.4; }
.rpm-dial .arc-bg { stroke: rgba(236,225,200,0.14); stroke-width: 10; fill: none; stroke-linecap: round; }
.rpm-dial .arc-val { stroke: var(--rust); stroke-width: 10; fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 1; } /* 静态显示 99% */
.rpm-dial .needle { stroke: var(--gold); stroke-width: 3.4; stroke-linecap: round; }
.rpm-dial .hub { fill: var(--gold); }
.rpm-dial .num { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.rpm-dial .big { fill: var(--cream); font-family: var(--font-head); font-weight: 800; font-size: 40px; }
.rpm-dial .big-sub { fill: var(--gold); font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; }

@media (prefers-reduced-motion: no-preference) {
	.rpm-dial.is-in .arc-val {
		stroke-dashoffset: 100;
		animation: hjv-sweep 1.6s var(--ease) 0.2s forwards;
	}
	.rpm-dial.is-in .needle {
		transform-box: fill-box;
		transform-origin: center;
		animation: hjv-needle 1.6s var(--ease) 0.2s both;
	}
}

@keyframes hjv-sweep {
	to { stroke-dashoffset: 1; }
}

@keyframes hjv-needle {
	0% { transform: rotate(-8deg); }
	60% { transform: rotate(3deg); }
	100% { transform: rotate(0deg); }
}

.dial-readout {
	display: grid;
	gap: 18px;
}

.readout-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: center;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--ink-soft);
}

.readout-item .rpm-chip {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	display: grid;
	place-content: center;
	text-align: center;
	color: var(--gold);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	line-height: 1.2;
}

.readout-item .rpm-chip b {
	display: block;
	font-family: var(--font-head);
	font-size: 1.1rem;
	color: var(--cream);
}

.readout-item .val {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--rust);
}

.readout-item .txt {
	font-size: 0.9rem;
	color: var(--muted);
}

/* =========================================================
   12. 新碟速递(新闻)
   ========================================================= */
.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.news-list li {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 6px;
	border-bottom: 1px solid var(--line);
	transition: background 0.2s var(--ease);
}

.news-list li:hover {
	background: rgba(236, 225, 200, 0.03);
}

.news-list .n-no {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--gold);
	flex: none;
	width: 3em;
}

.news-list .n-title {
	flex: 1;
	min-width: 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.02rem;
}

.news-list .n-title a { color: var(--cream); }
.news-list .n-title a:hover { color: var(--rust); }

.news-list .n-time {
	flex: none;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	color: var(--muted);
}

.news-list .n-go {
	flex: none;
	color: var(--rust);
	font-size: 0.82rem;
}

/* =========================================================
   13. 唱片室(联系/终曲)
   ========================================================= */
.studio-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(30px, 5vw, 64px);
	align-items: center;
}

.contact-lines {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 2px;
}

.contact-lines li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
}

.contact-lines .k {
	flex: none;
	width: 5em;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--gold);
}

.contact-lines .v {
	color: var(--paper);
	font-size: 1.02rem;
}

.contact-lines a { color: var(--paper); }
.contact-lines a:hover { color: var(--rust); }

.studio-note {
	font-size: 0.9rem;
	color: var(--muted);
	margin: 0;
}

/* =========================================================
   14. 页脚
   ========================================================= */
.site-footer {
	background: var(--ink-deep);
	border-top: 1px solid var(--line);
	padding: 60px 0 30px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}

.footer-brand .brand-name {
	font-size: 1.24rem;
	display: inline-block;
	margin-bottom: 12px;
}

.footer-brand .slogan {
	color: var(--paper);
	font-size: 1.02rem;
	margin-bottom: 12px;
}

.footer-supplier {
	color: var(--muted);
	font-size: 0.86rem;
	line-height: 1.7;
	margin: 0;
}

.site-footer h3 {
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	font-family: var(--font-mono);
	font-weight: 500;
	margin-bottom: 16px;
}

.footer-contact p {
	color: var(--muted);
	font-size: 0.92rem;
	margin: 0 0 8px;
}

.footer-contact a { color: var(--paper); }

.footer-menu .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.footer-menu .menu a {
	color: var(--muted);
	font-size: 0.92rem;
}

.footer-menu .menu a:hover { color: var(--rust); }

.footer-coda {
	border-top: 1px solid var(--line);
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	align-items: center;
}

.footer-coda p {
	margin: 0;
	color: var(--muted);
	font-size: 0.8rem;
	max-width: 62ch;
}

.footer-coda .fine {
	font-family: var(--font-mono);
	letter-spacing: 0.12em;
	color: var(--gold);
	white-space: nowrap;
}

/* =========================================================
   15. 内页:文章/归档/侧栏/评论/搜索/分页
   ========================================================= */
.page-shell {
	padding: clamp(48px, 7vw, 84px) 0;
}

.page-head {
	margin-bottom: 40px;
}

.page-head .crumb {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.page-head h1 {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin: 0;
}

.content-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 46px;
	align-items: start;
}

.post-card {
	padding: 26px 0;
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 22px;
}

.post-card .when {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--muted);
	line-height: 1.5;
}

.post-card .when .m-tag {
	display: inline-block;
	margin-top: 8px;
	color: var(--rust);
	font-size: 0.72rem;
}

.post-card h2 {
	font-size: 1.34rem;
	margin: 0 0 8px;
}

.post-card h2 a { color: var(--cream); }
.post-card h2 a:hover { color: var(--rust); }

.post-card .excerpt {
	color: var(--muted);
	font-size: 0.96rem;
}

.post-card .readmore {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.9rem;
}

.sticky-mark {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.64rem;
	letter-spacing: 0.1em;
	color: var(--ink-deep);
	background: var(--gold);
	padding: 2px 8px;
	border-radius: var(--pill);
	vertical-align: middle;
	margin-left: 8px;
}

/* 单篇 */
.entry-article {
	max-width: 760px;
}

.entry-meta {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	color: var(--muted);
	margin-top: 14px;
}

.entry-thumb {
	border-radius: var(--radius-sleeve);
	overflow: hidden;
	border: 1px solid var(--line);
	margin-bottom: 26px;
}

.entry-content {
	font-size: 1.04rem;
	line-height: 1.85;
}

.entry-content h2 { font-size: 1.5rem; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.24rem; margin-top: 1.4em; }

.entry-content a { text-decoration: underline; text-underline-offset: 3px; }

.entry-content blockquote {
	border-left: 3px solid var(--rust);
	padding: 6px 0 6px 22px;
	margin: 1.4em 0;
	color: var(--cream);
	font-style: italic;
}

.entry-content img {
	border-radius: var(--radius-sleeve);
	margin: 1.4em 0;
}

.entry-content code {
	color: var(--gold);
}

.entry-content :where(ul, ol) li {
	margin-bottom: 0.5em;
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.post-nav .dir {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--gold);
	margin-bottom: 4px;
}

.post-nav a {
	color: var(--cream);
	font-family: var(--font-head);
	font-weight: 600;
}

/* 侧栏 */
.widget-area {
	display: grid;
	gap: 26px;
	align-content: start;
}

.widget {
	background: var(--ink-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 22px;
}

.widget-title {
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-family: var(--font-mono);
	font-weight: 500;
	color: var(--gold);
	margin-bottom: 14px;
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.widget ul li {
	border-bottom: 1px solid var(--line);
	padding-bottom: 10px;
}

.widget ul li:last-child { border-bottom: 0; padding-bottom: 0; }

.widget ul a { color: var(--paper); font-size: 0.94rem; }
.widget ul a:hover { color: var(--rust); }

.widget .side-note {
	color: var(--muted);
	font-size: 0.9rem;
	margin: 0;
}

.widget select,
.widget input {
	width: 100%;
	background: var(--ink-deep);
	border: 1px solid var(--line);
	color: var(--paper);
	padding: 9px 12px;
	border-radius: var(--radius-sleeve);
	font-family: var(--font-body);
}

/* 搜索表单 */
.search-form {
	display: flex;
	gap: 8px;
}

.search-form .search-field {
	flex: 1;
	min-width: 0;
	background: rgba(236, 225, 200, 0.05);
	border: 1px solid var(--line-strong);
	color: var(--paper);
	padding: 11px 16px;
	border-radius: var(--pill);
	font-family: var(--font-body);
	font-size: 0.94rem;
}

.search-form .search-field::placeholder { color: var(--muted); }

.block.cream .search-form .search-field {
	background: rgba(33, 26, 22, 0.05);
	border-color: var(--line-ink-strong);
	color: var(--ink);
}

.search-form .search-submit {
	flex: none;
	background: var(--rust);
	color: var(--ink-deep);
	border: 0;
	padding: 11px 20px;
	border-radius: var(--pill);
	font-family: var(--font-head);
	font-weight: 700;
	cursor: pointer;
}

.search-form .search-submit:hover { background: var(--gold); }

/* 分页:做成播放器控制条 */
.pagination {
	margin-top: 44px;
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 8px;
	border: 1px solid var(--line-strong);
	border-radius: var(--pill);
	background: rgba(236, 225, 200, 0.03);
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border-radius: 50%;
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 0.9rem;
}

.pagination .page-numbers:hover {
	background: rgba(236, 225, 200, 0.08);
	color: var(--cream);
}

.pagination .page-numbers.current {
	background: var(--rust);
	color: var(--ink-deep);
	font-weight: 700;
}

.pagination .page-numbers.dots {
	background: transparent;
}

/* 评论 */
.comments-area {
	max-width: 760px;
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid var(--line);
}

.comments-title {
	font-size: 1.3rem;
	margin-bottom: 24px;
}

.comment-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.comment-list ol { list-style: none; }

.comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.comment-author { font-weight: 700; color: var(--cream); }
.comment-author .says { display: none; }

.comment-metadata {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	color: var(--muted);
	margin-bottom: 8px;
}

.comment-metadata a { color: var(--muted); }

.comment-respond {
	background: var(--ink-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 26px;
	margin-top: 20px;
}

.comment-form label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--gold);
	margin-bottom: 6px;
}

.comment-form input,
.comment-form textarea {
	width: 100%;
	background: var(--ink-deep);
	border: 1px solid var(--line-strong);
	color: var(--paper);
	padding: 11px 14px;
	border-radius: var(--radius-sleeve);
	font-family: var(--font-body);
	margin-bottom: 16px;
}

.comment-form .form-submit input {
	width: auto;
	background: var(--rust);
	color: var(--ink-deep);
	border: 0;
	padding: 12px 26px;
	border-radius: var(--pill);
	font-family: var(--font-head);
	font-weight: 700;
	cursor: pointer;
}

.no-comments { color: var(--muted); }

/* 空状态:跳针 */
.empty-note {
	text-align: center;
	padding: 46px 20px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-card);
	color: var(--muted);
}

.empty-note .skip-svg { width: 64px; height: 64px; margin: 0 auto 18px; color: var(--rust); }
.empty-note p { color: var(--cream); font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; margin: 0 0 6px; }
.empty-note span { font-size: 0.92rem; }

/* CTA 通用盒 */
.cta-box {
	margin-top: 40px;
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(217, 93, 52, 0.14), transparent 55%),
		var(--ink-soft);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-card);
	padding: clamp(24px, 3vw, 40px);
	text-align: center;
}

.cta-box h2 { font-size: 1.5rem; margin-bottom: 10px; }
.cta-box p { color: var(--muted); max-width: 46ch; margin: 0 auto 22px; }
.cta-box .hero-actions { justify-content: center; }

/* =========================================================
   16. 单个产品页:规格曲目单
   ========================================================= */
.product-hero {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: clamp(28px, 4vw, 54px);
	align-items: center;
	margin-bottom: 44px;
}

.product-disc {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 38% 30%, rgba(236, 225, 200, 0.1), transparent 42%),
		repeating-radial-gradient(circle at center, #191309 0 1.5px, #251c14 1.5px 3.2px),
		#1d1610;
	box-shadow: var(--shadow-disc);
	display: grid;
	place-items: center;
}

.product-disc .p-label {
	width: 46%;
	height: 46%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 32%, var(--cream-soft), var(--cream) 60%);
	display: grid;
	place-content: center;
	text-align: center;
	color: var(--ink);
	box-shadow: inset 0 0 0 1px rgba(189, 74, 38, 0.4);
	padding: 8%;
}

.product-disc .p-label b {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1rem;
	display: block;
}

.product-disc .p-label span {
	font-family: var(--font-mono);
	font-size: 0.56rem;
	letter-spacing: 0.14em;
	color: var(--rust-deep);
	margin-top: 4px;
	display: block;
}

.product-hero .p-model {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	color: var(--gold);
	margin-bottom: 10px;
}

.product-hero h1 {
	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
	margin: 0 0 14px;
}

.product-hero .p-desc {
	color: var(--muted);
	font-size: 1.02rem;
}

.spec-wrap {
	max-width: 820px;
}

.spec-caption {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--cream);
	margin-bottom: 18px;
}

.spec-caption .disc-chip {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background:
		radial-gradient(circle at center, var(--rust) 0 22%, transparent 22%),
		repeating-radial-gradient(circle at center, rgba(236,225,200,0.3) 0 1px, transparent 1px 2.4px);
}

.spec-tracklist {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	border-top: 1px solid var(--line);
}

.spec-tracklist li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--line);
}

.spec-tracklist .s-no {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	color: var(--gold);
	flex: none;
	width: 3em;
}

.spec-tracklist .s-k {
	flex: none;
	width: 9em;
	color: var(--muted);
}

.spec-tracklist .s-dots {
	flex: 1;
	border-bottom: 1px dotted var(--line-strong);
	align-self: flex-end;
	margin: 0 6px 6px;
}

.spec-tracklist .s-v {
	flex: none;
	text-align: right;
	max-width: 55%;
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 0.94rem;
}

.spec-tracklist .s-v strong { color: var(--rust); font-weight: 700; }

/* =========================================================
   17. reveal 动画
   ========================================================= */
.reveal {
	opacity: 1;
	transform: none;
}

html.js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
	will-change: opacity, transform;
}

html.js .reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.js .reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =========================================================
   18. 响应式
   ========================================================= */
@media (max-width: 980px) {
	.hero-grid { grid-template-columns: 1fr; }
	.turntable { max-width: 380px; order: -1; }
	.master-card { grid-template-columns: 110px 1fr; gap: 20px; }
	.dial-grid { grid-template-columns: 1fr; }
	.rpm-dial { max-width: 300px; }
	.studio-grid { grid-template-columns: 1fr; }
	.product-hero { grid-template-columns: 220px 1fr; }
}

@media (max-width: 860px) {
	.content-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 30px; }
	.sides-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	body { font-size: 16px; }

	.nav-toggle { display: inline-flex; }

	.menu-wrap {
		position: fixed;
		inset: 74px 0 auto 0;
		background: var(--ink-deep);
		border-bottom: 1px solid var(--line);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s var(--ease);
	}

	.main-nav.is-open .menu-wrap {
		max-height: 78vh;
		overflow-y: auto;
		box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
	}

	.menu-wrap .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: min(var(--wrap), 92vw);
		margin-inline: auto;
		padding: 12px 0;
	}

	.menu-wrap .menu-item > a {
		padding: 14px 8px;
		border-bottom: 1px solid var(--line);
		border-radius: 0;
	}

	.menu-wrap .current-menu-item > a::after { display: none; }

	.counter-grid { grid-template-columns: 1fr 1fr; gap: 26px 16px; }

	.product-hero { grid-template-columns: 1fr; }
	.product-disc { max-width: 240px; margin-inline: auto; }

	.post-card { grid-template-columns: 1fr; gap: 8px; }
	.post-card .when { display: flex; gap: 12px; align-items: center; }
	.post-card .when .m-tag { margin-top: 0; }

	.footer-coda { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 460px) {
	.counter-grid { grid-template-columns: 1fr; }
	.hero-actions { width: 100%; }
	.btn { width: 100%; justify-content: center; }
	.transport { width: 100%; justify-content: center; }
}

/* 打印 */
@media print {
	.site-header, .site-footer, .tonearm, .transport, .hero-actions { display: none; }
	body { background: #fff; color: #000; }
}