/* 博客换成首页的样子：米白方格纸、Inter Tight 大标题、墨黑描边的小贴纸按钮
   放在 blog-styles.css 和 article-styles.css 后面加载，只覆盖外观，不动结构 */

:root {
    --paper: #f3eee2;
    --grid: #e4dccb;
    --ink: #1f1d1a;
    --muted: #5f5850;
    --yellow: #f6c64a;
    --yellow-soft: #fbe7a6;
    --pink: #f2a9a0;
    --pink-soft: #f9d8d1;
    --sky: #a9d3e3;
    --cream: #fffaf0;
    --link: #c2513a;
    --radius: 14px;
    --font-display: 'Inter Tight', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
    --font-sans: 'Inter', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;

    /* 旧变量指向新配色，没覆盖到的地方也跟着变 */
    --primary-color: var(--ink);
    --secondary-color: var(--muted);
    --text-color: var(--ink);
    --light-text: var(--muted);
    --bg-color: var(--paper);
    --border-color: var(--grid);
    --hover-color: var(--cream);
    --link-color: var(--link);
    --link-hover: var(--ink);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #1d1b18;
        --grid: #2a2723;
        --ink: #f2ece0;
        --muted: #b3a999;
        --yellow-soft: #5a4a1c;
        --pink-soft: #4a2f2b;
        --cream: #26231f;
        --link: #f2a58f;
    }
}

body {
    font-family: var(--font-sans);
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 36px 36px;
}

/* 贴纸：描边 + 实心投影，悬停时往左上浮一点 */
.subscribe-btn,
.search-box,
.social-icons .social-link,
.share-button,
.tag,
.nav-next,
.lang-toggle,
.submit-btn,
.modal-content {
    border: 1.5px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}

.subscribe-btn,
.social-icons .social-link,
.share-button,
.tag,
.nav-next,
.lang-toggle,
.submit-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.subscribe-btn:hover,
.social-icons .social-link:hover,
.share-button:hover,
.tag:hover,
.nav-next:hover,
.lang-toggle:hover,
.submit-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
}

/* 顶部导航 */
.header {
    border-bottom: 1.5px solid var(--ink);
    margin-bottom: 48px;
}

/* 回首页的链接：和首页 "Read my blog →" 呼应，常亮的黄色荧光笔，箭头朝左，悬停时往左跑 */
.site-title {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
    background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 90%, transparent 90%);
}

.site-title::before {
    content: '←';
    display: inline-block;
    transition: transform 0.2s ease;
}

.site-title:hover {
    color: var(--ink);
}

.site-title:hover::before,
.site-title:focus-visible::before {
    transform: translateX(-5px);
}

/* 中英切换放到页面左上角，和首页一样 */
body {
    position: relative;
}

.nav-links [data-lang-toggle] {
    position: absolute;
    top: 20px;
    left: 32px;
    z-index: 3;
}

@media (max-width: 800px) {
    .nav-links [data-lang-toggle] {
        top: 12px;
        left: 16px;
    }

    .header {
        padding-top: 64px;
    }
}

.nav-link {
    color: var(--muted);
    font-weight: 500;
}

.nav-link:hover {
    color: var(--ink);
    background: none;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.lang-toggle {
    padding: 5px 14px;
    background: var(--cream);
    color: var(--ink);
    opacity: 1;
}

.lang-toggle:hover {
    background: var(--yellow-soft);
}

/* 博客首页的开头 */
.hero {
    padding-bottom: 8px;
}

.greeting {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(44px, 7vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--ink);
}

.welcome {
    font-size: 17px;
    color: var(--muted);
}

.subscribe-btn {
    border-radius: 999px;
    background: var(--yellow-soft);
    color: var(--ink);
}

.subscribe-btn:hover {
    background: var(--yellow);
    color: #1f1d1a;
}

.rss-link {
    color: var(--muted);
}

.rss-link:hover {
    color: var(--link);
}

.social-icons {
    gap: 12px;
}

.social-icons .social-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--ink);
}

.social-icons .social-link svg {
    width: 18px;
    height: 18px;
}

.social-icons .social-link[title="GitHub"]:hover { background: var(--yellow); color: #1f1d1a; }
.social-icons .social-link[title="Instagram"]:hover { background: var(--pink); color: #1f1d1a; }
.social-icons .social-link[title="LinkedIn"]:hover { background: var(--sky); color: #1f1d1a; }

/* 搜索框 */
.search-box {
    border-radius: 999px;
    background: var(--cream);
}

.search-box:focus-within {
    border-color: var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}

.search-input {
    color: var(--ink);
    background: transparent;
}

.search-input::placeholder {
    color: var(--muted);
}

.search-btn {
    background: var(--yellow);
    color: #1f1d1a;
}

.search-btn:hover {
    background: var(--yellow-soft);
}

.search-results {
    background: var(--cream);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 2px 2px 0 var(--ink);
}

.search-result-item:hover {
    background: var(--yellow-soft);
}

.search-highlight {
    background: var(--yellow);
    color: #1f1d1a;
}

/* 文章列表：每篇一张奶油色卡片 */
.posts {
    display: grid;
    gap: 20px;
}

.post-item,
.post-item:last-child {
    padding: 22px 24px;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    background: var(--cream);
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-item:hover {
    background: var(--cream);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink);
}

.post-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.post-title a {
    color: var(--ink);
}

.post-title a:hover {
    color: var(--ink);
    background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 90%, transparent 90%);
}

.post-summary,
.post-meta {
    color: var(--muted);
}

.post-lang-badge {
    border: 0;
    background: var(--pink-soft);
    color: var(--muted);
}

/* 文章页 */
.article-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--ink);
}

/* 正文里的标题也收小一号，层级靠字号拉开就够了 */
.article-content h1 { font-size: 26px; }
.article-content h2 { font-size: 22px; }
.article-content h3 { font-size: 19px; }
.article-content h4 { font-size: 17px; }

.post-title a {
    font-size: 21px;
}

.article-meta {
    color: var(--muted);
}

.tag {
    border-radius: 999px;
    background: var(--yellow-soft);
    color: var(--ink);
}

.tag:hover {
    background: var(--yellow);
    color: #1f1d1a;
}

.translation-link,
.ai-translation-note {
    color: var(--muted);
}

.translation-link:hover {
    color: var(--link);
}

.article-content {
    color: var(--ink);
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.article-content h2 {
    /* table：宽度跟着文字走（荧光笔只盖住字），但仍然独占一行 */
    display: table;
    background: linear-gradient(transparent 62%, var(--yellow-soft) 62%, var(--yellow-soft) 92%, transparent 92%);
}

.article-content a {
    color: var(--link);
    text-decoration-color: var(--link);
}

.article-content a:hover {
    color: var(--ink);
    background: var(--yellow-soft);
}

.article-content blockquote {
    border-left: 4px solid var(--yellow);
    background: var(--cream);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--muted);
}

.article-content pre {
    background: var(--cream);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 2px 2px 0 var(--ink);
}

.article-content code {
    background: var(--yellow-soft);
    color: var(--ink);
}

.article-content pre code {
    background: none;
}

.article-content img {
    border-radius: var(--radius);
}

/* 图片下面紧跟一行斜体，就当作图注：贴近图片、小一号、居中 */
.article-content p:has(> img:only-child) {
    margin-bottom: 0;
}

.article-content p:has(> img:only-child) img {
    margin-bottom: 8px;
}

.article-content p:has(> img:only-child) + p:has(> em:only-child) {
    margin-top: 0;
    font-size: 14px;
    text-align: center;
    color: var(--muted);
}

.article-content hr {
    border-color: var(--ink);
}

.article-footer {
    border-top: 1.5px solid var(--ink);
}

.nav-prev {
    color: var(--muted);
}

.nav-prev:hover {
    color: var(--ink);
}

.nav-next {
    border-radius: 999px;
    background: var(--yellow-soft);
    color: var(--ink);
}

.nav-next:hover {
    background: var(--yellow);
    color: #1f1d1a;
}

.share-button {
    border-radius: 999px;
    background: var(--cream);
    color: var(--ink);
}

.share-button:hover {
    background: var(--pink);
    color: #1f1d1a;
}

/* 订阅弹窗 */
.modal-content {
    background: var(--cream);
    color: var(--ink);
    border-radius: var(--radius);
}

.modal-header h3 {
    font-family: var(--font-display);
    color: var(--ink);
}

.input-group input {
    border: 1.5px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
}

.submit-btn {
    background: var(--yellow);
    color: #1f1d1a;
}

::selection {
    background: var(--yellow);
    color: #1f1d1a;
}

@media (prefers-reduced-motion: reduce) {
    .post-item,
    .post-item:hover {
        transition: none;
        transform: none;
    }
}