/* --- accessories.html 专用样式 --- */

/* 扩展变量 */
:root {
    --jade-green: #a8c8b9;
}

/* 页面特定行高 */
body { line-height: 2.2; }

/* 容器调窄 */
.container { max-width: 1100px; }

/* 页面头部 */
.page-header { padding: 50px 0; text-align: center; position: relative; }

.logo-seal {
    display: inline-block;
    width: 50px; height: 50px; line-height: 50px;
    border: 2px solid var(--seal-red);
    color: var(--seal-red);
    font-size: 1.2rem; font-weight: bold;
    margin-bottom: 20px; border-radius: 4px;
    opacity: 0.8; font-family: var(--font-title);
}

.page-title {
    font-size: 2rem; font-weight: normal;
    letter-spacing: 0.2em; margin: 0;
    font-family: var(--font-title);
}

.page-subtitle {
    font-size: 0.9rem; color: #888;
    letter-spacing: 0.1em; margin-top: 15px;
}

.back-link {
    position: absolute; top: 50px; left: 0;
    text-decoration: none; color: var(--ink-color);
    font-size: 0.9rem; opacity: 0.6;
    transition: opacity 0.3s; letter-spacing: 0.1em;
}
.back-link:hover { opacity: 1; }

/* 艺术化布局 */
.art-section { padding: 100px 0; position: relative; }

/* 图片样式 */
.art-img {
    width: 100%; height: auto; display: block;
    filter: contrast(0.9) brightness(1.05) sepia(0.2) saturate(0.8);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(56, 48, 46, 0.1);
    transition: all 1s ease;
}
.art-img:hover {
    filter: contrast(0.95) brightness(1.08) sepia(0.1) saturate(0.9);
    transform: scale(1.01);
}

/* 文字块 */
.text-block {
    font-size: 1rem; color: #5d5553; text-align: justify;
}
.text-block h3 {
    font-size: 1.4rem; font-weight: normal;
    color: var(--ink-color); margin-top: 0; margin-bottom: 30px;
    font-family: var(--font-title);
    position: relative; display: inline-block;
}
.text-block h3::after {
    content: ''; display: block;
    width: 40px; height: 2px;
    background-color: var(--jade-green);
    margin-top: 15px; opacity: 0.6;
}

/* 布局模式 1：开篇 */
.intro-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: center; margin-bottom: 120px;
}
.intro-text { padding-left: 20px; }
.intro-text p:first-of-type { font-size: 1.2rem; color: var(--ink-color); }

/* 布局模式 2：沉浸式 */
.immersive-layout {
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: 60px; align-items: center;
}
.immersive-img-wrap { position: relative; top: 40px; }
.immersive-text {
    background: rgba(247, 243, 232, 0.8);
    padding: 60px 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    position: relative; z-index: 2;
}

.vertical-phrase {
    writing-mode: vertical-rl;
    font-family: var(--font-title);
    font-size: 1.1rem; color: #888;
    position: absolute; top: 0; right: -60px;
    height: 200px; letter-spacing: 0.3em;
}

/* 布局模式 3：雅集 */
.gallery-layout {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 40px; align-items: start;
}
.g-item-1 { grid-column: 1 / span 5; margin-top: 80px; }
.g-item-2 { grid-column: 7 / span 6; }
.g-item-3 { grid-column: 3 / span 5; margin-top: -60px; z-index: 2; }
.g-item-4 { grid-column: 9 / span 4; margin-top: 100px; }

.gallery-text {
    grid-column: 2 / span 4;
    margin-bottom: 60px; text-align: center;
}
.gallery-text h3::after { margin: 15px auto 0; }

/* 页脚 */
.accessories-footer {
    text-align: center; padding: 100px 0 60px;
    font-size: 0.85rem; color: #999;
    border-top: 1px solid rgba(56, 48, 46, 0.1);
}
.ship-footer .company-name {
    margin-bottom: 20px; font-size: 1.1rem;
    font-family: var(--font-title);
}

/* 响应式 */
@media (max-width: 768px) {
    .page-header { padding: 30px 0; }
    .back-link { top: 30px; }
    .intro-layout, .immersive-layout { grid-template-columns: 1fr; gap: 40px; }
    .intro-text { padding-left: 0; }
    .immersive-img-wrap { top: 0; order: -1; }
    .immersive-text { padding: 40px 25px; }
    .vertical-phrase { display: none; }
    .gallery-layout { display: flex; flex-direction: column; gap: 40px; }
    .g-item-1, .g-item-2, .g-item-3, .g-item-4 { margin: 0; }
    .gallery-text { margin-bottom: 30px; }
}