/* =========================================================
 * 首页（工作室版）—— 参考 linear.app 的浅色排版
 * 只在首页输出，不污染列表页/文章页
 * ========================================================= */

.home {
    --hm-max: 1120px;
    --hm-line: #ececec;
    --hm-line-strong: #d8d8d8;
    --hm-muted: #6b6b6b;
    --hm-faint: #9a9a9a;
    --hm-soft: #f7f7f8;

    /* 全站扁平化：首页同样不用圆角 */
    --hm-radius: 0;
}

.hm-wrap {
    max-width: var(--hm-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------------- Hero ---------------- */
.hm-hero {
    padding: 104px 0 84px;
    text-align: center;
    background: #f6f6f7;
}

.hm-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hm-faint);
}

.hm-title {
    margin: 22px 0 0;
    font-size: clamp(38px, 6vw, 66px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: var(--color-text, #111);
}

.hm-lead {
    max-width: 640px;
    margin: 24px auto 0;
    font-size: 17px;
    line-height: 1.8;
    color: var(--hm-muted);
}

.hm-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    font-size: 15px;
    line-height: 1;
    color: #111;
    background: var(--grad-secondary);
    border: 1px solid var(--hm-line-strong);
    /* 与站内按钮共用同一个圆角变量，避免首页/内页样式分裂 */
    border-radius: var(--btn-radius, 0);
    text-decoration: none;
    transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s), transform 0.2s;
}

.hm-btn:hover {
    background-image: var(--grad-secondary-hover);
    border-color: #111;
}

.hm-btn-primary {
    color: #fff;
    background: var(--grad-primary);
    border-color: #000;
}

.hm-btn-primary:hover {
    background-image: var(--grad-primary-hover);
    border-color: #000;
}

/* ---------------- 技术栈 ---------------- */
.hm-stack {
    padding: 8px 0 0;
}

.hm-stack-label {
    margin: 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hm-faint);
}

.hm-stack-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: #4a4a4a;
}

/* ---------------- 区块通用 ---------------- */
.hm-sec {
    padding: 88px 0;
    border-top: 1px solid #f3f3f4;
}

.hm-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.hm-sec-title {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.hm-sec-desc {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--hm-muted);
}

.hm-more {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--color-text, #111);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.hm-more:hover {
    border-bottom-color: #111;
}

/* ---------------- 作品卡片 ---------------- */
.hm-work,
.hm-topics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hm-card {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 20px;
    color: inherit;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s;
}

.hm-card:hover {
    border-color: var(--hm-line-strong);
    transform: translateY(-2px);
}

/* 没有截图素材时用「浅灰块 + 项目首字」，比占位图干净 */
.hm-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #A9A9A9;
    background: #f4f4f5;
    border-radius: 6px;
}

.hm-card-name {
    margin: 16px 0 0;
    font-size: 17px;
    font-weight: 600;
}

.hm-card-desc {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--hm-muted);
}

.hm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.hm-tags li {
    padding: 3px 8px;
    font-size: 11px;
    color: #555;
    background: var(--hm-soft);
    border-radius: var(--btn-radius, 8px);
}

/* ---------------- 专题（按标签归集） ---------------- */
.hm-topic {
    justify-content: flex-start;
    padding: 22px 20px;
}

.hm-topic h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hm-topic-count {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--hm-muted);
}

.hm-topic-arrow {
    margin-top: 18px;
    font-size: 13px;
    color: var(--hm-faint);
    transition: color 0.2s;
}

.hm-card:hover .hm-topic-arrow {
    color: #111;
}

/* ---------------- 最新文章 ---------------- */
.hm-posts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-post {
    display: grid;
    grid-template-columns: 104px 1fr auto;
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f3f4;
}

.hm-post:first-child {
    border-top: 1px solid #f3f3f4;
}

.hm-post time {
    font-size: 13px;
    color: var(--hm-faint);
}

.hm-post-title {
    font-size: 16px;
    color: var(--color-text, #111);
    text-decoration: none;
}

.hm-post-title:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hm-post-cat {
    font-size: 12px;
    color: #8a8a8a;
}

/* ---------------- 联系 ---------------- */
.hm-contact {
    padding: 104px 0 120px;
    text-align: center;
    border-top: 1px solid #f3f3f4;
}

.hm-contact h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.hm-contact p {
    margin: 14px 0 30px;
    font-size: 15px;
    color: var(--hm-muted);
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px) {
    .hm-work,
    .hm-topics {
        grid-template-columns: repeat(2, 1fr);
    }

    .hm-hero {
        padding: 72px 0 64px;
    }

    .hm-sec {
        padding: 64px 0;
    }
}

@media (max-width: 640px) {
    .hm-wrap {
        padding: 0 18px;
    }

    .hm-work,
    .hm-topics {
        grid-template-columns: 1fr;
    }

    .hm-title {
        font-size: 34px;
    }

    .hm-lead {
        font-size: 16px;
    }

    .hm-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hm-sec-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .hm-post {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .hm-post-cat {
        display: none;
    }

    .hm-contact {
        padding: 64px 0 80px;
    }
}