/* 首页标题 */

h1{

position:absolute;

top:130px;

width:100%;

text-align:center;

font-size:44px;

font-weight:400;

letter-spacing:.35em;

color:#D8D3CC;

opacity:0;

animation:titleFade 2s forwards;

}

.subtitle{

position:absolute;

top:205px;

width:100%;

text-align:center;

font-size:14px;

font-weight:400;

letter-spacing:.18em;

color:#828282;

opacity:0;

animation:lineFade 1.4s forwards;

animation-delay:5.5s;

}

/* 三句话 */

.quote{

position:absolute;

top:280px;

width:100%;

text-align:center;

line-height:2.5;

font-size:21px;

color:#CAC5BC;

}

.quote p{

opacity:0;

transform:translateY(10px);

}

.quote p:nth-child(1){

animation:lineFade 1.4s forwards;

animation-delay:1.8s;

}

.quote p:nth-child(2){

animation:lineFade 1.4s forwards;

animation-delay:3s;

}

.quote p:nth-child(3){

animation:lineFade 1.4s forwards;

animation-delay:4.2s;

}

/* OPEN */

.open{

position:absolute;

bottom:80px;

left:50%;

transform:translateX(-50%);

text-decoration:none;

color:#D8D3CC;

letter-spacing:0;

font-size:18px;

opacity:0;

animation:

openFade 1.6s forwards,

breath 3.5s infinite;

animation-delay:7.2s,9s;

transition:.35s;

}

.open:hover{

letter-spacing:.8em;

}

/* 动画 */

@keyframes titleFade{

0%{

opacity:0;

transform:translateY(20px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes lineFade{

0%{

opacity:0;

transform:translateY(10px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes openFade{

0%{

opacity:0;

}

100%{

opacity:1;

}

}

@keyframes breath{

0%{

opacity:.35;

}

50%{

opacity:1;

}

100%{

opacity:.35;

}

}
/* ===========================================
                FOREWORD
=========================================== */

.foreword{

    background:#F8F6F1;

    margin:0;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    font-family:
    "Baskerville",
    "Songti TC",
    "Songti SC",
    serif;

}

.paper{

    width:min(92%,760px);

    max-width:760px;

    margin:0 auto;

    min-height:100vh;

    padding:140px 72px 100px;

}


.foreword .paper p{

    font-size:22px;

    line-height:2.4;

    letter-spacing:.04em;

    color:#222;

    margin-bottom:3em;

}

.next{

    display:inline-block;

    margin-top:120px;

    color:#777;

    text-decoration:none;

    letter-spacing:.15em;

    transition:.35s;

}


.next:hover{

    color:#111;

    letter-spacing:.35em;

}


/* ===========================
   Skip Animation
=========================== */

.skip *{

animation-duration:.01s!important;

animation-delay:0s!important;

animation-fill-mode:forwards;

opacity:1!important;

filter:none!important;

}

.cover{

    position:absolute;

    inset:0;

    background:#050505;

    border-radius:6px;
    overflow:hidden;

    box-shadow:
    0 0 80px rgba(0,0,0,.65),
    0 40px 90px rgba(0,0,0,.75),
    12px 0 0 rgba(20,20,20,.95);

}

/* ========= TOC foreword ========= */

.toc-line{
    margin:80px 0 40px;
    border:none;
    border-top:1px solid rgba(140, 5, 5, 0.487);
}

.toc-title{

    font-size:30px;

    font-weight:500;

    letter-spacing:.15em;

    margin-bottom:35px;

    color:#483030bc;

}

.toc a{

    display:block;

    text-decoration:none;

    color:#945c5c;

    margin-bottom:28px;

    transition:.3s;

}

.toc a:hover{

    color:rgb(116, 0, 0);

    transform:translateX(10px);

}

.chapter{

    display:block;

    font-size:22px;

    margin-bottom:6px;

}

.desc{

    display:block;

    font-size:15px;

    color:#8b7c7c;

    letter-spacing:.08em;

}
.page-nav{

    margin-top:20px;

    padding-top:0px;

    border-top:1px solid rgba(0, 0, 0, 0.164);

}

.back-link{

    color:#bdbdbd;

    text-decoration:none;

    font-size:16px;

    letter-spacing:.08em;

    transition:.3s;

}

.back-link:hover{

    color:rgb(120, 95, 95);

    transform:translateX(8px);

}
@media (max-width:768px){

    .paper{

        width:100%;

        max-width:none;

        padding:72px 24px;

    }

    .foreword .paper p{

        font-size:18px;

        line-height:2;

    }

    .chapter{

        font-size:20px;

    }

    .toc-title{

        font-size:26px;

    }

}

.foreword{

animation:pageFade .7s ease;

}
@keyframes pageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}
.cover{

    position:absolute;
    inset:0;

    background:#050505;

    border-radius:6px;

    overflow:hidden;

    box-shadow:
    0 0 80px rgba(0,0,0,.65),
    0 40px 90px rgba(0,0,0,.75),
    12px 0 0 rgba(20,20,20,.95);

    font-family:
    "Baskerville",
    "Songti TC",
    "Songti SC",
    serif;

}
.contents{

    background:#171717;

    margin:0;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    font-family:
        "Baskerville",
        "Songti TC",
        "Songti SC",
        serif;

}
.foreword .paper p{
    color:#6a6763;
    font-size:22px;
    line-height:2.4;
    letter-spacing:.04em;
    margin-bottom:3em;
}
.toc-intro{

    margin-bottom:100px;

}

.toc-intro p{

    font-size:18px;

    line-height:2.2;

    color:#555;

}
.author-note {
    font-family: Arial;
    font-size: 22px;
    color: #ffffff;
    line-height: 2.1;
    margin-bottom: 15px;
}
body:not(.cover-page){
    animation: pageFade .7s ease;
}
.author-line{
    margin:90px 0 60px;
    border:none;
    border-top:1px solid rgb(88, 50, 50);
}