@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite@1.6.0/style.css');


/* =========================
   全局
========================= */

* {
    box-sizing: border-box;
}


.poem-page {

    margin:0;

    min-height:100vh;

    background:#f8f8fb;

    color:#20233b;

    font-family:
        'LXGW WenKai Lite',
        'Noto Serif SC',
        serif;

    overflow-x:hidden;
}



/* =========================
   顶部导航
========================= */

.poem-header {

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:50px;

    z-index:20;

    background:rgba(248,248,251,0.85);

    backdrop-filter:blur(10px);

    border-bottom:
        1px solid rgba(48,56,184,.12);

}


.poem-header-inner {

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 2rem;

}


.poem-back {

    color:#1e861e;

    text-decoration:none;

    font-size:.85rem;

}


.poem-back-icon {

    font-size:.6rem;

}


.poem-badge {

    color:#1e861e;

    font-size:.75rem;

    letter-spacing:2px;

}



/* =========================
   主区域
========================= */

.poem-main {

    position:relative;

    min-height:100vh;

    padding-top:50px;

}



/* =========================
   云图
========================= */


.poem-cloud {

    position:fixed;

    top:0;

    left:auto;

    right:15vw;

    bottom: 0;


    width:55vw;

    height:100vh;

    z-index:0;

}

.poem-cloud img{

    width:120%;

    height:120%;

    object-fit:contain;

    transform:translate(-5%, -10%);

}

/* =========================
   右侧蓝色区域
========================= */


.poem-blue-cover {

    position:fixed;

    top:0;
    right:0;


    width:35vw;
    height:100vh;


    background:#48a516;


    z-index:1;


    clip-path:polygon(
        0 0,
        100% 0,
        100% 100%,
        15% 100%
    );

}

/* =========================
   左侧正文
========================= */


.poem-content {


    position:relative;


    z-index:2;



    width:420px;



    margin-left:8vw;



    padding-top:4rem;

}




/* =========================
   标题
========================= */


.poem-head {

    margin-bottom:2.5rem;

}



.poem-title {


    margin:0;


    font-size:4rem;


    line-height:1;


    font-weight:600;


    color:#1e861e;



    letter-spacing:.15em;

}


.title-line {


    width:220px;


    height:2px;


    background:#1e861e;



    margin-top:.5rem;

}


.poem-meta {


    margin-top:.8rem;


    color:#777b91;


    font-size:.85rem;


}



/* =========================
   正文
========================= */


.poem-body {


    text-align:left;

}



.poem-stanza {


    margin:1.7rem 0;


}



.poem-stanza p {


    margin:0;


    font-size:1.05rem;


    line-height:1.85;


    letter-spacing:.12em;


    color:#30344d;


}



/* 结尾 */


.poem-ending {


    margin-top:3rem;


    color:#9295aa;


    letter-spacing:.35em;


    font-size:.9rem;


}



/* =========================
   移动端
========================= */


@media(max-width:768px){


    .poem-blue-cover {

        display:none;

    }



    .poem-cloud {


        position:relative;


        top:auto;

        right:auto;


        width:100%;


        height:220px;



    }



    .poem-cloud img {


        object-fit:cover;

    }



    .poem-content {


        width:auto;


        margin:0 1.5rem;


        padding-top:2rem;


    }



    .poem-title {


        font-size:3rem;

    }



    .poem-stanza p {


        font-size:1rem;


        line-height:1.8;

    }



}

/* ===== 新版作品信息 ===== */

.poem-series{
    font-family:'Inter',sans-serif;
    font-size:0.65rem;
    letter-spacing:4px;
    color:#87c9a8;
    margin-bottom:28px;
}


.poem-date{
    margin-top:8px;

    font-size:0.7rem;
    letter-spacing:1px;

    color:rgba(25, 107, 50, 0.45);
}



/* ===== 右侧漂浮文字 ===== */

/* =========================
   漂浮意象
========================= */

.blue-space{

    position:fixed;

    top:0;
    right:0;

    width:35vw;
    height:100vh;

    pointer-events:none;

    overflow:hidden;

    z-index:2;

}

.fragment{

    position:absolute;

    color:rgba(255, 255, 255, 0.507);

    font-family:
        "Noto Serif SC",
        serif;

    font-size:1.2rem;

    font-weight:400;

    letter-spacing:.25em;

    white-space:nowrap;

    user-select:none;

    writing-mode:vertical-rl;

    z-index:6;

    animation:
        fragmentFloat
        18s
        infinite
        ease-in-out
        alternate;

}

.fragment{

    color:rgba(255,255,255,.22);

    -webkit-text-stroke:
        .5px rgba(30, 126, 51, 0.25);

    text-shadow:
        0 0 3px rgba(255,255,255,.35);

}



/* 默认 */
.fragment{

    position:absolute;

    writing-mode:vertical-rl;

    font-size:1.1rem;

    opacity:.25;

}



/* 第一组：视觉锚点 */

.fragment:nth-child(1),
.fragment:nth-child(2),
.fragment:nth-child(7),
.fragment:nth-child(10){

    font-size:1.8rem;

    opacity:.45;

}


/* 第二组：普通意象 */

.fragment:nth-child(5),
.fragment:nth-child(8),
.fragment:nth-child(9){

    font-size:1.3rem;

}


/* 第三组：背景 */

.fragment:nth-child(3),
.fragment:nth-child(4),
.fragment:nth-child(6){

    font-size:.9rem;

    opacity:.18;

}

.fragment:nth-child(1){
    top:15%;
    left:20%;
}


.fragment:nth-child(2){
    top:20%;
    left:60%;
}


.fragment:nth-child(5){
    top:42%;
    left:35%;
}


.fragment:nth-child(7){
    bottom:25%;
    left:50%;
}


.fragment:nth-child(10){
    bottom:15%;
    left:75%;
}

.fragment:nth-child(3){
    top:35%;
    left:15%;
}


.fragment:nth-child(4){
    top:55%;
    left:30%;
}


.fragment:nth-child(6){
    top:25%;
    left:80%;
}


.fragment:nth-child(8){
    bottom:40%;
    left:20%;
}


.fragment:nth-child(9){
    bottom:30%;
    left:60%;
}



/* 漂浮 */

@keyframes fragmentFloat{

    from{

        transform:
            translate(0,0);

    }


    to{

        transform:
            translate(
                8px,
                -15px
            );

    }

}


/* ===== 左侧正文强化 ===== */

.poem-content{

    position:relative;

    z-index:5;

}


.poem-title{

    font-size:3.4rem;

    font-weight:500;

    letter-spacing:8px;

}


.title-line{

    width:220px;

    height:2px;

    background:#1f8b43;

    margin:8px 0 15px;

}



.poem-body{

    margin-top:55px;

}


.poem-stanza{

    margin-bottom:42px;

}


.poem-stanza p{

    font-size:1rem;

    line-height:1.9;

    letter-spacing:2px;

}



/* ===== 手机 ===== */

@media(max-width:768px){
    .poem-content{

        width:90%;

        margin:auto;

    }


    .poem-title{

        font-size:2.5rem;

    }

}

@media(max-width:768px){

    .fragment{

        font-size:1rem;

        opacity:.25;

    }

    .fragment:nth-child(1){
        top:18%;
        left:10%;
    }

    .fragment:nth-child(2){
        top:28%;
        left:75%;
    }

    .fragment:nth-child(3){
        top:40%;
        left:25%;
    }

    .fragment:nth-child(4){
        top:52%;
        left:82%;
    }

    .fragment:nth-child(5){
        top:60%;
        left:12%;
    }

    .fragment:nth-child(6){
        top:72%;
        left:65%;
    }

    .fragment:nth-child(7){
        top:80%;
        left:30%;
    }

    .fragment:nth-child(8){
        top:48%;
        left:55%;
    }

    .fragment:nth-child(9){
        top:35%;
        left:50%;
    }

    .fragment:nth-child(10){
        top:65%;
        left:88%;
    }

}

.poem-intro{

    margin-top:40px;
    margin-bottom:55px;

    color:rgba(27, 124, 87, 0.45);

    font-size:.8rem;

    letter-spacing:2px;

}


.poem-intro span{

    display:block;

    font-size:.65rem;

    letter-spacing:4px;

    margin-bottom:12px;

}


.poem-intro p{

    line-height:2;

}

.poem-content{
    position:relative;
    z-index:5;
}

.poem-navigation{

    width:100%;

    margin-top:20px;
    margin-bottom: 30px;
    padding-top:30px;

    border-top:
        1px solid rgba(45,50,180,.15);

    display:flex;
    justify-content:space-between;

    font-family:
        "Noto Serif SC",
        serif;

}



.poem-navigation a{

    text-decoration:none;

    color:#353535;

    display:flex;

    align-items:center;

    gap:20px;

    transition:.3s;

}



.poem-navigation a:hover{

    opacity:.65;

}



.poem-navigation small{

    display:block;

    font-size:.7rem;

    letter-spacing:.3em;

    opacity:.5;

    margin-bottom:8px;

}



.poem-navigation strong{

    font-size:1.2rem;

    font-weight:400;

}



.poem-navigation span{

    font-size:1.5rem;

}

@media(max-width:700px){

    .poem-navigation{

        flex-direction:column;

        gap:35px;

    }


    .poem-next{

        justify-content:flex-end;

    }

}