/* ==========================================================================
   Fansite Design System
   --------------------------------------------------------------------------
   令牌（CSS 变量）由后端 DesignSystem::pickForHost() 生成，注入到
   <style> 标签中；本文件只定义结构 + 装饰，颜色/字体/圆角/密度全部通过
   var(--xxx) 取自令牌。任意维度组合都不会破坏视觉。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font: var(--body-size, 16px)/1.7 var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- 基础 typography ---------- */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--h-weight);
    line-height: var(--h-lh);
    letter-spacing: var(--h-ls);
    color: var(--text);
    margin: 0;
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }

.eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 12px;
    letter-spacing: var(--eyebrow-ls);
    text-transform: var(--eyebrow-tt);
    color: var(--accent);
    font-weight: 700;
}

.muted { color: var(--text-soft); }

/* ---------- 容器 ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: var(--wrap-pad); }

/* ---------- 顶部导航（多个 archetype 共用） ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px;
    padding: 18px max(var(--wrap-pad), calc((100vw - 1200px) / 2));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 5;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.brand {
    font-family: var(--font-heading);
    font-size: 20px; font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    display: inline-flex; align-items: center; gap: 10px;
}
.brand::before {
    content: ''; width: 22px; height: 22px;
    background: var(--accent); border-radius: var(--radius-sm);
}
.topbar nav { display: flex; gap: 6px; flex-wrap: wrap; }
.topbar nav a {
    padding: 8px 12px; border-radius: var(--radius-sm);
    color: var(--text-soft); font-size: 14px;
    transition: background .15s, color .15s;
}
.topbar nav a:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- CTA 按钮 ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--radius);
    background: var(--accent); color: var(--on-accent);
    font-weight: 700; font-size: 14px;
    border: 1px solid var(--accent);
    transition: transform .15s, box-shadow .15s, background .15s;
    cursor: pointer;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgb(var(--shadow-rgb)); }
.btn-ghost {
    background: transparent; color: var(--text);
    border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   Hero 形态（5 种）
   ========================================================================== */
.hero {
    position: relative;
    padding: var(--hero-pad);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}
.hero h1 { margin-bottom: 16px; }
.hero p.lead {
    font-size: 17px; color: var(--text-soft);
    max-width: 720px; margin: 0 0 24px;
}
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .eyebrow { display: inline-block; margin-bottom: 14px; }

/* hero-plain 已经是默认 */

.hero-gradient .hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-soft) 60%, var(--surface)) 0%,
        var(--surface) 60%,
        color-mix(in srgb, var(--accent-soft) 30%, var(--surface)) 100%);
}

.hero-decorated .hero::before {
    content: ''; position: absolute; top: -80px; right: -80px;
    width: 280px; height: 280px;
    background: var(--accent); opacity: .12;
    border-radius: 50%;
    filter: blur(8px);
}
.hero-decorated .hero::after {
    content: ''; position: absolute; bottom: -60px; left: 30%;
    width: 180px; height: 180px;
    background: var(--accent-soft);
    border-radius: 50%;
    opacity: .7;
    filter: blur(4px);
}

.hero-bordered .hero {
    border: none;
    background: var(--surface);
    box-shadow:
        inset 0 0 0 1px var(--border),
        inset 6px 0 0 0 var(--accent);
    padding-left: calc(var(--hero-pad) + 12px);
}

.hero-inverted .hero {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}
.hero-inverted .hero h1 { color: var(--bg); }
.hero-inverted .hero p.lead { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.hero-inverted .hero .eyebrow { color: var(--accent-soft); }
.hero-inverted .hero .btn-ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); }
.hero-inverted .hero .btn-ghost:hover { color: var(--bg); border-color: var(--bg); }

/* ==========================================================================
   卡片样式（6 种）
   ========================================================================== */
.card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--card-pad);
    transition: transform .18s, box-shadow .18s, border-color .18s;
    position: relative;
    overflow: hidden;
}
.card h2 { font-size: var(--h2-size); margin-bottom: 8px; }
.card p { color: var(--text-soft); margin: 0; }
.card a { color: inherit; }
.card:hover { transform: translateY(-2px); }

.card-flat .card { border: 1px solid transparent; background: var(--surface-alt); }
.card-flat .card:hover { background: var(--surface); border-color: var(--border); }

.card-outlined .card { border: 1px solid var(--border); }
.card-outlined .card:hover { border-color: var(--accent); }

.card-shadow .card { border: 1px solid var(--border); box-shadow: 0 4px 12px rgb(var(--shadow-rgb)); }
.card-shadow .card:hover { box-shadow: 0 14px 32px rgb(var(--shadow-rgb)); }

.card-leftbar .card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    padding-left: calc(var(--card-pad) + 6px);
}

.card-topbar .card {
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
}

.card-fill .card {
    background: var(--accent-soft);
    border: 1px solid transparent;
}
.card-fill .card:hover { background: color-mix(in srgb, var(--accent-soft) 75%, var(--accent)); }

/* ==========================================================================
   装饰背景（5 种）— 仅作用在 body
   ========================================================================== */
.decor-dots body, body.decor-dots {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 12%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
}
body.decor-grid {
    background-image:
        linear-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
    background-size: 36px 36px;
}
body.decor-noise {
    background-image:
        radial-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px),
        radial-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px);
    background-size: 4px 4px, 7px 7px;
    background-position: 0 0, 2px 3px;
}
body.decor-blob {
    background-image:
        radial-gradient(800px 400px at 10% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
        radial-gradient(700px 400px at 110% 30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%);
}

/* ==========================================================================
   Archetype 1: editorial（杂志大开本）
   ========================================================================== */
.arch-editorial .ed-hero {
    display: grid; grid-template-columns: 1fr; gap: 8px;
    padding: var(--hero-pad) 0;
    border-bottom: 1px solid var(--border);
}
.arch-editorial .ed-hero h1 { max-width: 880px; }
.arch-editorial .ed-hero p.lead { font-size: 18px; max-width: 680px; }
.arch-editorial .ed-meta {
    display: flex; gap: 16px; color: var(--text-soft); font-size: 13px;
    margin-top: 14px;
}
.arch-editorial .ed-grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap);
    margin-top: var(--gap);
}
.arch-editorial .ed-grid .lead-card { grid-row: span 2; }
.arch-editorial .ed-grid .lead-card h2 { font-size: calc(var(--h2-size) + 6px); }
.arch-editorial .ed-grid .card { display: flex; flex-direction: column; gap: 10px; }

/* ==========================================================================
   Archetype 2: showcase（聚焦特写）
   ========================================================================== */
.arch-showcase .sc-hero {
    text-align: center;
    padding: calc(var(--hero-pad) * 1.2) 20px;
}
.arch-showcase .sc-hero h1 { max-width: 900px; margin: 0 auto 18px; }
.arch-showcase .sc-hero p.lead { margin: 0 auto 22px; }
.arch-showcase .sc-hero .actions { justify-content: center; }
.arch-showcase .sc-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
.arch-showcase .sc-feature {
    margin: calc(var(--gap) * 2) 0;
    padding: var(--hero-pad);
    background: var(--surface-alt);
    border-radius: var(--radius);
    text-align: center;
}
.arch-showcase .sc-feature .num {
    font-family: var(--font-heading);
    font-size: 56px; font-weight: 900;
    color: var(--accent); line-height: 1;
}

/* ==========================================================================
   Archetype 3: doc（文档侧栏）
   ========================================================================== */
.arch-doc { background: var(--bg); }
.arch-doc .doc-shell {
    display: grid; grid-template-columns: 250px minmax(0, 1fr);
    min-height: 100vh;
}
.arch-doc .doc-side {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: 28px 22px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 6px;
}
.arch-doc .doc-side .brand { margin-bottom: 18px; }
.arch-doc .doc-side a:not(.brand) {
    padding: 8px 12px;
    color: var(--text-soft); font-size: 14px;
    border-radius: var(--radius-sm);
}
.arch-doc .doc-side a:not(.brand):hover { color: var(--accent); background: var(--accent-soft); }
.arch-doc .doc-side .group-title {
    font-family: var(--font-eyebrow);
    font-size: 11px; letter-spacing: var(--eyebrow-ls);
    text-transform: var(--eyebrow-tt);
    color: var(--text-soft);
    padding: 14px 12px 4px;
}
.arch-doc .doc-main { padding: var(--wrap-pad); max-width: 1000px; }
.arch-doc .doc-hero {
    padding: calc(var(--hero-pad) * 0.6) 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--gap);
}
.arch-doc .doc-list .card { margin-bottom: var(--gap); }

/* ==========================================================================
   Archetype 4: split（左右分栏）
   ========================================================================== */
.arch-split .sp-hero {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px;
    align-items: center;
    padding: var(--hero-pad) 0;
}
.arch-split .sp-art {
    aspect-ratio: 4/3;
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, var(--text)) 100%);
    position: relative; overflow: hidden;
}
.arch-split .sp-art::before {
    content: ''; position: absolute; inset: 12% 30% 30% 12%;
    background: var(--accent-soft); opacity: .55;
    border-radius: var(--radius-sm);
}
.arch-split .sp-art::after {
    content: ''; position: absolute; inset: 38% 14% 16% 38%;
    background: var(--surface); opacity: .82;
    border-radius: var(--radius-sm);
}
.arch-split .sp-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap);
    margin-top: var(--gap);
}

/* ==========================================================================
   Archetype 5: minimal（极简留白）
   ========================================================================== */
.arch-minimal .min-hero {
    padding: calc(var(--hero-pad) * 1.6) 0 var(--hero-pad);
    max-width: 760px;
}
.arch-minimal .min-hero h1 { font-size: calc(var(--h1-size) * 1.05); }
.arch-minimal .min-list {
    display: grid; gap: 0;
    border-top: 1px solid var(--border);
}
.arch-minimal .min-list article {
    display: grid; grid-template-columns: 100px 1fr auto;
    gap: 24px; padding: 24px 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
}
.arch-minimal .min-list .num {
    font-family: var(--font-heading);
    color: var(--text-soft); font-size: 14px; font-weight: 700;
}
.arch-minimal .min-list h2 { font-size: calc(var(--h2-size) + 2px); }
.arch-minimal .min-list .arrow { color: var(--accent); font-weight: 700; }
.arch-minimal .min-list article:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   Archetype 6: grid（便当网格）
   ========================================================================== */
.arch-grid .gd-hero {
    display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap);
    margin-top: var(--gap);
}
.arch-grid .gd-hero .gd-main {
    padding: var(--hero-pad);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    grid-row: span 2;
}
.arch-grid .gd-hero .gd-side {
    padding: var(--card-pad);
    background: var(--accent-soft);
    border-radius: var(--radius);
    color: var(--text);
}
.arch-grid .gd-hero .gd-side strong {
    font-family: var(--font-heading);
    font-size: 28px; display: block; color: var(--accent);
}
.arch-grid .gd-list {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: var(--gap);
    margin-top: var(--gap);
}
.arch-grid .gd-list .card { display: flex; flex-direction: column; justify-content: space-between; }
.arch-grid .gd-list .card.tall { grid-row: span 2; }
.arch-grid .gd-list .card.wide { grid-column: span 2; }

/* ==========================================================================
   Archetype 7: journal（期刊日志）
   ========================================================================== */
.arch-journal .jr-hero {
    display: grid; grid-template-columns: 180px 1fr; gap: 32px;
    align-items: end;
    padding: var(--hero-pad) 0;
    border-bottom: 3px solid var(--text);
}
.arch-journal .jr-hero .vol { font-family: var(--font-heading); }
.arch-journal .jr-hero .vol .v { font-size: 60px; font-weight: 900; line-height: 1; color: var(--accent); }
.arch-journal .jr-hero .vol .d { font-size: 13px; color: var(--text-soft); margin-top: 4px; }
.arch-journal .jr-hero h1 { max-width: 760px; }
.arch-journal .jr-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
    margin-top: var(--gap);
}
.arch-journal .jr-list article {
    padding: 28px 28px 28px 0;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.arch-journal .jr-list article:nth-child(2n) { border-right: 0; padding-left: 28px; padding-right: 0; }
.arch-journal .jr-list article h2 { font-size: calc(var(--h2-size) + 4px); margin: 8px 0 10px; }
.arch-journal .jr-list .eyebrow { display: block; }

/* ==========================================================================
   Archetype 8: landing（产品着陆）
   ========================================================================== */
.arch-landing .ld-hero {
    display: grid; grid-template-columns: 1fr; text-align: left;
    padding: var(--hero-pad) 0;
}
.arch-landing .ld-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
    padding: var(--card-pad) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 0 0 var(--gap);
}
.arch-landing .ld-stats .stat .n {
    font-family: var(--font-heading);
    font-size: 40px; font-weight: 900;
    color: var(--accent); line-height: 1;
}
.arch-landing .ld-stats .stat .l {
    font-size: 13px; color: var(--text-soft);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-top: 6px;
}
.arch-landing .ld-features {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
    margin-bottom: calc(var(--gap) * 1.5);
}
.arch-landing .ld-features .card { text-align: left; }
.arch-landing .ld-features .icon {
    width: 44px; height: 44px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
    font-family: var(--font-heading); font-weight: 900; font-size: 22px;
}
.arch-landing .ld-cta {
    text-align: center;
    padding: var(--hero-pad);
    border-radius: var(--radius);
    background: var(--text);
    color: var(--bg);
    margin: var(--gap) 0;
}
.arch-landing .ld-cta h2 { color: var(--bg); font-size: calc(var(--h2-size) + 10px); margin-bottom: 12px; }
.arch-landing .ld-cta p { color: color-mix(in srgb, var(--bg) 78%, transparent); margin: 0 0 20px; }

/* ==========================================================================
   友链区
   ========================================================================== */
.links {
    margin-top: calc(var(--gap) * 1.5);
    padding: var(--card-pad);
    border-top: 1px solid var(--border);
}
.links h3 {
    font-family: var(--font-eyebrow);
    font-size: 12px; letter-spacing: var(--eyebrow-ls);
    text-transform: var(--eyebrow-tt);
    color: var(--text-soft);
    margin: 0 0 12px;
}
.links a {
    display: inline-block;
    margin: 0 14px 8px 0;
    color: var(--text-soft); font-size: 14px;
    border-bottom: 1px dashed transparent;
}
.links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ==========================================================================
   文章详情页
   ========================================================================== */
.article-layout {
    display: grid; grid-template-columns: minmax(0,1fr) 300px;
    gap: calc(var(--gap) * 1.5);
    padding-top: var(--gap);
}
.article-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: calc(var(--card-pad) * 1.5);
}
.article-content h1 { font-size: calc(var(--h1-size) * 0.78); margin-bottom: 12px; }
.article-content .summary {
    color: var(--text-soft); font-size: 17px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.article-content .body { font-size: var(--body-size); }
.article-content .body p { margin: 18px 0; }
.article-content .body h2 {
    font-size: calc(var(--h2-size) + 4px);
    margin-top: 32px;
}
.article-content .body img { margin: 22px 0; border-radius: var(--radius-sm); }
.article-content .pager {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px; margin-top: 32px;
    padding-top: 22px; border-top: 1px solid var(--border);
}
.article-content .pager a {
    color: var(--accent); font-weight: 700;
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.article-content .pager a:last-child { text-align: right; }

.article-aside {
    display: flex; flex-direction: column; gap: var(--gap);
}
.article-aside .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--card-pad);
}
.article-aside .panel h3 {
    font-family: var(--font-eyebrow);
    font-size: 12px; letter-spacing: var(--eyebrow-ls);
    text-transform: var(--eyebrow-tt);
    color: var(--text-soft);
    margin: 0 0 12px;
}
.article-aside .panel a {
    display: block;
    padding: 8px 0;
    color: var(--text); font-size: 14px;
    border-bottom: 1px solid var(--border);
}
.article-aside .panel a:last-child { border-bottom: 0; }
.article-aside .panel a:hover { color: var(--accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    margin-top: calc(var(--gap) * 2);
    padding: 28px var(--wrap-pad);
    text-align: center;
    color: var(--text-soft);
    font-size: 13px;
    border-top: 1px solid var(--border);
}

/* ==========================================================================
   暗色模式微调（mode-dark）
   ========================================================================== */
.mode-dark .topbar { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.mode-dark .hero-inverted .hero { background: var(--surface-alt); color: var(--text); }
.mode-dark .hero-inverted .hero h1 { color: var(--text); }
.mode-dark .hero-inverted .hero p.lead { color: var(--text-soft); }
.mode-dark .hero-inverted .hero .eyebrow { color: var(--accent); }
.mode-dark .arch-landing .ld-cta { background: var(--surface-alt); color: var(--text); }
.mode-dark .arch-landing .ld-cta h2 { color: var(--text); }
.mode-dark .arch-landing .ld-cta p { color: var(--text-soft); }
.mode-dark .brand::before { box-shadow: 0 0 16px var(--accent); }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 980px) {
    .arch-editorial .ed-grid,
    .arch-showcase .sc-grid,
    .arch-landing .ld-features,
    .arch-landing .ld-stats,
    .arch-grid .gd-hero,
    .arch-grid .gd-list,
    .arch-journal .jr-list,
    .arch-split .sp-grid,
    .article-layout {
        grid-template-columns: 1fr;
    }
    .arch-editorial .ed-grid .lead-card { grid-row: auto; }
    .arch-grid .gd-list .card.tall { grid-row: auto; }
    .arch-grid .gd-list .card.wide { grid-column: auto; }
    .arch-grid .gd-list { grid-auto-rows: auto; }
    .arch-doc .doc-shell { grid-template-columns: 1fr; }
    .arch-doc .doc-side { position: relative; height: auto; }
    .arch-split .sp-hero { grid-template-columns: 1fr; }
    .arch-journal .jr-hero { grid-template-columns: 1fr; }
    .arch-journal .jr-list article,
    .arch-journal .jr-list article:nth-child(2n) {
        border-right: 0; padding: 22px 0;
    }
    .arch-minimal .min-list article {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@media (max-width: 600px) {
    .topbar { flex-direction: column; align-items: flex-start; padding: 14px var(--wrap-pad); }
    .topbar nav { width: 100%; }
    h1 { font-size: clamp(28px, 8vw, 38px) !important; }
    .hero, .arch-editorial .ed-hero { padding: calc(var(--hero-pad) * 0.7) 0; }
    .article-content .pager {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .article-content .pager a:last-child { text-align: left; }
}