/* ============================================================
   home.css —— 首页专用
   版式逻辑：先读（品牌 + 一句介绍）→ 看（摄影）→ 作品 → 关于 → 联系
   没有全屏遮罩、没有阻塞脚本：所有内容在 HTML 里就已经可读。
   ============================================================ */

.home-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    /* 结构：纯黑底 → 内容 → 固定高度的渐隐带 → 纯白收尾 → 摄影带
       高度完全由内容 + 两个 padding 决定，不再用 vh 撑高，
       所以按钮永远落在纯黑上，渐隐永远在按钮下方完整走完。 */
    padding-block: clamp(2.5rem, 4.5vh, 3.25rem)
        calc(var(--cover-fade-h) + var(--cover-white-h));
    color: var(--cover-ink);
    background-color: var(--cover-start);
    /* 渐变层 = 渐隐带 + 白色收尾区，整体贴住封面底部。
       色标用**像素**：前 8% 保持纯黑，到 --cover-fade-h 处变成白，之后一直是白。
       这样无论窗口多高多窄，渐隐长度与白色宽度都恒定。 */
    background-image: linear-gradient(180deg,
        var(--cover-start) 0,
        var(--cover-start) calc(var(--cover-fade-h) * 0.08),
        var(--cover-fade-end) var(--cover-fade-h));
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% calc(var(--cover-fade-h) + var(--cover-white-h));
}

.home-hero-inner {
    width: 100%;
    /* 文字块与渐隐带之间留一点纯黑呼吸位，按钮不会贴到渐变边缘 */
    padding-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

.home-hero .display {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-display);
    line-height: .92;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--cover-ink);
    text-wrap: balance;
}

.home-hero .lede {
    margin-top: clamp(1rem, 2.6vh, 1.5rem);
    max-width: 38ch;
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--cover-ink-2);
    text-wrap: pretty;
}

.home-hero .where {
    margin-top: clamp(.85rem, 2vh, 1.25rem);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    color: var(--cover-ink-muted);
}

.home-hero .where li {
    display: flex;
    align-items: center;
    list-style: none;
}

.home-hero .actions {
    margin-top: clamp(1.25rem, 3.2vh, 1.75rem);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* 封面上的次级按钮：深底必须反转成浅边框 + 浅字 */
.home-hero .btn--ghost {
    color: var(--cover-ink);
    border-color: rgba(251, 250, 247, .34);
    background: rgba(251, 250, 247, .04);
}

.home-hero .btn--ghost:hover {
    background: rgba(251, 250, 247, .12);
    border-color: rgba(251, 250, 247, .70);
    color: #fff;
}

/* 一次编排好的入场：只作用于首屏文字，且从"几乎可见"的状态开始 */
@media (prefers-reduced-motion: no-preference) {
    .home-hero-inner > * {
        animation: hero-rise 720ms var(--ease-out) both;
    }
    .home-hero-inner > :nth-child(2) { animation-delay: 60ms; }
    .home-hero-inner > :nth-child(3) { animation-delay: 110ms; }
    .home-hero-inner > :nth-child(4) { animation-delay: 160ms; }

    @keyframes hero-rise {
        from { opacity: .001; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
}

@media (max-width: 34rem) {
    /* 窄屏：渐隐带略短一点，避免手机上一屏里白色过多 */
    .home-hero {
        --cover-fade-h: clamp(120px, 18vh, 200px);
        --cover-white-h: clamp(52px, calc(6vh + 12px), 84px);
        padding-block: var(--space-5) calc(var(--cover-fade-h) + var(--cover-white-h));
    }
    .home-hero .lede { max-width: none; }
}

/* 320–344 这类极窄屏：一行中文只能放十来个字，文字块特别高，
   单独把黑区拉到 76%，保证按钮仍在深色上。 */
@media (max-width: 21.5rem) {
    /* 320 这类极窄屏：文字更高，给渐隐带留足空间，按钮仍在纯黑上 */
    .home-hero {
        --cover-fade-h: clamp(110px, 17vh, 180px);
    }
}


/* ---------- 摄影带 ----------
   全景照片是首页的视觉锚点：桌面保留 2.92:1 的原始构图，
   窄屏裁成 4:3 的竖情绪切片，不把山体裁掉。 */
.photo-band {
    margin: 0;
    position: relative;
    /* 照片上方的纯白区已经在 .home-hero 的 --cover-white-h 里，这里不再重复加高 */
    padding-top: 0;
    background: var(--bg);
}

.photo-band::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: #fff;
    z-index: 1;
    pointer-events: none;
}

.photo-band img {
    width: 100%;
    aspect-ratio: 13004 / 4456;
    object-fit: cover;
    object-position: 50% 46%;
}

.photo-band figcaption {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-3) var(--gutter) 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
}

@media (max-width: 48rem) {
    .photo-band img {
        aspect-ratio: 4 / 3;
        object-position: 52% 42%;
    }
}

/* ---------- 通用区块头 ---------- */
.section {
    padding-block: clamp(var(--space-6), 7vh, var(--space-8)) 0;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
}

.section-head h2 {
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -.01em;
}

.section-head .more {
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.section-head .more:hover { color: var(--accent-ink); }

/* ---------- 作品列表（不是等大卡片阵列：一行一个作品，首项加重） ---------- */
.work-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.work-item {
    border-bottom: 1px solid var(--line);
}

.work-item > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-2) var(--space-6);
    padding-block: var(--space-5);
    color: inherit;
    text-decoration: none;
}

.work-item .title {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -.01em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.work-item .desc {
    grid-column: 1 / -1;
    max-width: var(--measure);
    color: var(--ink-2);
    font-size: var(--text-md);
}

.work-item .year {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.work-item .arrow {
    display: inline-block;
    transition: transform var(--duration-2) var(--ease-out);
    color: var(--accent-ink);
}

.work-item > a:hover .arrow { transform: translateX(4px); }
.work-item > a:hover .title { color: var(--accent-ink); }

.tag {
    display: inline-flex;
    align-items: center;
    height: 1.6rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--ink-muted);
    white-space: nowrap;
}

.tag--progress {
    border-color: var(--accent-ink);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    color: var(--accent-ink);
    background: var(--accent-wash);
}

/* ---------- 首页"关于"两栏 ---------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--space-6) var(--space-8);
    padding-block: var(--space-6);
    align-items: start;
}

.split h2 {
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -.01em;
}

.split .body { max-width: var(--measure); }

.split .body p + p { margin-top: var(--space-4); }

.split .body p { color: var(--ink-2); }

.split .body .link-row {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (max-width: 56rem) {
    .split { grid-template-columns: minmax(0, 1fr); }
}

/* 窄屏：作品条目改为单列，标题 / 年份 / 说明依次排下来 */
@media (max-width: 34rem) {
    .work-item > a {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
        padding-block: var(--space-4);
    }
    .work-item .title { font-size: var(--text-md); order: 1; }
    .work-item .year { order: 2; }
    .work-item .desc { grid-column: 1; margin-top: var(--space-2); font-size: var(--text-sm); order: 3; }
    .section-head { padding-bottom: var(--space-3); }
    .contact-strip { padding-block: var(--space-6); }
    .contact-strip .mail { font-size: var(--text-lg); }
}

/* ---------- 联系块 ---------- */
.contact-strip {
    margin-top: clamp(var(--space-7), 9vh, var(--space-9));
    padding-block: var(--space-7);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.contact-strip .mail {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
}

.contact-strip .mail:hover {
    color: var(--accent-ink);
    border-color: var(--accent);
}

.contact-strip .aside {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    max-width: 30ch;
}