/* =========================================================================
   组合数学 · 演出手册 (Live Program) 设计系统
   全站共享主题。中文正文走系统字体，拉丁/数字/标签走 Space Grotesk / Space Mono。
   签名元素：五色脊条 + TRACK 编号眉标。
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
    /* —— 纸面与墨色 —— */
    --paper: #f3efe6;
    /* 暖纸底，带一点湖畔柳绿的灰调，避开纯奶油 */
    --paper-2: #ece7db;
    --sheet: #fbf9f4;
    /* 卡片纸面，比底色亮一档 */
    --ink: #211e18;
    /* 主文字，暖黑而非纯黑 */
    --ink-soft: #4a4640;
    --ink-faint: #857f74;
    --hair: #ddd6c6;
    /* 发丝分隔线 */
    --hair-strong: #c9c0ad;

    /* —— 北大红（品牌）—— */
    --pku: #94070a;
    --pku-deep: #6d0507;

    /* —— 五大乐队主题色（作点缀，彼此可辨、与北大红拉开）—— */
    --ppp: #ff6699;
    /* Poppin'Party 粉 */
    --ag: #d6294e;
    /* Afterglow 绯红 */
    --pp: #3fb5e6;
    /* Pastel*Palettes 天蓝 */
    --ros: #8a4fbf;
    /* Roselia 紫 */
    --hhw: #f5a623;
    /* Hello Happy World 琥珀 */

    /* —— 字体 —— */
    --font-body: 'Space Grotesk', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
    --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* —— 版式尺度 —— */
    --measure: 60rem;
    /* 长文阅读宽度 */
    --wide: 84rem;
    --radius: 7px;
    --shadow: 0 1px 2px rgba(33, 30, 24, .05), 0 10px 30px -12px rgba(33, 30, 24, .18);
    --shadow-lift: 0 6px 14px rgba(33, 30, 24, .1), 0 22px 48px -18px rgba(33, 30, 24, .32);
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    background-color: var(--paper);
}

body {
    margin: 0;
    background-color: var(--paper);
    /* 极淡的纸纹：两层低对比斜向条与点，静止不打扰阅读 */
    background-image:
        repeating-linear-gradient(115deg, rgba(148, 7, 10, .012) 0 2px, transparent 2px 9px),
        radial-gradient(circle at 12% 18%, rgba(63, 181, 230, .05), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(138, 79, 191, .05), transparent 46%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 18.5px;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--pku);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* 键盘焦点始终可见 */
:focus-visible {
    outline: 2px solid var(--pku);
    outline-offset: 2px;
    border-radius: 3px;
}

img {
    max-width: 100%;
    height: auto;
}

/* =========================================================================
   随机卡面背景（主页除外，由 /common/card-bg.js 注入 .card-bg 元素）
   卡面固定铺底，上压纸色薄纱：边缘透出多、中间读字区透出少，兼顾好看与可读
   ========================================================================= */
/* 有卡面背景时，body 自身背景透明，否则不透明纸底会盖住负层的卡面 */
body:has(.card-bg) {
    background-color: transparent;
    background-image: none;
}

.card-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--paper);
    opacity: 0;
    transition: opacity 1.2s ease;
}

.card-bg--ready {
    opacity: 1;
}

/* 纸色薄纱：压淡卡面保证可读，但仍透出插画的色彩与轮廓 */
.card-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(130% 100% at 50% 40%, rgba(243, 239, 230, .86) 0%, rgba(243, 239, 230, .74) 42%, rgba(243, 239, 230, .58) 74%, rgba(243, 239, 230, .42) 100%),
        linear-gradient(180deg, rgba(243, 239, 230, .62) 0%, rgba(243, 239, 230, .5) 50%, rgba(243, 239, 230, .72) 100%);
}

/* 有卡面背景时，正文纸卡略微半透明，透出一点卡面色，但仍保证可读 */
body:has(.card-bg) .sheet {
    background: rgba(251, 249, 244, .9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* =========================================================================
   布局骨架
   ========================================================================= */
.wrap {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 96px 24px 80px;
}

.wrap--read {
    max-width: var(--measure);
}

/* =========================================================================
   眉标 / TRACK 编号 —— 签名元素
   ========================================================================= */
.eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: inline-flex;
    align-items: center;
    gap: .6em;
    margin: 0 0 .9rem;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--pku);
}

/* TRACK NN 徽记 */
.track-no {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .18em;
    color: var(--ink-faint);
}

/* 五色脊条：一竖排五段乐队色，签名分隔件 */
.spine5 {
    display: flex;
    width: 46px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    gap: 0;
}

.spine5 i {
    flex: 1;
    display: block;
}

.spine5 i:nth-child(1) {
    background: var(--ppp);
}

.spine5 i:nth-child(2) {
    background: var(--ag);
}

.spine5 i:nth-child(3) {
    background: var(--hhw);
}

.spine5 i:nth-child(4) {
    background: var(--pp);
}

.spine5 i:nth-child(5) {
    background: var(--ros);
}

/* 横向五色细线（页脚 / 分节用） */
.rule5 {
    height: 3px;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(90deg,
            var(--ppp) 0 20%, var(--ag) 20% 40%, var(--hhw) 40% 60%,
            var(--pp) 60% 80%, var(--ros) 80% 100%);
    margin: 2.4rem 0;
}

/* =========================================================================
   标题体系
   ========================================================================= */
.page-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 3.7rem);
    line-height: 1.08;
    letter-spacing: -.01em;
    margin: 0 0 .5rem;
    color: var(--ink);
}

.page-title .en {
    display: block;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(.85rem, 2vw, 1.08rem);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--pku);
    margin-top: .8rem;
}

.lede {
    font-size: 1.24rem;
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 1.2rem 0 0;
    max-width: var(--measure);
}

/* =========================================================================
   长文阅读版式（攻略子页）
   .prose 包裹正文，h2 带循环乐队色脊条
   ========================================================================= */
.prose {
    font-size: 1.15rem;
    line-height: 1.95;
    color: var(--ink-soft);
}

.prose p {
    margin: 0 0 1.4rem;
    text-align: justify;
}

.prose h2 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.68rem;
    line-height: 1.35;
    color: var(--ink);
    margin: 3.2rem 0 1.3rem;
    padding-left: 1rem;
    border-left: 5px solid var(--hhw);
}

/* h2 脊条循环五乐队色，让章节像连续曲目 */
.prose h2:nth-of-type(5n+1) {
    border-left-color: var(--ppp);
}

.prose h2:nth-of-type(5n+2) {
    border-left-color: var(--ag);
}

.prose h2:nth-of-type(5n+3) {
    border-left-color: var(--hhw);
}

.prose h2:nth-of-type(5n+4) {
    border-left-color: var(--pp);
}

.prose h2:nth-of-type(5n+5) {
    border-left-color: var(--ros);
}

.prose h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--ink);
    margin: 2rem 0 .8rem;
    padding-bottom: .35rem;
    border-bottom: 1px dashed var(--hair-strong);
}

.prose ul,
.prose ol {
    margin: 0 0 1.4rem;
    padding-left: 1.4rem;
}

.prose li {
    margin-bottom: .6rem;
}

.prose li::marker {
    color: var(--pku);
}

.prose b,
.prose strong {
    color: var(--ink);
    font-weight: 600;
}

.prose a {
    color: var(--pku);
    font-weight: 500;
}

/* prose 内的按钮不吃 prose a 的红字规则，保持按钮本色 */
.prose a.btn--primary {
    color: #fbf9f4;
    font-weight: 600;
}

.prose a.btn--ghost {
    color: var(--pku);
    font-weight: 600;
}

/* 时效 / 免责小字 */
.note-faint {
    font-size: .92rem;
    color: var(--ink-faint);
    line-height: 1.7;
}

/* =========================================================================
   纸面卡片
   ========================================================================= */
.sheet {
    background: var(--sheet);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 30px;
}

/* =========================================================================
   按钮
   ========================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1;
    padding: 15px 30px;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.btn--primary {
    background: var(--pku);
    color: #fbf9f4;
    box-shadow: 0 8px 20px -8px rgba(148, 7, 10, .6);
}

.btn--primary:hover {
    background: var(--pku-deep);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(148, 7, 10, .65);
}

.btn--ghost {
    background: transparent;
    color: var(--pku);
    border-color: var(--pku);
}

.btn--ghost:hover {
    background: var(--pku);
    color: #fbf9f4;
}

.btn.disabled,
.btn[aria-disabled="true"] {
    background: var(--hair-strong);
    color: #fff;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* 返回上一级 —— 手册里的“返回曲目单” */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-decoration: none;
    margin-bottom: 1.6rem;
    transition: color .16s ease, gap .16s ease;
}

.back-link:hover {
    color: var(--pku);
    gap: .8em;
}

/* =========================================================================
   代码 / 流程条（TapTune 用）
   ========================================================================= */
code {
    font-family: var(--font-mono);
    font-size: .9em;
    background: var(--paper-2);
    border: 1px solid var(--hair);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--pku-deep);
}

.flow {
    font-family: var(--font-mono);
    font-size: .95rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper-2);
    border-left: 3px solid var(--pp);
    border-radius: 5px;
    padding: 14px 18px;
    overflow-x: auto;
}

/* =========================================================================
   页脚
   ========================================================================= */
.site-footer {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 24px 60px;
    color: var(--ink-faint);
    font-size: .88rem;
}

.site-footer .foot-inner {
    border-top: 1px solid var(--hair);
    padding-top: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.site-footer .foot-mono {
    font-family: var(--font-mono);
    letter-spacing: .06em;
}

/* =========================================================================
   进场动画（尊重 reduced-motion）
   ========================================================================= */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

/* =========================================================================
   响应式
   ========================================================================= */
@media (max-width: 640px) {
    body {
        font-size: 17px;
    }

    .wrap {
        padding: 72px 18px 56px;
    }

    .prose {
        font-size: 1.08rem;
    }

    .prose h2 {
        font-size: 1.42rem;
        margin-top: 2.5rem;
    }

    .lede {
        font-size: 1.12rem;
    }

    .sheet {
        padding: 20px 18px;
    }

    .btn {
        padding: 14px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    .reveal {
        animation: none !important;
        transition: opacity .3s ease !important;
        transform: none !important;
    }

    .reveal {
        opacity: 1;
    }
}