/* ==========================================================
   内页：/join/ 列表、岗位详情、404
   ========================================================== */

.page { min-height: 100vh; padding: calc(var(--nav-h) + clamp(48px, 8vh, 96px)) var(--pad) 96px; }
.page-inner { max-width: 880px; margin: 0 auto; }
.page-title { margin-top: 16px; font-size: clamp(40px, 7vw, 96px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.page-title small { display: block; margin-top: 10px; font-family: var(--f-mono); font-size: 0.2em; font-weight: 500; letter-spacing: 0.24em; color: var(--fg-3); }
.page-tease { margin-top: 18px; color: var(--fg-3); }

.crumb { display: inline-flex; gap: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--fg-3); }
.crumb a { transition: color 0.3s; }
.crumb a:hover { color: var(--blue); }

/* ---------- /join/ 列表 ---------- */
.job-list { margin-top: 56px; box-shadow: inset 0 1px 0 var(--line); }
.job-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 28px 12px;
    box-shadow: inset 0 -1px 0 var(--line);
    transition: background-color 0.3s, padding 0.5s var(--ease-jelly), color 0.3s;
}
.job-row:hover { padding-left: 28px; background: var(--blue); color: #fff; border-radius: 999px; box-shadow: none; }
.job-no { font-family: var(--f-mono); font-size: 13px; color: var(--fg-3); }
.job-row:hover .job-no { color: rgba(255, 255, 255, 0.7); }
.job-name { font-size: clamp(24px, 3.4vw, 40px); font-weight: 800; line-height: 1.2; }
.job-name small { margin-left: 14px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; opacity: 0.55; }
.job-arrow { font-size: 24px; transition: transform 0.5s var(--ease-jelly); }
.job-row:hover .job-arrow { transform: translateX(-12px); }

/* ---------- 岗位详情（内容照搬原 join_us） ---------- */
.job-content { margin-top: 48px; font-size: 17px; line-height: 1.9; color: var(--fg-2); }
.job-content > p:first-child { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.5; color: var(--fg); }
.job-content h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 48px 0 16px;
    font-size: 14px;
    font-family: var(--f-mono);
    letter-spacing: 0.1em;
    color: var(--fg);
}
.job-content h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.job-content ul { display: grid; gap: 4px; }
.job-content li { position: relative; padding: 10px 0 10px 24px; box-shadow: inset 0 -1px 0 var(--line); }
.job-content li::before { content: "—"; position: absolute; left: 0; color: var(--fg-3); }
.job-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.job-content p + p { margin-top: 8px; }
.job-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 56px; }

/* ---------- 404 ---------- */
.nf { display: grid; place-items: center; text-align: center; }
.nf-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.06em;
    font-family: var(--f-mono);
    font-size: clamp(120px, 28vw, 340px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}
.nf-o { width: 0.78em; height: 0.78em; }
.nf-o .logo { width: 100%; height: 100%; }
.nf-o .face-hand { animation: salute 0.6s ease-in-out infinite; }
.nf-title { margin-top: 24px; font-size: clamp(22px, 3vw, 32px); font-weight: 800; }
.nf-tease { margin-top: 12px; color: var(--fg-3); }
.nf .job-actions { justify-content: center; margin-top: 40px; }

@media (max-width: 860px) {
    .job-row { grid-template-columns: 40px 1fr auto; padding: 22px 8px; }
    .job-name small { display: block; margin: 4px 0 0; }
}