/* =========================================================
   PRETTY GARDEN
   ORIGINAL ART BOARD SKIN
========================================================= */

:root{
    --pga-bg:#fffaf7;
    --pga-paper:#fffdfb;
    --pga-ink:#4d403b;
    --pga-muted:#8b7770;
    --pga-pink:#ef7d98;
    --pga-mint:#bad8c0;
    --pga-line:#eadfd9;
    --pga-radius:28px;
    --pga-max:1480px;
}


/* =========================================================
   COMMON
========================================================= */

.pga{
    width:min(
        var(--pga-max),
        calc(100% - 80px)
    );

    margin:0 auto;

    color:var(--pga-ink);
}

.pga *,
.pga *::before,
.pga *::after{
    box-sizing:border-box;
}

.pga img{
    display:block;
    max-width:100%;
}

.pga a{
    color:inherit;
    text-decoration:none;
}

.pga-kicker{
    margin:0 0 12px;

    color:var(--pga-pink);

    font-size:.65rem;
    font-weight:800;
    letter-spacing:.17em;
}


/* =========================================================
   HERO
========================================================= */

.pga-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:40px;

    padding:96px 0 52px;

    border-bottom:1px solid var(--pga-line);
}

.pga-hero h1,
.pga-view-head h1,
.pga-write-head h1{
    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:500;

    letter-spacing:-.05em;
}

.pga-hero h1{
    font-size:clamp(
        3.2rem,
        6vw,
        6.2rem
    );

    line-height:.98;
}

.pga-intro{
    margin:18px 0 0;

    color:var(--pga-muted);

    font-size:.95rem;
}

.pga-count{
    padding-bottom:8px;

    color:var(--pga-muted);

    font-size:.65rem;
    letter-spacing:.16em;
}


/* =========================================================
   CATEGORY
========================================================= */

.pga-categories{
    display:flex;
    flex-wrap:wrap;

    gap:9px;

    padding:24px 0;
}

.pga-categories a{
    padding:8px 13px;

    border:1px solid var(--pga-line);
    border-radius:999px;

    font-size:.68rem;
    letter-spacing:.08em;
}

.pga-categories a.active{
    border-color:var(--pga-ink);

    background:var(--pga-ink);
    color:white;
}


/* =========================================================
   GRID
========================================================= */

.pga-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:54px 28px;

    padding:42px 0 80px;
}

.pga-thumb{
    position:relative;

    aspect-ratio:1 / 1;

    overflow:hidden;

    border-radius:var(--pga-radius);

    background:#f3eeea;
}

.pga-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .55s ease,
        filter .4s ease;
}

.pga-card:hover .pga-thumb img{
    transform:scale(1.025);
    filter:saturate(.94);
}


/* =========================================================
   CARD HOVER
========================================================= */

.pga-view-label{
    position:absolute;

    left:18px;
    bottom:18px;

    opacity:0;

    transform:translateY(6px);

    padding:8px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.9);

    font-size:.58rem;
    letter-spacing:.12em;

    transition:.25s;
}

.pga-card:hover .pga-view-label{
    opacity:1;
    transform:none;
}


/* =========================================================
   NO IMAGE
========================================================= */

.pga-no-image{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    height:100%;

    background:
        radial-gradient(
            circle at 30% 20%,
            #f9dfe4,
            transparent 36%
        ),
        radial-gradient(
            circle at 80% 20%,
            #dfeee2,
            transparent 34%
        ),
        #fffaf7;

    color:var(--pga-muted);
}

.pga-no-image span{
    font-family:Georgia,serif;
    font-size:1.5rem;
}

.pga-no-image b{
    margin-top:8px;

    font-size:.55rem;
    letter-spacing:.18em;
}


/* =========================================================
   CARD META
========================================================= */

.pga-card-meta{
    padding:16px 2px 0;
}

.pga-card-no{
    margin:0;

    color:var(--pga-pink);

    font-size:.58rem;
    font-weight:800;
    letter-spacing:.14em;
}

.pga-card-meta h2{
    margin:5px 0 6px;

    font-size:1.12rem;
    line-height:1.35;
    font-weight:700;
}

.pga-spec{
    margin:0;

    color:var(--pga-muted);

    font-size:.76rem;
}


/* =========================================================
   EMPTY
========================================================= */

.pga-empty{
    padding:120px 20px;

    text-align:center;
}

.pga-empty span{
    color:var(--pga-pink);

    font-size:2rem;
}

.pga-empty h2{
    margin:14px 0 6px;

    font-family:Georgia,serif;
    font-size:2rem;
    font-weight:500;
}

.pga-empty p{
    color:var(--pga-muted);
}


/* =========================================================
   LIST FOOTER
========================================================= */

.pga-list-footer{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px 0 100px;
}

.pga-pages .pg_page,
.pga-pages .pg_current{
    display:inline-grid;
    place-items:center;

    min-width:34px;
    height:34px;

    margin:0 2px;

    border-radius:50%;

    font-size:.72rem;
}

.pga-pages .pg_current{
    background:var(--pga-ink);
    color:white;
}

.pga-admin-btn{
    position:absolute;
    right:0;

    padding:11px 17px;

    border-radius:999px;

    background:var(--pga-pink);
    color:#fff;

    font-size:.72rem;
    font-weight:800;
}


/* =========================================================
   VIEW
========================================================= */

.pga-view{
    padding:54px 0 110px;
}

.pga-back{
    display:inline-block;

    margin-bottom:54px;

    color:var(--pga-muted);

    font-size:.72rem;
}


/* =========================================================
   VIEW HEADER
========================================================= */

.pga-view-head{
    display:grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(300px,.8fr);

    gap:64px;

    align-items:end;

    margin-bottom:48px;
}


/* =========================================================
   ADAPTIVE TITLE
========================================================= */

.pga-view-title-wrap{
    min-width:0;
}

.pg-main .pga-view-head .pga-view-title{
    margin:0;

    color:var(--pga-ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:clamp(
        3.2rem,
        5vw,
        5.4rem
    );

    line-height:1.05;

    font-weight:500;

    letter-spacing:-.055em;

    word-break:keep-all;

    overflow-wrap:break-word;
}


/* 变 力格 */

.pg-main .pga-view-head .pga-view-title.is-long{
    font-size:clamp(
        2.8rem,
        4.2vw,
        4.6rem
    );

    line-height:1.08;
}


/* 酒林 变 力格 */

.pg-main .pga-view-head .pga-view-title.is-xlong{
    font-size:clamp(
        2.35rem,
        3.6vw,
        3.9rem
    );

    line-height:1.1;
}


/* =========================================================
   ART INFO
========================================================= */

.pga-art-info{
    margin:0;

    border-top:1px solid var(--pga-line);
}

.pga-art-info div{
    display:grid;

    grid-template-columns:
        90px 1fr;

    gap:18px;

    padding:12px 0;

    border-bottom:1px solid var(--pga-line);
}

.pga-art-info dt{
    color:var(--pga-pink);

    font-size:.58rem;
    font-weight:800;
    letter-spacing:.14em;
}

.pga-art-info dd{
    margin:0;

    font-size:.82rem;
}


/* =========================================================
   MAIN ART
========================================================= */

.pga-main-art{
    display:flex;
    justify-content:center;

    padding:42px;

    border-radius:34px;

    background:var(--pga-paper);
}

.pga-main-art img{
    width:auto;

    max-width:100%;
    max-height:82vh;

    object-fit:contain;
}


/* =========================================================
   STORY
========================================================= */

.pga-view-body{
    display:grid;

    grid-template-columns:
        .65fr 1.35fr;

    gap:72px;

    padding:86px 0;

    border-bottom:1px solid var(--pga-line);
}

.pga-story-title h2{
    margin:0;

    font-family:Georgia,serif;

    font-size:clamp(
        2.2rem,
        3.5vw,
        4rem
    );

    font-weight:500;
}

.pga-content{
    color:#675952;

    font-size:1rem;
    line-height:1.9;
}

.pga-content img{
    height:auto;

    margin:28px auto;

    border-radius:20px;
}


/* =========================================================
   DETAILS
========================================================= */

.pga-details{
    padding:80px 0;
}

.pga-detail-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:22px;
}

.pga-detail-grid figure{
    margin:0;

    overflow:hidden;

    border-radius:24px;

    background:var(--pga-paper);
}

.pga-detail-grid img{
    width:100%;
    height:100%;

    object-fit:cover;
}


/* =========================================================
   VIEW ACTIONS
========================================================= */

.pga-view-actions{
    display:flex;
    justify-content:flex-end;

    gap:8px;

    padding-top:20px;
}

.pga-view-actions a{
    padding:10px 15px;

    border:1px solid var(--pga-line);
    border-radius:999px;

    font-size:.7rem;
}

.pga-view-actions .accent{
    border-color:var(--pga-pink);

    background:var(--pga-pink);
    color:white;
}


/* =========================================================
   WRITE
========================================================= */

.pga-write{
    max-width:980px;

    padding:72px 0 110px;
}

.pga-write-head{
    margin-bottom:42px;

    padding-bottom:38px;

    border-bottom:1px solid var(--pga-line);
}

.pga-write-head h1{
    font-size:clamp(
        2.8rem,
        5vw,
        4.8rem
    );
}

.pga-write-head > p:last-child{
    color:var(--pga-muted);
}


/* =========================================================
   WRITE FIELD
========================================================= */

.pga-field{
    margin-bottom:24px;
}

.pga-field > label{
    display:block;

    margin-bottom:9px;

    color:var(--pga-muted);

    font-size:.7rem;
    font-weight:800;
    letter-spacing:.08em;
}

.pga-field input[type="text"],
.pga-field select{
    width:100%;
    height:48px;

    padding:0 14px;

    border:1px solid var(--pga-line);
    border-radius:14px;

    background:white;
    color:var(--pga-ink);

    font-size:.9rem;
}

.pga-meta-fields{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:0 18px;
}

.pga-editor-box{
    overflow:hidden;

    border-radius:14px;
}


/* =========================================================
   FILE
========================================================= */

.pga-file-field{
    padding:18px;

    border:1px solid var(--pga-line);
    border-radius:16px;

    background:var(--pga-paper);
}

.pga-file-current{
    display:flex;
    justify-content:space-between;

    gap:20px;

    margin-top:9px;

    color:var(--pga-muted);

    font-size:.72rem;
}


/* =========================================================
   WRITE ACTIONS
========================================================= */

.pga-write-actions{
    display:flex;
    justify-content:flex-end;

    gap:8px;

    padding-top:24px;
}

.pga-write-actions a,
.pga-write-actions button{
    padding:12px 20px;

    border:1px solid var(--pga-line);
    border-radius:999px;

    background:white;
    color:var(--pga-ink);

    font-size:.75rem;
    font-weight:800;

    cursor:pointer;
}

.pga-write-actions button{
    border-color:var(--pga-pink);

    background:var(--pga-pink);
    color:white;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:960px){

    .pga{
        width:min(
            100% - 40px,
            var(--pga-max)
        );
    }

    .pga-hero{
        padding-top:64px;
    }

    .pga-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:42px 18px;
    }

    .pga-view-head,
    .pga-view-body{
        grid-template-columns:1fr;

        gap:32px;
    }

    .pga-main-art{
        padding:20px;
    }


    /* adaptive title */

    .pg-main .pga-view-head .pga-view-title{
        font-size:clamp(
            2.8rem,
            6vw,
            4.5rem
        );
    }

    .pg-main .pga-view-head .pga-view-title.is-long{
        font-size:clamp(
            2.5rem,
            5.4vw,
            4rem
        );
    }

    .pg-main .pga-view-head .pga-view-title.is-xlong{
        font-size:clamp(
            2.2rem,
            4.8vw,
            3.5rem
        );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px){

    .pga{
        width:calc(100% - 28px);
    }

    .pga-hero{
        display:block;

        padding:48px 0 30px;
    }

    .pga-count{
        margin-top:24px;
    }

    .pga-grid{
        grid-template-columns:1fr;

        gap:38px;

        padding-top:26px;
    }

    .pga-thumb{
        border-radius:22px;
    }

    .pga-admin-btn{
        position:static;

        margin-left:12px;
    }

    .pga-list-footer{
        justify-content:space-between;
    }

    .pga-view{
        padding-top:36px;
    }

    .pga-back{
        margin-bottom:34px;
    }


    /* title */

    .pg-main .pga-view-head .pga-view-title,
    .pg-main .pga-view-head .pga-view-title.is-long,
    .pg-main .pga-view-head .pga-view-title.is-xlong{
        font-size:clamp(
            2rem,
            10vw,
            3rem
        );

        line-height:1.12;

        letter-spacing:-.045em;
    }


    .pga-main-art{
        padding:12px;

        border-radius:22px;
    }

    .pga-view-body{
        padding:56px 0;
    }

    .pga-detail-grid{
        grid-template-columns:1fr;
    }

    .pga-meta-fields{
        grid-template-columns:1fr;
    }

}