/*
 * Theme Name: xunying
 * Theme URI: https://example.com/
 * Description: 极简摄影作品集风格主题
 * Version: 2.1.0
 * Author: xunying
 */

/* Anti-scraper: hide elements before JS decrypts them */
[data-cipher] { visibility: hidden; }
[data-cipher].decrypted { visibility: visible; }

/* ========== Design Tokens (CSS Variables) ========== */
:root {
    /* Color System */
    --color-primary: #8b7355;        /* 温暖的棕褐色 - 主色调 */
    --color-primary-light: #a89070;  /* 主色浅色 */
    --color-primary-dark: #6d5a42;   /* 主色深色 */
    
    /* Neutral Colors */
    --color-text-primary: #16161f;   /* 主文本色 */
    --color-text-secondary: #656575; /* 次要文本色 */
    --color-text-tertiary: #999;     /* 辅助文本色 */
    --color-text-muted: #ccc;        /* 弱化文本色 */
    
    /* Background Colors */
    --color-bg-primary: #ffffff;     /* 主背景色 */
    --color-bg-secondary: #f9f9f9;   /* 次要背景色 */
    --color-bg-tertiary: #f4f4f4;    /* 三级背景色 */
    --color-bg-hover: #f5f5f5;       /* 悬停背景色 */
    
    /* Border Colors */
    --color-border-light: #f5f5f5;   /* 浅边框 */
    --color-border-medium: #e5e5e5;  /* 中边框 */
    --color-border-dark: #ddd;       /* 深边框 */
    
    /* Typography */
    --font-serif: "Times New Roman", "Georgia", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
    --font-sans: "Helvetica Neue", Helvetica, Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    
    /* Font Sizes */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;
    --font-size-5xl: 48px;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 60px;
    --spacing-4xl: 80px;
    --spacing-5xl: 100px;
    
    /* Border Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
    
    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 999;
    --z-modal: 1000;
    --z-loading: 9999;
}

/* ========== Reset ========== */
html { color: var(--color-text-primary); }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
img { vertical-align: bottom; max-width: 100%; height: auto; }
li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; font-variant: normal; }
sup { font-size: 0.75em; vertical-align: 0.25em; }
sub { font-size: 0.75em; vertical-align: -0.25em; }
big { font-size: 110%; }
small { font-size: 90%; }
legend { color: var(--color-text-primary); }
article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }

/* Accessibility - Focus styles */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== Base ========== */
html, body { height: 100%; background: var(--color-bg-primary); }
html { -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-y: scroll; }
body {
    position: relative;
    height: 100%;
    line-height: 1.6;
    font-size: var(--font-size-base);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-family: var(--font-serif);
    color: var(--color-text-primary);
    font-style: italic;
}

a { text-decoration: none; color: var(--color-text-secondary); transition: color var(--transition-base); }
a:hover { color: var(--color-primary); }

/* Selection */
::selection {
    background: var(--color-primary);
    color: white;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}
::-webkit-scrollbar-thumb {
    background: var(--color-border-dark);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

/* ========== Loading ========== */
.siteLoading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-loading);
    background: var(--color-bg-primary);
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}
.siteLoading.hide { opacity: 0; visibility: hidden; }

.loadingLines { position: absolute; left: 50%; top: 50%; }
.loadingLines.show div {
    position: absolute;
    left: 0;
    top: -30px;
    width: 1px;
    height: 60px;
    background: var(--color-primary);
}
.loadingLines.show .line1 { margin-top: -6px; animation: piston 0.9s ease-in-out infinite; }
.loadingLines.show .line2 { margin-top: 6px; animation: piston-rev 0.9s ease-in-out infinite; }

@keyframes piston {
    0%, 100% { transform: rotate(22deg) translate3d(0, -25px, 0); }
    50% { transform: rotate(22deg) translate3d(0, 25px, 0); }
}
@keyframes piston-rev {
    0%, 100% { transform: rotate(22deg) translate3d(0, 25px, 0); }
    50% { transform: rotate(22deg) translate3d(0, -25px, 0); }
}

/* ========== Page ========== */
.page {
    width: 995px;
    margin: 0 auto;
    margin-bottom: 50px;
    opacity: 0;
    transition: opacity var(--transition-slow);
}
.page.show { opacity: 1; }

/* ========== Header ========== */
.siteHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0 50px;
    position: relative;
}

.siteHeader::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border-light), transparent);
}

.siteHeader h2 {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: normal;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 400px;
    margin: 0;
}

.siteHeader h2 a {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
}

.siteHeader h2 a:hover {
    color: var(--color-primary);
}

.siteHeader .line {
    font-style: normal;
    font-family: var(--font-sans);
    font-size: 90px;
    font-weight: 100;
    color: var(--color-primary);
    transform: rotate(22deg);
    transition: all var(--transition-base);
    line-height: 1;
    opacity: 0.8;
    position: relative;
}

.siteHeader .line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(139, 115, 85, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.siteHeader .line:hover {
    transform: rotate(22deg) scale(1.15);
    color: var(--color-primary);
    opacity: 1;
}

.siteHeader .line:hover::before {
    opacity: 1;
}

.siteHeader .rightBlock {
    font-family: var(--font-sans);
    font-style: normal;
    text-align: right;
}

.siteHeader .rightBlock h1 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.siteHeader .rightBlock h1 a {
    color: var(--color-text-primary);
    transition: color var(--transition-base);
}

.siteHeader .rightBlock h1 a:hover {
    color: var(--color-primary);
}

.siteHeader .rightBlock .nav {
    font-size: 11px;
    color: var(--color-text-tertiary);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.siteHeader .rightBlock .nav span {
    padding: 0 12px;
    color: var(--color-border-light);
}

.siteHeader .rightBlock .nav a {
    position: relative;
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
}

.siteHeader .rightBlock .nav a:hover {
    color: var(--color-primary);
}

.siteHeader .rightBlock .nav a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.siteHeader .rightBlock .nav a:hover::after {
    width: 100%;
}

/* ========== Pool (main content) ========== */
.pool { padding-bottom: 0; }

/* ========== Entry ========== */
.entry { position: relative; padding-bottom: 60px; }

/* .rev = reversed layout (text right, image left) */
.entry.rev .info { left: auto; right: 0; text-align: right; }
.entry.rev .info.fixed { right: 50%; left: auto; margin-right: -497.5px; margin-left: 0; }
.entry.rev .info .mark { left: auto; right: -45px; }
.entry.rev .info h3 { margin-left: 0; float: right; }
.entry.rev .info h3 .inr { left: auto; right: 0; }
.entry.rev .info .date { clear: both; }
.entry.rev .info .desc { float: right; }
.entry.rev .info .desc .inr { left: auto; right: 0; }
.entry.rev .info .links { clear: both; }
.entry.rev .picArea { margin-right: 120px; margin-left: 0; }
.entry.rev .teaser .pic { float: right; }

/* Hover mark */
.entry.ov .info .mark { opacity: 1; }

/* Open state */
.entry.open .info .mark.mark-plus { visibility: hidden; opacity: 0; }
.entry.open .info .mark.mark-minus { visibility: visible; }

/* Entry hover effect - subtle scale on image */
.entry .teaser .pic {
    transition: transform var(--transition-slow);
}
.entry:hover .teaser .pic {
    transform: translateY(-4px);
}

/* Empty entry state */
.entry.entry-empty {
    justify-content: center;
    padding: 200px 0;
    text-align: center;
}
.entry.entry-empty p {
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* ========== Entry Body (expanded content) ========== */
.entryBody { display: none; }
.entry.open .entryBody { display: block; animation: fadeInUp 0.5s ease; }
.entryBody {
    position: relative;
    z-index: 1;
    padding: var(--spacing-3xl) 0 0;
}
.entryBodyInr {
    max-width: 875px;
    margin-left: 120px;
    margin-right: 0;
    font-style: normal;
    font-family: var(--font-sans);
}

.entry.rev .entryBodyInr {
    margin-left: 0;
    margin-right: 120px;
}
.entryBodyInr p { margin-bottom: var(--spacing-lg); font-size: var(--font-size-md); line-height: 2; color: #333; }
.entryBodyInr h2,
.entryBodyInr h3 { margin: 50px 0 20px; font-weight: normal; letter-spacing: 1px; }
.entryBodyInr h2 { font-size: 26px; text-transform: uppercase; letter-spacing: 3px; color: var(--color-text-primary); }
.entryBodyInr h3 { font-size: 20px; color: var(--color-text-primary); }
.entryBodyInr blockquote {
    margin: 40px 0; padding: 20px 30px;
    border-left: 2px solid var(--color-primary);
    font-style: italic; color: var(--color-text-secondary); font-size: 16px;
    background: var(--color-bg-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.entryBodyInr img { max-width: 100%; height: auto; margin-bottom: 20px; display: block; border-radius: var(--radius-md); }
.entryBodyInr a { color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-dark); transition: all var(--transition-base); }
.entryBodyInr a:hover { color: var(--color-primary); border-color: var(--color-primary); }
.entryBodyInr .pic {
    width: auto; height: auto;
    position: relative; background: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mark positioning for rev */
.entry.rev .info .mark { left: auto; right: -45px; }
.entry.rev .info .mark.mark-minus { margin-top: -29px; }

/* ========== Info Panel ========== */
.entry .info {
    position: absolute;
    left: 0;
    top: 30px;
    z-index: 2;
}

.entry .info.fixed {
    position: fixed;
    left: 50%;
    margin-left: -497.5px;
    margin-top: 0;
    z-index: var(--z-fixed);
    width: 995px;
}

/* info-white (overlay) */
.entry .info.info-black { }
.entry .info.info-white { z-index: var(--z-modal); pointer-events: none; }
.entry .info.info-white * { color: #fff !important; }
.entry .info.info-white .mark { display: none; }
.entry .info.info-white .date,
.entry .info.info-white .links { visibility: hidden; }

/* info-white .inr text shadow */
.entry .info.info-white .inr {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ========== Info Clip ========== */
.entry .info .infoClip { position: relative; }
.entry .info.info-white .infoClip { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden;
}

/* Normal layout: image on right, text on left */
.entry:not(.rev) .info.info-white .infoClip {
    left: 120px;
    right: 0;
    width: auto;
}

.entry:not(.rev) .info.info-white .infoInr {
    margin-left: -120px;
}

/* Reverse layout: image on left, text on right */
.entry.rev .info.info-white .infoClip {
    left: 0;
    right: 120px;
    width: auto;
}

.entry.rev .info.info-white .infoInr {
    margin-right: -120px;
}
.entry .info .infoInr { position: relative; }
.entry .info .infoInr:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; overflow: hidden; }

/* ========== h3 (Title) ========== */
.entry .info h3 {
    position: relative;
    font-size: 42px;
    font-family: var(--font-serif);
    line-height: 42px;
    margin-bottom: 10px;
    min-height: 84px;
}
.entry .info h3 .inr {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
}
.entry .info h3 a { color: var(--color-text-primary); transition: color var(--transition-base); }
.entry .info h3 a:hover { color: var(--color-primary); }
.entry .info h3 .btCover {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* ========== Date ========== */
.entry .info .date {
    font-size: var(--font-size-xs);
    font-family: var(--font-sans);
    padding-bottom: 5px;
    font-style: normal;
    color: var(--color-text-tertiary);
}

/* ========== Description ========== */
.entry .info .desc {
    position: relative;
    font-size: var(--font-size-xs);
    padding-bottom: 10px;
    font-style: normal;
    color: var(--color-text-tertiary);
    letter-spacing: 0.5px;
    min-height: 20px;
}
.entry .info .desc .inr {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
}

/* ========== Links ========== */
.entry .info .links {
    font-size: var(--font-size-sm);
    font-style: normal;
}
.entry .info .links a { font-family: var(--font-sans); position: relative; }
.entry .info .links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}
.entry .info .links a:hover::after { width: 100%; }
.entry .info .links span.slash { font-style: normal; color: var(--color-text-tertiary); }

/* ========== Mark (+/-) ========== */
.entry .info .mark {
    position: absolute;
    left: -40px;
    top: 9px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-style: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: 65px;
    cursor: default;
    opacity: 0;
    transition: opacity var(--transition-base);
    color: var(--color-primary);
}
.entry .info .mark.mark-plus { font-size: 55px; }
.entry .info .mark.mark-minus { margin-top: -29px; font-size: 40px; visibility: hidden; }

/* ========== PicArea ========== */
.entry .picArea {
    position: relative;
    margin-left: 120px;
    overflow: hidden;
}

/* ========== Teaser ========== */
.entry .teaser { position: relative; }
.entry .teaser.hide { opacity: 0; visibility: hidden; }

/* ========== Pic ========== */
.pic {
    position: relative;
    background: var(--color-bg-tertiary);
    overflow: hidden;
    width: 875px;
    height: 600px;
    border-radius: var(--radius-md);
}
.pic img { opacity: 0; transition: opacity var(--transition-slow); display: block; width: 100%; height: 100%; object-fit: cover; }
.pic img.show { opacity: 1; }

/* Pic hover effect */
.pic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}
.pic:hover::after { opacity: 1; }

/* ========== Pagination ========== */
.pagination {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 30px 0 40px;
    font-size: 13px;
    letter-spacing: 1px;
    font-style: normal;
    position: relative;
}

/* 分页手绘装饰 - 已移除 */

.pagination a,
.pagination span {
    padding: 8px 16px;
    color: var(--color-text-tertiary);
    transition: all var(--transition-base);
    border-radius: var(--radius-sm);
    position: relative;
}

.pagination a:hover { 
    color: var(--color-primary); 
    background: var(--color-bg-secondary);
    transform: translateY(-2px);
}

.pagination .current { 
    color: var(--color-primary); 
    font-weight: 500;
    position: relative;
}

.pagination .current::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 3'%3E%3Cpath d='M0,1.5 Q25,0.5 50,1.5 T100,1.5' stroke='%238b7355' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
    background-size: 100px 3px;
}

/* ========== Post Single ========== */
.post-single {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-3xl) 20px var(--spacing-4xl);
}

.post-single h1 {
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 10px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-text-primary);
}

.post-single .post-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-bottom: 40px;
    font-style: normal;
    letter-spacing: 0.5px;
}
.post-single .post-meta .label { font-style: italic; color: var(--color-text-muted); }

.post-single .post-content { font-style: normal; }
.post-single .post-content p { margin-bottom: var(--spacing-lg); font-size: var(--font-size-md); line-height: 2; color: #333; }
.post-single .post-content h2,
.post-single .post-content h3 { margin: 50px 0 20px; font-weight: normal; letter-spacing: 1px; color: var(--color-text-primary); }
.post-single .post-content h2 { font-size: 26px; text-transform: uppercase; letter-spacing: 3px; }
.post-single .post-content h3 { font-size: 20px; }
.post-single .post-content blockquote {
    margin: 40px 0; padding: 20px 30px;
    border-left: 2px solid var(--color-primary);
    font-style: italic; color: var(--color-text-secondary); font-size: 16px;
    background: var(--color-bg-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.post-single .post-content ul,
.post-single .post-content ol { margin: 20px 0; padding-left: 30px; }
.post-single .post-content ul { list-style: disc; }
.post-single .post-content ol { list-style: decimal; }
.post-single .post-content li { margin-bottom: 10px; color: #333; }
.post-single .post-content img { max-width: 100%; height: auto; margin-bottom: 20px; display: block; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.post-single .post-content a { color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-dark); transition: all var(--transition-base); }
.post-single .post-content a:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ========== Page Single ========== */
.page-single {
    max-width: 650px;
    margin: 0 auto;
    padding: 30px 20px 80px;
    text-align: center;
}
.page-single h1 { font-size: 32px; font-weight: normal; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 12px; color: var(--color-text-primary); }
.page-single .page-content { text-align: left; font-style: normal; }
.page-single .page-content p { margin-bottom: var(--spacing-lg); font-size: var(--font-size-md); line-height: 2; color: #333; }

/* ========== Archive ========== */
.archive-page {
    max-width: 650px;
    margin: 0 auto;
    padding: 30px 20px 80px;
}
.archive-header { text-align: center; margin-bottom: 50px; }
.archive-title { font-size: 28px; font-weight: normal; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 10px; color: var(--color-text-primary); }
.archive-count { font-size: 13px; color: var(--color-text-tertiary); font-style: italic; }

.archive-year { font-size: 26px; font-style: italic; margin: 50px 0 18px; letter-spacing: 2px; color: var(--color-primary); }
.archive-item {
    display: flex; align-items: baseline; padding: 12px 0;
    border-bottom: 1px solid var(--color-border-light); gap: 20px;
    transition: background var(--transition-fast);
}
.archive-item:hover { background: var(--color-bg-secondary); padding-left: 10px; padding-right: 10px; margin: 0 -10px; border-radius: var(--radius-sm); }
.archive-item-date { font-size: 11px; color: var(--color-text-tertiary); flex-shrink: 0; min-width: 70px; font-style: italic; }
.archive-item-title { font-size: 15px; flex: 1; }
.archive-item-title a { color: var(--color-text-primary); transition: color var(--transition-base); }
.archive-item-title a:hover { color: var(--color-primary); }

/* Archive empty state */
.archive-empty {
    text-align: center;
    color: var(--color-text-tertiary);
    font-style: italic;
    padding: 40px 0;
}

/* ========== Comments ========== */
.comments { max-width: 650px; margin: 70px auto 0; padding: 0 20px; }
.comments-title { font-size: 22px; font-weight: normal; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 40px; text-align: center; color: var(--color-text-primary); }
.comment-item { padding: 22px 0; border-bottom: 1px solid var(--color-border-light); transition: background var(--transition-fast); }
.comment-item:hover { background: var(--color-bg-secondary); margin: 0 -15px; padding-left: 15px; padding-right: 15px; border-radius: var(--radius-md); }
.comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-name { font-size: 14px; font-weight: normal; letter-spacing: 0.5px; }
.comment-name a { color: var(--color-text-primary); transition: color var(--transition-base); }
.comment-name a:hover { color: var(--color-primary); }
.comment-date { font-size: 11px; color: var(--color-text-tertiary); margin-left: auto; font-style: italic; }
.comment-content { font-size: 14px; color: #666; line-height: 1.8; padding-left: 48px; }
.comment-reply a { font-size: 11px; color: var(--color-text-tertiary); font-style: italic; transition: color var(--transition-base); }
.comment-reply a:hover { color: var(--color-primary); }
.comment-children { margin-left: 48px; padding-left: 20px; border-left: 1px solid var(--color-border-light); }

.respond { margin-top: 50px; }
.respond h4 { font-size: 18px; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 30px; text-align: center; color: var(--color-text-primary); }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%; padding: 12px 15px;
    border: 1px solid var(--color-border-light); font-size: 14px;
    font-family: inherit; outline: none; background: var(--color-bg-primary);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1); }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 15px; }
.comment-form .form-submit { text-align: center; margin-top: 20px; }
.comment-form button {
    padding: 12px 40px; background: var(--color-text-primary); color: #fff;
    border: none; font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; cursor: pointer; font-family: inherit;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}
.comment-form button:hover { background: var(--color-primary); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.comment-form button:active { transform: translateY(0); }

/* Cancel reply link */
.cancel-comment-reply {
    text-align: center;
    margin-bottom: 20px;
}
.cancel-comment-reply a {
    font-size: 12px;
    color: var(--color-text-tertiary);
    font-style: italic;
}
.cancel-comment-reply a:hover {
    color: var(--color-primary);
}

/* Comment login info */
.comment-login-info {
    text-align: center;
    margin-bottom: 20px;
    color: var(--color-text-tertiary);
    font-style: italic;
    font-size: 13px;
}
.comment-login-info a {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
}
.comment-login-info a:hover {
    color: var(--color-primary);
}

/* Comments closed */
.comments-closed {
    padding: 40px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* ========== Footer ========== */
.footer {
    padding: 50px 0 30px;
    margin-top: 40px;
    border-top: none;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-tertiary);
    letter-spacing: 0.5px;
    font-style: normal;
    position: relative;
}

/* 手绘风格页脚分隔线 */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M10,10 Q50,3 100,10 T190,10' stroke='%23E8A87C' stroke-width='1.5' fill='none' stroke-linecap='round' opacity='0.6'/%3E%3Ccircle cx='100' cy='10' r='3' fill='%23FFB347' opacity='0.5'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.footer p { margin-bottom: 6px; }
.footer a { color: var(--color-text-secondary); transition: color var(--transition-base); }
.footer a:hover { color: var(--color-primary); }

/* ========== Back to Top Button ========== */
.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 44px;
    height: 44px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
    z-index: var(--z-fixed);
    box-shadow: var(--shadow-sm);
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.back-to-top:hover svg {
    stroke: white;
}
.back-to-top svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-text-secondary);
    transition: stroke var(--transition-base);
}

/* ========== About Page ========== */
.about-page { max-width: 900px; margin: 0 auto; padding: 60px 40px; }
.about-intro { display: flex; align-items: center; gap: 60px; margin-bottom: 100px; }
.about-intro-image { flex: 0 0 40%; max-width: 40%; }
.about-intro-image img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: transform var(--transition-slow), box-shadow var(--transition-slow); }
.about-intro-image img:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.about-intro-text { flex: 1; }
.about-title { font-size: 48px; font-weight: normal; margin-bottom: 10px; letter-spacing: 2px; color: var(--color-text-primary); }
.about-tagline { font-size: 18px; font-style: italic; color: var(--color-text-secondary); margin-bottom: 30px; }
.about-intro-content p { font-size: var(--font-size-md); line-height: 1.9; color: #333; margin-bottom: 15px; }

.about-story { display: flex; align-items: flex-start; gap: 40px; margin-bottom: 80px; }
.story-icon { flex: 0 0 80px; padding-top: 10px; transition: transform var(--transition-base); }
.about-story:hover .story-icon { transform: scale(1.1); }
.icon-img { width: 60px; height: 60px; display: block; mix-blend-mode: multiply; opacity: 0.6; transition: opacity var(--transition-base); }
.about-story:hover .icon-img { opacity: 1; }
.story-content { flex: 1; }
.story-content-left { text-align: right; }
.story-title { font-size: 28px; font-weight: normal; margin-bottom: 20px; letter-spacing: 1px; color: var(--color-text-primary); transition: color var(--transition-base); }
.about-story:hover .story-title { color: var(--color-primary); }
.story-content p { font-size: var(--font-size-md); line-height: 1.9; color: #333; margin-bottom: 12px; }

.about-ending { text-align: center; margin-top: 100px; padding-top: 60px; }
.ending-divider { width: 60px; height: 1px; background: var(--color-border-dark); margin: 0 auto 40px; transition: width var(--transition-base), background var(--transition-base); }
.about-ending:hover .ending-divider { width: 100px; background: var(--color-primary); }
.ending-text { font-size: 18px; font-style: italic; line-height: 2; color: var(--color-text-secondary); margin-bottom: 30px; }
.ending-signature { font-size: 16px; letter-spacing: 2px; color: var(--color-primary); }

@media (max-width: 900px) {
    .about-page { padding: 40px 30px; }
    .about-intro { flex-direction: column; gap: 40px; }
    .about-intro-image { flex: none; max-width: 100%; }
    .about-title { font-size: 36px; }
    .about-story { gap: 30px; }
    .story-icon { flex: 0 0 60px; }
    .icon-img { width: 50px; height: 50px; }
    .story-title { font-size: 24px; }
}
@media (max-width: 600px) {
    .about-page { padding: 30px 20px; }
    .about-title { font-size: 28px; }
    .about-story { flex-direction: column; gap: 20px; }
    .story-content-left { text-align: left; }
}

/* ========== Responsive ========== */
@media (max-width: 1100px) {
    .page { width: 100%; padding: 0 20px; box-sizing: border-box; }
    .siteHeader h2 { padding-left: 0; }
    .entry .info.fixed { left: 20px; margin-left: 0; }
    .entry.rev .info.fixed { right: 20px; margin-right: 0; left: auto; }
}

@media (max-width: 900px) {
    .siteHeader { padding: 40px 0 30px; }
    .siteHeader h2 { float: none; height: auto; line-height: 1.6; padding-left: 0; font-size: 16px; margin-bottom: 10px; }
    .siteHeader .line { display: none; }
    .siteHeader .rightBlock { float: none; padding-top: 0; }

    .entry { padding-bottom: 60px; }
    .entry .info { position: relative; margin-top: 0; width: 100%; left: auto; right: auto; text-align: center; margin-bottom: 20px; }
    .entry .picArea { margin-left: 0; margin-right: 0; }
    .entry.rev .info { left: auto; right: auto; text-align: center; }
    .entry.rev .picArea { margin-right: 0; }
    .entry .info h3 { font-size: 28px; line-height: 28px; }
    .entry .info .mark { display: none; }
    .entry .info.info-white { display: none; }
    .entry .info.fixed { position: relative; left: auto; margin-left: 0; }

    .pic { width: 100%; height: auto; aspect-ratio: 4/3; }
    .pic img { width: 100%; height: 100%; object-fit: cover; }

    .comment-form .form-row { grid-template-columns: 1fr; }
    
    /* Back to top on mobile */
    .back-to-top {
        right: 20px;
        bottom: 20px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 600px) {
    .siteHeader h2 { font-size: 13px; }
    .entry .info h3 { font-size: 22px; line-height: 22px; }
    .entry .info .date { font-size: 9px; }
    .entry .info .desc { font-size: 9px; }
    
    .post-single h1 { font-size: 28px; }
    .archive-title { font-size: 22px; }
    .comments-title { font-size: 18px; }
}

/* ========== 手绘风格装饰 ========== */

/* 手绘风格下划线 */
.hand-drawn-underline {
    position: relative;
    display: inline-block;
}

.hand-drawn-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0,5 Q25,2 50,5 T100,5' stroke='%23FFB347' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
    background-size: 100px 10px;
    opacity: 0.7;
}

/* 手绘风格边框 */
.hand-drawn-border {
    border: 2px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='2' y='2' width='96' height='96' fill='none' stroke='%23E8A87C' stroke-width='2' stroke-dasharray='5,3' rx='10'/%3E%3C/svg%3E") 10 stretch;
}

/* 手绘风格分隔线 */
.hand-drawn-divider {
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M0,10 Q50,5 100,10 T200,10' stroke='%23E8A87C' stroke-width='1.5' fill='none' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    margin: 30px 0;
}

/* ========== 活力动效增强 ========== */

/* 文章卡片悬浮效果增强 - 注意：不能使用 transform，会破坏子元素 fixed 定位 */
.entry:hover .teaser .pic {
    margin-top: -8px;
    transition: margin-top var(--transition-slow);
}

.entry .teaser .pic {
    transition: margin-top var(--transition-slow);
}

/* 图片微光效果 */
.pic::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
    z-index: 1;
}

.pic:hover::before {
    opacity: 1;
}

/* 图片悬浮缩放效果 */
.pic img {
    transition: transform 0.8s ease;
}

.pic:hover img {
    transform: scale(1.05);
}

/* 按钮手绘风格 */
.comment-form button {
    position: relative;
    overflow: hidden;
}

.comment-form button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.comment-form button:hover::before {
    left: 100%;
}

/* 星星装饰动画 */
.star-decoration {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0.6;
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

/* 浮动装饰元素 */
.floating-decoration {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

/* 导航链接手绘下划线 */
.siteHeader .rightBlock .nav a::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 3'%3E%3Cpath d='M0,1.5 Q25,0.5 50,1.5 T100,1.5' stroke='%238b7355' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
    background-size: 100px 3px;
    height: 3px;
    bottom: -3px;
}

/* ========== 手绘风格引用块 ========== */

.entryBodyInr blockquote,
.post-single .post-content blockquote {
    position: relative;
    border-left: none;
    padding: 25px 35px;
    background: linear-gradient(135deg, #fff9f0 0%, #fff 100%);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(255, 179, 71, 0.1);
}

.entryBodyInr blockquote::before,
.post-single .post-content blockquote::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 60px;
    font-family: Georgia, serif;
    color: rgba(255, 179, 71, 0.3);
    line-height: 1;
    font-style: normal;
}

/* ========== 响应式调整 ========== */