/* ===== 首页与全站轻量定制样式（sopaa.cn） ===== */

:root {
    --sp-accent: #e8590c;
    --sp-accent-deep: #c94b06;
    --sp-line: rgba(127, 127, 127, .18);
    --sp-line-strong: rgba(127, 127, 127, .32);
    --sp-soft: rgba(127, 127, 127, .06);
}

/* 固定导航栏下留出安全间距，避免标题被压在导航下 */
.page.single,
.page.archive {
    padding-top: 6.2rem;
}

/* 宽屏阅读区：正文 + 右侧目录作为一个整体居中，目录紧贴正文（2rem 间隙），
   两边留白均等，不再出现"左边一大片空白 + 目录挤在屏幕边缘" */
@media screen and (min-width: 1101px) {
    /* 全站宽度基准：与首页 .home-page 完全同一条公式（min(1320px, 88%)） */
    .page.single,
    .page.archive {
        width: min(1320px, 88%);
        max-width: 1320px;
    }

    /* 有右侧目录的文章页：正文 + 间隙 + 目录 = 首页内容宽度，整组居中；
       没有目录的页面（/tools/、/about/、列表页等）保持普通居中 */
    body:has(#toc-auto) .page.single {
        width: calc(min(1320px, 88%) - 16rem);
        margin-left: calc((100% - min(1320px, 88%)) / 2);
        margin-right: 0;
    }

    #toc-auto {
        left: auto;
        width: 14rem;
        /* 目录的百分比基准是视口宽，正文的百分比基准是容器内容宽（视口 - 2rem），
           这里显式用 (100% - 2rem) * 88% 复算同一个基准，保证右边界与首页内容区右边界重合 */
        right: calc((100% - min(1320px, (100% - 2rem) * 0.88)) / 2);
    }
}

/* 列表页 / 独立页标题左对齐，与正文简介保持一致 */
.page.archive .single-title,
.page.single.special .single-title,
.page.single.special .single-subtitle {
    text-align: left;
}

/* 正文表格：窄屏与中文环境下避免挤成竖排 */
.single .content table {
    width: 100%;
    table-layout: auto;
}

.single .content table th,
.single .content table td {
    min-width: 4.6rem;
    padding: .55rem .7rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.home-page {
    width: min(1320px, 88%);
    max-width: 1320px;
    margin: 0 auto;
    padding: 3.6rem 0 3rem;
}

.home-hero {
    padding: .8rem 0 2.6rem;
    border-bottom: 1px solid var(--sp-line);
}

.home-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    opacity: .68;
    margin: 0 0 1rem;
}

.home-hero h1 {
    font-size: clamp(1.55rem, 3.4vw, 2.3rem);
    line-height: 1.34;
    margin: 0 0 1.1rem;
    letter-spacing: -.01em;
}

.home-lead {
    max-width: 46rem;
    font-size: 1rem;
    line-height: 1.9;
    opacity: .86;
    margin: 0;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.5rem;
}

.home-btn {
    display: inline-block;
    padding: .7rem 1.3rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: .94rem;
    text-decoration: none !important;
    transition: background-color .2s, border-color .2s, transform .2s;
}

.home-btn-primary {
    background: var(--sp-accent);
    color: #fff !important;
}

.home-btn-primary:hover {
    background: var(--sp-accent-deep);
    transform: translateY(-1px);
}

.home-btn-ghost {
    border-color: var(--sp-line-strong);
    color: inherit;
}

.home-btn-ghost:hover {
    border-color: var(--sp-accent);
    color: var(--sp-accent) !important;
}

.home-note {
    margin: 1.05rem 0 0;
    font-size: .8rem;
    opacity: .6;
}

.home-section {
    margin-top: 2.8rem;
}

.home-h2 {
    position: relative;
    font-size: 1.12rem;
    line-height: 1.5;
    margin: 0 0 1.2rem;
    padding-left: .7rem;
    border-left: 3px solid var(--sp-accent);
}

.home-sub {
    font-size: .88rem;
    opacity: .76;
    line-height: 1.8;
    margin: -.4rem 0 1.2rem;
}

.home-sub a,
.home-more-link a {
    color: var(--sp-accent);
}

.home-paths,
.home-picks {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-featured {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (max-width: 1000px) {
    .home-paths,
    .home-picks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-featured {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 640px) {
    .home-paths,
    .home-picks,
    .home-featured {
        grid-template-columns: minmax(0, 1fr);
    }
}

.home-card {
    display: block;
    padding: 1.2rem 1.25rem;
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    background: var(--sp-soft);
    color: inherit !important;
    text-decoration: none !important;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

.home-card:hover {
    border-color: var(--sp-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.home-path .home-step {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--sp-accent);
    margin-bottom: .5rem;
}

.home-card h3 {
    font-size: 1rem;
    margin: 0 0 .5rem;
    line-height: 1.5;
}

.home-card p {
    font-size: .88rem;
    line-height: 1.78;
    opacity: .8;
    margin: 0 0 .6rem;
}

.home-more {
    font-size: .84rem;
    color: var(--sp-accent);
    font-weight: 600;
    margin-top: .7rem;
    display: inline-block;
}

.home-feature {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home-feature-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.home-feature-body .home-more {
    margin-top: auto;
}

.home-feature-img {
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: var(--sp-soft);
}

.home-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

.home-feature-body {
    padding: 1rem 1.2rem 1.2rem;
}

.home-pick-tag {
    font-size: .74rem !important;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--sp-accent);
    margin: -.2rem 0 .6rem !important;
    opacity: 1 !important;
}

.home-latest {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-latest li {
    border-bottom: 1px solid var(--sp-line);
}

.home-latest a {
    display: grid;
    grid-template-columns: 6.2rem 1fr;
    gap: .2rem 1rem;
    padding: .9rem 0;
    color: inherit !important;
    text-decoration: none !important;
}

.home-latest time {
    grid-row: span 2;
    font-size: .78rem;
    opacity: .55;
    font-variant-numeric: tabular-nums;
}

.home-latest-title {
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.6;
}

.home-latest-desc {
    font-size: .84rem;
    opacity: .66;
    line-height: 1.6;
}

.home-latest a:hover .home-latest-title {
    color: var(--sp-accent);
}

.home-more-link {
    margin: 1.2rem 0 0;
    font-size: .88rem;
}

.home-subscribe {
    margin-top: 3rem;
    padding: 1.8rem 1.6rem;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    background: var(--sp-soft);
    text-align: left;
}

.home-subscribe p {
    font-size: .9rem;
    line-height: 1.8;
    opacity: .8;
    margin: 0;
}

.home-article-cta {
    margin: 2.2rem 0 .5rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--sp-line);
    border-left: 3px solid var(--sp-accent);
    border-radius: 8px;
    background: var(--sp-soft);
}

.home-article-cta p {
    margin: 0 0 .55rem;
    font-size: .92rem;
    line-height: 1.8;
}

.home-article-cta a {
    color: var(--sp-accent);
    font-weight: 600;
}

.home-related {
    margin: 1.8rem 0 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--sp-line);
}

.home-related-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .8rem;
    padding-left: .6rem;
    border-left: 3px solid var(--sp-accent);
    line-height: 1.2;
}

.home-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-related li {
    padding: .5rem 0;
    border-bottom: 1px dashed var(--sp-line);
    font-size: .92rem;
    line-height: 1.7;
}

.home-related li:last-child {
    border-bottom: none;
}

.home-related a {
    color: var(--sp-accent);
    font-weight: 600;
}

.home-related span {
    display: block;
    margin-top: .15rem;
    opacity: .62;
    font-size: .84rem;
}

@media (max-width: 640px) {
    .home-hero {
        padding-top: 1.6rem;
    }

    .home-latest a {
        grid-template-columns: 1fr;
    }

    .home-latest time {
        grid-row: auto;
    }

    .home-subscribe {
        padding: 1.3rem 1.2rem;
    }
}