/* ─── 基础设置 ─── */
:root {
–accent: #0060aa;
–light: #f5f7fa;
–dark: #1c1c1c;
–text-main: #2c2c2c;
–text-light: #666;

/* 容器尺寸 */
–container-min: 980px;
–container-ideal: 78vw;
–container-max: 1280px;
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;
line-height: 1.8;
color: var(–text-main);
background: #fff;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}

/* ─── 容器布局 ─── */
.case {
max-width: clamp(var(–container-min), var(–container-ideal), var(–container-max));
margin: 0 auto;
padding: 0 1.5rem 6rem;
}

/* ─── Header 部分样式 (保持白色标题原样) ─── */
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6em; font-weight: 600; }

h1 {
font-size: 2.4rem;
color: #fff; /* 保持白色，用于你的蓝色背景 */
font-weight: 700;
letter-spacing: -0.5px;
}

h2 {
font-size: 1.5rem;
border-bottom: 3px solid var(–accent);
padding-bottom: 0.25em;
margin-top: 2.2rem;
font-weight: 500;
display: inline-block;
}

strong { font-weight: 700; color: #000; }

/* ─── 正文排版 ─── */
section {
max-width: 900px;
margin: 0 auto;
text-align: left; /* 确保正文左对齐 */
}

h3 {
font-size: 1.6rem;
margin: 3.5rem 0 1.2rem;
color: var(–dark);
}

p {
margin-bottom: 1.6rem;
color: #333;
}

/* ─── 图片容器 ─── */
figure.frame {
margin: 3rem 0;
}

figure.frame .slot {
width: 100%;
aspect-ratio: 16 / 9;
display: grid;
place-items: center;
background: #000;
border-radius: 12px;
position: relative;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

figure.frame .slot img,
figure.frame .slot video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

figure.frame figcaption {
text-align: center;
font-size: 0.9rem;
color: var(–text-light);
margin-top: 1rem;
font-style: italic;
}

/* ─── 引用块 ─── */
blockquote {
margin: 2.5rem 0;
padding: 1.5rem 2rem;
background: var(–light);
border-left: 5px solid var(–accent);
font-style: italic;
font-size: 1.1rem;
color: #444;
border-radius: 0 8px 8px 0;
}

/* ─── 分割线 ─── */
hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, #ddd, transparent);
margin: 4rem 0;
}

/* ─── Credits (已修复布局) ─── */
.credits-box {
background: var(–light);
padding: 2rem;
border-radius: 12px;
max-width: 700px;
margin: 2rem auto; /* 居中显示整个框 */
text-align: left; /* 强制内部左对齐，防止继承外部的center */
}

.credit-row {
display: flex; /* 使用 Flexbox 确保左右分栏 */
justify-content: flex-start;
align-items: baseline;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(0,0,0,0.05); /* 增加淡淡的分割线，更整齐 */
}

.credit-row:last-child {
border-bottom: none;
}

.credit-label {
flex: 0 0 40%; /* 左侧固定占 40% 宽度 */
font-weight: 700;
color: var(–accent);
text-align: right; /* 标签靠右对齐，靠近名字 */
padding-right: 2rem;
box-sizing: border-box;
}

.credit-value {
flex: 1; /* 右侧名字占据剩余空间 */
color: var(–dark);
font-weight: 500;
}

.credit-value a {
color: var(–accent);
text-decoration: none;
border-bottom: 1px solid rgba(0,96,170,0.3);
}

/* ─── 底部 CTA 卡片 ─── */
.cta-box {
margin-top: 3rem;
padding: 2rem;
background: linear-gradient(135deg, #0060aa, #004b85);
color: white;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 96, 170, 0.2);
}
.cta-box p { color: rgba(255,255,255,0.9); margin: 0; }
.cta-box strong { color: #fff; display: block; margin-bottom: 0.5rem; font-size: 1.1em;}

/* ─── 响应式 ─── */
@media (max-width: 768px) {
.case { padding-left: 1rem; padding-right: 1rem; }
h1 { font-size: 1.8rem; }
/* 手机端改为堆叠显示 */
.credit-row { flex-direction: column; text-align: center; }
.credit-label { text-align: center; padding-right: 0; margin-bottom: 0.2rem; color: #888; font-size: 0.9em; text-transform: uppercase; letter-spacing: 1px;}
.credits-box { text-align: center; }
}