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

.foreword{

    background:#F8F6F1;

    margin:0;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    font-family:

    "Songti TC",

    "Songti SC",

    serif;

}

.paper{

    width:min(92%,760px);

    max-width:760px;

    margin:0 auto;

    min-height:100vh;

    padding:140px 72px 100px;

}


.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;

    transform-origin:left center;

    backface-visibility: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);

}
/* 首页标题 */

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;

}

}

/* ========= 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:80px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.15);

}

.back-link{

    color:#bdbdbd;

    text-decoration:none;

    font-size:16px;

    letter-spacing:.08em;

    transition:.3s;

}

.back-link:hover{

    color:rgb(120, 95, 95);

    padding-left:8px;

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

    .paper{

        width:100%;

        max-width:none;

        padding:72px 24px;

    }

    .paper p{

        font-size:18px;

        line-height:2;

    }

    .chapter{

        font-size:20px;

    }

    .toc-title{

        font-size:26px;

    }

}