/* ==========================================================================
   Custom enhancements for Anatole theme in Pelican
   1. 彻底禁用点击/页面加载动画，实现秒开零抖动
   2. 整体字号放大 + 排版深度调优
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 彻底禁用所有切换与加载动画 (Disable All Loading & Click Animations)
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    animation-delay: 0s !important;
    -webkit-animation-delay: 0s !important;
}

.animated,
.fadeInDown,
.fadeIn,
.fadeInUp {
    animation: none !important;
    -webkit-animation: none !important;
    transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* 导航链接只保留平滑轻微的颜色变化，绝无位移与抖动 */
a {
    transition: color 0.12s ease !important;
}

/* --------------------------------------------------------------------------
   2. 整体字号放大 (Base Root Scaling)
   原 Anatole 设置 html 为 62.5% (1rem = 10px)，整体偏小。
   提升至 76% (1rem ≈ 12.2px)，整站等比放大约 22%，阅读体验大幅提升。
   -------------------------------------------------------------------------- */
html, .html {
    font-size: 76% !important;
    -webkit-text-size-adjust: 100%;
}

body, .body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    letter-spacing: 0.012em;
    line-height: 1.8;
}

/* --------------------------------------------------------------------------
   3. 左侧侧边栏排版优化 (Sidebar Typography & Layout)
   -------------------------------------------------------------------------- */
.sidebar__introduction-profileimage {
    width: 140px !important;
    height: 140px !important;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.4rem !important;
    display: block;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}

.sidebar__introduction-title a {
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    text-decoration: none;
    letter-spacing: 0.02em;
    color: inherit;
}

.sidebar__introduction-description p {
    font-size: 1.25rem !important;
    color: #555 !important;
    margin-top: 0.8rem !important;
    line-height: 1.6 !important;
    padding: 0 1rem;
}

.theme--dark .sidebar__introduction-description p {
    color: #aaa !important;
}

.sidebar__list {
    display: flex !important;
    justify-content: center !important;
    gap: 1.6rem !important;
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0 !important;
}

.sidebar__list-item a {
    color: #444;
    display: inline-block;
}

.sidebar__list-item a:hover {
    color: #0070f3;
}

.theme--dark .sidebar__list-item a {
    color: #ccc;
}

.theme--dark .sidebar__list-item a:hover {
    color: #38bdf8;
}

.footer__sidebar, .footer__base {
    font-size: 1.15rem !important;
    color: #888;
}

.footer__item a {
    color: #666;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. 顶部导航排版优化 (Header Navigation)
   -------------------------------------------------------------------------- */
.nav__list-item {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
}

.nav__list-item a {
    padding-bottom: 6px;
    color: inherit;
}

.nav__link--active {
    padding-bottom: 22px !important;
    border-bottom-width: 2px !important;
}

@media screen and (min-width: 961px) {
    .theme--light .nav__link--active {
        border-bottom: 2px solid #111 !important;
    }
    .theme--dark .nav__link--active {
        border-bottom: 2px solid #fff !important;
    }
}

/* --------------------------------------------------------------------------
   5. 右侧主内容区域字号与间距优化 (Content Typography)
   -------------------------------------------------------------------------- */
.wrapper__main {
    max-width: 960px;
}

.post {
    padding: 30px 40px !important;
}

@media screen and (max-width: 768px) {
    .post {
        padding: 20px 20px !important;
    }
}

/* 页面大标题 */
.page-heading {
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.8rem 0 !important;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.page-subheading {
    font-size: 1.35rem !important;
    color: #666 !important;
    margin-bottom: 2rem !important;
    line-height: 1.7 !important;
}

.theme--dark .page-subheading {
    color: #999 !important;
}

.page-divider {
    border: none;
    border-top: 1px solid #eaeaea;
    margin: 1.8rem 0 2.5rem !important;
}

.theme--dark .page-divider {
    border-top-color: #333;
}

/* --------------------------------------------------------------------------
   6. 文章列表项 (Writing List - Image 2)
   -------------------------------------------------------------------------- */
.article-entry {
    margin-bottom: 2.8rem !important;
}

.article-entry h2.entry-title {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.6rem 0 !important;
    line-height: 1.45 !important;
}

.article-entry h2.entry-title a {
    color: inherit;
    text-decoration: none;
}

.article-entry h2.entry-title a:hover {
    color: #0070f3;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.theme--dark .article-entry h2.entry-title a:hover {
    color: #38bdf8;
}

.article-entry .entry-meta,
.entry-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 1.1rem !important;
    color: #888 !important;
    margin-bottom: 0.6rem !important;
}

.article-entry p.entry-summary {
    font-size: 1.3rem !important;
    line-height: 1.85 !important;
    color: #374151 !important;
    margin: 0.5rem 0 0 !important;
}

.theme--dark .article-entry p.entry-summary {
    color: #cbd5e1 !important;
}

/* --------------------------------------------------------------------------
   7. 交互项目卡片 (Projects / Portfolio - Image 3)
   -------------------------------------------------------------------------- */
.project-card-anatole {
    border: 1px solid #e1e4e8 !important;
    border-radius: 8px !important;
    padding: 1.8rem 2rem !important;
    margin-bottom: 2.4rem !important;
    background-color: #fff;
}

.theme--dark .project-card-anatole {
    border-color: #333 !important;
    background-color: #1a232b !important;
}

.project-card-anatole h2.project-title {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.6rem 0 !important;
}

.project-card-anatole h2.project-title a {
    color: #0070f3 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.theme--dark .project-card-anatole h2.project-title a {
    color: #38bdf8 !important;
}

.project-card-anatole .project-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 1.05rem !important;
    color: #888 !important;
    margin-bottom: 1rem !important;
}

.project-card-anatole .project-desc {
    font-size: 1.3rem !important;
    line-height: 1.8 !important;
    color: #2d3748 !important;
    margin-bottom: 1.5rem !important;
}

.theme--dark .project-card-anatole .project-desc {
    color: #cbd5e1 !important;
}

.project-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-anatole {
    display: inline-flex !important;
    align-items: center;
    font-size: 1.1rem !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 500 !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    background: #f9fafb !important;
    color: #222 !important;
    text-decoration: none !important;
}

.theme--dark .btn-anatole {
    border-color: #444 !important;
    background: #202b33 !important;
    color: #eee !important;
}

.btn-anatole:hover {
    background: #0070f3 !important;
    color: #fff !important;
    border-color: #0070f3 !important;
}

.theme--dark .btn-anatole:hover {
    background: #0284c7 !important;
    color: #fff !important;
    border-color: #0284c7 !important;
}

/* --------------------------------------------------------------------------
   8. 正文长文排版调优 (Article Detail Typography)
   -------------------------------------------------------------------------- */
.post__content {
    font-size: 1.35rem !important;
    line-height: 1.95 !important;
    color: #222 !important;
}

.theme--dark .post__content {
    color: #e2e8f0 !important;
}

.post__content p {
    font-size: 1.35rem !important;
    line-height: 1.95 !important;
    margin: 0 0 1.8rem 0 !important;
}

.post__content h1 {
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    margin-top: 3rem !important;
    margin-bottom: 1.2rem !important;
    line-height: 1.35 !important;
}

.post__content h2 {
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    margin-top: 2.8rem !important;
    margin-bottom: 1.2rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-bottom: 0.6rem !important;
    line-height: 1.35 !important;
}

.theme--dark .post__content h2 {
    border-bottom-color: #374151 !important;
}

.post__content h3 {
    font-size: 1.65rem !important;
    font-weight: 600 !important;
    margin-top: 2.2rem !important;
    margin-bottom: 1rem !important;
}

.post__content ul, .post__content ol {
    font-size: 1.35rem !important;
    line-height: 1.9 !important;
    margin: 0 0 1.8rem 0 !important;
    padding-left: 2rem !important;
}

.post__content li {
    margin-bottom: 0.6rem !important;
}

blockquote {
    border-left: 4px solid #0070f3 !important;
    background: #f8fafc !important;
    padding: 1.2rem 1.6rem !important;
    margin: 2rem 0 !important;
    border-radius: 0 6px 6px 0 !important;
    font-size: 1.35rem !important;
    line-height: 1.85 !important;
    color: #334155 !important;
}

.theme--dark blockquote {
    background: #1e2830 !important;
    border-left-color: #38bdf8 !important;
    color: #cbd5e1 !important;
}

blockquote p {
    font-size: 1.35rem !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   9. 代码块与表格优化
   -------------------------------------------------------------------------- */
pre {
    padding: 1.2rem 1.5rem !important;
    border-radius: 8px !important;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    margin: 2rem 0 !important;
}

.theme--dark pre {
    background: #1e2830 !important;
    border-color: #333 !important;
    color: #e2e8f0 !important;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 1.15rem !important;
}

:not(pre) > code {
    background: #f1f5f9 !important;
    padding: 0.2rem 0.45rem !important;
    border-radius: 4px !important;
    color: #c7254e !important;
}

.theme--dark :not(pre) > code {
    background: #25333d !important;
    color: #f472b6 !important;
}

table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 2rem 0;
    width: 100%;
    font-size: 1.25rem !important;
}

th, td {
    border: 1px solid #e2e8f0 !important;
    padding: 0.8rem 1.2rem !important;
    text-align: left;
}

th {
    background-color: #f8fafc !important;
    font-weight: 600;
}

.theme--dark th {
    background-color: #1e2830 !important;
    border-color: #333 !important;
}

.theme--dark td {
    border-color: #333 !important;
}

/* --------------------------------------------------------------------------
   10. 交互演示卡片与多媒体容器
   -------------------------------------------------------------------------- */
.demo-embed-card {
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    overflow: hidden;
    margin: 2.2rem 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.theme--dark .demo-embed-card {
    border-color: #333;
}

.demo-embed-header {
    background: #f8fafc;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid #e1e4e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: ui-monospace, monospace;
    font-size: 1.1rem;
}

.theme--dark .demo-embed-header {
    background: #1e2830;
    border-bottom-color: #333;
}

.demo-iframe-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    background: #fff;
}

.demo-iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.media-container {
    background: #f8fafc;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.theme--dark .media-container {
    background: #1e2830;
    border-color: #333;
}

.media-container audio, .media-container video {
    width: 100%;
    outline: none;
}

.media-container video {
    max-height: 520px;
    border-radius: 6px;
    background: #000;
}

.media-caption {
    font-size: 1.05rem;
    color: #666;
    margin-top: 0.8rem;
    font-family: ui-monospace, monospace;
}

.theme--dark .media-caption {
    color: #aaa;
}