/* 全站通用导航条、页脚、面包屑的样式（从 blog-article.tpl.html 的页内样式摘出来，给图谱人物页等静态页用）。
   header / footer 里的 Tailwind 类名样式在 /css/blog-article-tw.css。改全站导航或页脚时，两处一起看。 */
[hidden] { display: none !important; }
body { margin: 0; padding-top: 72px; background: #fdfbf7; color: #2b2623; -webkit-font-smoothing: antialiased; }
@media (min-width: 768px) { body { padding-top: 90px; } }
a { color: inherit; text-decoration: none; }
button.icon-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.crumb { width: 100%; background: #fff; border-bottom: 1px solid #e5e7eb; }
.crumb .in { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: "Playfair Display", serif; font-size: 12px; line-height: 1.6; color: #6b7280; letter-spacing: .1em; text-transform: uppercase; }
.crumb a { transition: color .2s; }
.crumb a:hover { color: #B72E29; }
.crumb .here { color: #2a2a2a; font-weight: 700; }
.text-metallic {
    background: linear-gradient(180deg, #E5D1B0 0%, #B89F77 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
i.text-metallic { display: inline-block; }
.text-metallic-hover-red { transition: all 0.3s ease; }
.text-metallic-hover-red:hover {
    background: none !important;
    -webkit-text-fill-color: #B72E29 !important;
    color: #B72E29 !important;
}
.text-metallic-hover-white { transition: all 0.3s ease; }
.text-metallic-hover-white:hover {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}
.nav-link {
    position: relative;
    font-family: 'Cormorant Garamond', 'Songti SC', 'Noto Serif SC', serif;
    font-weight: 200;
    letter-spacing: 0.2em;
    background: linear-gradient(180deg, #E5D1B0 0%, #B89F77 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.8));
    transition: all 0.3s ease;
    font-size: 1.15rem;
}
.nav-link:hover, .nav-link.active {
    background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #E5D1B0;
    transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
    background-color: #ffffff;
}
.site-footer { padding-top: 2.5rem; padding-bottom: 2.5rem; font-weight: 300; }
@media (min-width: 768px) { .site-footer { padding-top: 4rem; padding-bottom: 4rem; } }
.site-footer .footer-wrap { max-width: 80rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 768px) { .site-footer .footer-wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }
.site-footer .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) {
    .site-footer .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; }
    .site-footer .footer-brand { grid-column: span 12; }
    .site-footer .footer-contact, .site-footer .footer-qr { grid-column: span 6; }
}
@media (min-width: 1024px) {
    .site-footer .footer-grid { gap: 2rem; }
    .site-footer .footer-brand { grid-column: span 5; }
    .site-footer .footer-contact { grid-column: 7 / span 3; }
    .site-footer .footer-qr { grid-column: 10 / span 3; }
}
.site-footer .footer-social, .site-footer .footer-columns { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) {
    .site-footer .footer-social, .site-footer .footer-columns { grid-template-columns: 1fr 1fr; }
}
.site-footer .social-icon { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (min-width: 768px) { .site-footer .social-icon { width: 2rem; height: 2rem; } }
.site-footer .qr-box { width: 3rem; height: 3rem; }
@media (min-width: 768px) { .site-footer .qr-box { width: 3.5rem; height: 3.5rem; } }
.site-footer .qr-card { background: rgba(31, 41, 55, 0.4); border: 1px solid rgba(55, 65, 81, 0.5); }
.site-footer .footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(31, 41, 55, 0.8); display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: 10px; letter-spacing: 0.1em; color: #6b7280; }
@media (min-width: 768px) {
    .site-footer .footer-bottom { margin-top: 4rem; padding-top: 2rem; flex-direction: row; justify-content: space-between; font-size: 0.75rem; }
}
.site-footer a:hover { color: #fff; }
.site-footer .footer-bottom a:hover { color: #E5D1B0; }
@media (max-width: 767px) { .crumb .in { padding: 16px 18px; } }