@font-face {
    font-family: "Cinzel";
    src: url("../assets/fonts/cinzel.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant";
    src: url("../assets/fonts/cormorant-light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tinos";
    src: url("../assets/fonts/tinos.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---- 配色：亮色 / 暗色 ---- */
:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --text: #1a1a1a;
    --line-faint: #cccccc;
    --line-dots: #999999;
    --hover-bg: rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #111111;
        --text: #e8e6e3;
        --line-faint: #4a4a4a;
        --line-dots: #666666;
        --hover-bg: rgba(255, 255, 255, 0.07);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
}

/* 根文档保持可滚动（隐藏滚动条），手机上的下拉刷新才可用；
   视觉上不能滑动翻页——页面都是 fixed 定位铺满视口的 */
html {
    overflow-y: scroll;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    min-height: calc(100vh + 2px);
    font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
        "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-weight: 200;
    color: var(--text);
    background: var(--bg);
}

/* ---- 页面切换：不能翻页，只能点箭头 ---- */
.deck {
    position: relative;
    height: 100%;
    width: 100%;
}

.page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out, visibility 0.5s;
}

.page.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.page.exit-left {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
}

/* ---- 页脚翻页：衬线小字 Prev / Next + 页码，像书的页脚 ---- */
.pager {
    position: absolute;
    bottom: 2.5rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 3rem;
    font-family: "Tinos", "Times New Roman", serif;
    font-size: 1.05rem;
}

.pager button {
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 0.15rem 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pager button:hover {
    opacity: 1;
    border-bottom-color: var(--text);
}

.pager-num {
    font-style: italic;
    opacity: 0.4;
}

/* 第一页没有上一页，最后一页没有下一页；占位保持布局对称 */
.page-1 .prev,
.page-3 .next {
    visibility: hidden;
}

/* ---- 第一页：Hello World! ---- */
.page-1 h1 {
    font-family: "Tinos", "Times New Roman", serif;
    font-size: 10rem;
    font-weight: 400;
}

/* ---- 第二页：咕咕嘎嘎墙 + 视频 ---- */
.wall {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.wall span {
    position: absolute;
    white-space: nowrap;
    line-height: 1;
}

/* 涂鸦墙的字体混搭 */
.wall .f-serif {
    font-family: "Tinos", "Times New Roman", serif;
}

.wall .f-song {
    font-family: "SimSun", "Songti SC", "Noto Serif CJK SC", serif;
}

.wall .f-hei {
    font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}

.wall .f-mono {
    font-family: "Courier New", monospace;
}

.wall .f-hand {
    font-family: "Comic Sans MS", "Segoe Script", cursive;
}

.wall .f-cinzel {
    font-family: "Cinzel", serif;
}

.wall .f-cormorant {
    font-family: "Cormorant", serif;
}

.video {
    position: relative;
    z-index: 1;
    width: min(920px, 90vw);
    aspect-ratio: 16 / 9;
    background: var(--bg);
    padding: 10px;
    border: 1px solid var(--text);
}

.video iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---- 第三页：个人信息（报纸头版式） ---- */
.page-3 {
    padding: 3rem 2rem;
    font-family: "Tinos", "Songti SC", "SimSun", "Noto Serif CJK SC", serif;
    overflow: hidden;
}

/* 内容区内部滚动：页面和页脚钉死，只有报纸内容滚 */
.p3-scroll {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    /* 滚到底时内容不被吸底页脚遮住 */
    padding-bottom: 4.5rem;
}

.p3-scroll .paper {
    margin-top: auto;
}

.p3-scroll #keep-android-open {
    margin-bottom: auto;
}

.paper {
    width: min(1100px, 94vw);
}

.masthead {
    text-align: center;
}

.masthead h2 {
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    border-top: 1px solid var(--text);
    padding-top: 1rem;
}

.dateline {
    font-size: 1rem;
    letter-spacing: 0.1em;
    opacity: 0.65;
    padding: 0.6rem 0 0.75rem;
    border-bottom: 3px double var(--text);
}

.columns {
    display: flex;
    gap: 3rem;
    margin-top: 2.5rem;
    text-align: left;
}

.col {
    flex: 1;
    min-width: 0;
}

.col + .col {
    border-left: 1px solid var(--text);
    padding-left: 3rem;
}

.col h3 {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    border-bottom: 1px solid var(--text);
    padding-bottom: 0.4rem;
    margin-bottom: 1.1rem;
}

.col p {
    font-size: 1.15rem;
    line-height: 2;
}

.col-lede {
    font-size: 1.6rem !important;
}

.col-note {
    opacity: 0.6;
    font-size: 0.9rem;
}

.page-3 .index-list {
    width: 100%;
    margin-top: 0;
}

.index-list li {
    display: flex;
    align-items: baseline;
    padding: 0.6rem 0.25rem;
    font-size: 1.15rem;
    transition: background 0.2s ease;
}

.index-list li:hover {
    background: var(--hover-bg);
}

.index-list .item {
    letter-spacing: 0.1em;
}

.index-list .dots {
    flex: 1;
    margin: 0 0.75rem;
    border-bottom: 1px dotted var(--line-dots);
}

.index-list a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--line-faint);
    transition: border-color 0.2s ease;
}

.index-list a:hover {
    border-bottom-color: var(--text);
}

#keep-android-open {
    margin-top: 2.5rem;
    width: min(640px, 90vw);
}

/* ---- 小屏 ---- */
@media (max-width: 640px) {
    .page-1 h1 {
        font-size: 4rem;
    }
    /* 第三页去掉页面内边距，滚动容器和滚动条贴住视口边缘 */
    .page-3 {
        padding: 0;
    }
    .paper {
        width: 100%;
        padding: 2rem 0.75rem 0;
    }
    .columns {
        flex-direction: column;
        gap: 1.5rem;
    }
    .col + .col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--text);
        padding-top: 1.5rem;
    }
    /* 三页 pager 统一吸底，位置完全一致；
       底色向上渐隐，涂鸦墙和内容自然淡出，无生硬边缘 */
    .pager {
        bottom: 0;
        padding: 1.75rem 1.5rem 0.75rem;
        background: linear-gradient(to bottom, transparent, var(--bg) 45%);
    }
    .pager-num {
        opacity: 0.65;
    }
    .pager button {
        opacity: 0.8;
    }
    /* 第三页的翻页键在文档流末尾：滚到报纸最底下才出现 */
    .page-3 .p3-scroll {
        padding-bottom: 0;
    }
    .page-3 .pager {
        position: static;
        width: 100%;
        margin-top: 2rem;
        background: none;
        padding: 0.5rem 1.5rem 0.75rem;
    }
}