/* =========================================================
   DIGITAL PHOTOBOOK MAGAZINE
   EDITORIAL MAGAZINE V2
   PREMIUM / NATURAL / IMAGE FIRST
========================================================= */


/* =========================================================
   01. RESET
========================================================= */

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{

    margin:0;
    padding:0;

    background:#111;

    color:#222;

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-weight:400;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

img{

    max-width:100%;

    height:auto;

}

a{
    color:inherit;
}


/* =========================================================
   02. WRAPPER
========================================================= */

.magazine-wrapper{

    width:100%;

    overflow:hidden;

    background:#111;

}


/* =========================================================
   03. COVER
   EDITORIAL STYLE
========================================================= */

.magazine-cover{

    position:relative;

    width:100%;

    height:100svh;

    min-height:650px;

    overflow:hidden;

    display:flex;

    align-items:center;

    color:#fff;

    background:#222;

}


/* =========================================================
   COVER IMAGE
========================================================= */

.magazine-cover-image{

    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

}

.magazine-cover-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    /*
       KHÔNG brightness
       KHÔNG contrast mạnh
       KHÔNG làm ảnh lóa
    */

    filter:
        saturate(1.01)
        contrast(1.01);

}


/* =========================================================
   COVER COLOR
   CAM HỒNG RẤT NHẸ
========================================================= */

.magazine-cover::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:

        linear-gradient(
            135deg,
            rgba(232,116,91,.10),
            rgba(245,160,135,.035) 45%,
            rgba(210,95,80,.07) 100%
        );

}


/* =========================================================
   COVER TEXT GRADIENT
   CHỈ TỐI Ở KHU VỰC CHỮ
========================================================= */

.magazine-cover-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse 65% 45% at 23% 58%,
            rgba(20,10,12,.62) 0%,
            rgba(25,12,15,.30) 42%,
            transparent 75%
        ),

        linear-gradient(
            90deg,
            rgba(15,8,10,.40) 0%,
            rgba(15,8,10,.12) 38%,
            transparent 68%
        ),

        linear-gradient(
            to top,
            rgba(10,7,8,.20),
            transparent 40%
        );

}


/* =========================================================
   COVER SOFT SKIN LIGHT
   RẤT NHẸ - KHÔNG LÀM LÓA
========================================================= */

.magazine-cover-image::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse 28% 35% at 48% 38%,
            rgba(255,205,185,.06),
            transparent 75%
        );

}


/* =========================================================
   COVER CONTENT
========================================================= */

.magazine-cover-content{

    position:relative;

    z-index:5;

    width:100%;

    padding:

        0
        7vw;

    transform:translateY(-2vh);

}


/* =========================================================
   COVER LABEL
========================================================= */

.magazine-cover-label{

    display:block;

    margin-bottom:22px;

    color:rgba(255,248,244,.92);

    font-size:10px;

    font-weight:500;

    letter-spacing:5px;

    line-height:1.5;

    text-transform:uppercase;

    text-shadow:
        0 2px 12px rgba(0,0,0,.60);

}


/* =========================================================
   COVER TITLE
========================================================= */

.magazine-cover-content h1{

    margin:0;

    max-width:900px;

    color:#fffaf7;

    font-family:

        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:

        clamp(
            52px,
            7vw,
            105px
        );

    font-weight:500;

    line-height:.94;

    letter-spacing:-2px;

    text-shadow:

        0 2px 5px rgba(0,0,0,.70),

        0 8px 25px rgba(0,0,0,.45);

}


/* =========================================================
   COVER DESCRIPTION
========================================================= */

.magazine-cover-description{

    max-width:470px;

    margin:

        25px 0 0;

    color:rgba(255,248,244,.92);

    font-family:
        "Inter",
        sans-serif;

    font-size:14px;

    font-weight:400;

    line-height:1.75;

    text-shadow:

        0 2px 10px rgba(0,0,0,.65);

}


/* =========================================================
   COVER META
========================================================= */

.magazine-cover-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-top:23px;

    color:rgba(255,247,243,.82);

    font-size:9px;

    font-weight:500;

    letter-spacing:3px;

    line-height:1.5;

    text-transform:uppercase;

    text-shadow:

        0 2px 8px rgba(0,0,0,.70);

}


/* =========================================================
   COVER BUTTON
========================================================= */

.magazine-cover-button{

    display:inline-flex;

    align-items:center;

    gap:20px;

    margin-top:30px;

    color:#fff;

    text-decoration:none;

    font-size:10px;

    font-weight:500;

    letter-spacing:3px;

    text-transform:uppercase;

    text-shadow:

        0 2px 10px rgba(0,0,0,.70);

    transition:

        opacity .3s ease,
        transform .3s ease;

}

.magazine-cover-button:hover{

    opacity:.75;

    transform:translateX(4px);

}

.magazine-cover-button strong{

    font-size:18px;

    font-weight:300;

}


/* =========================================================
   COVER BOTTOM
========================================================= */

.magazine-cover-bottom{

    position:absolute;

    right:7vw;

    bottom:35px;

    z-index:5;

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

    font-size:8px;

    letter-spacing:4px;

    text-transform:uppercase;

}


/* =========================================================
   04. STORY
========================================================= */

.magazine-story{

    width:100%;

}


/* =========================================================
   05. COMMON PAGE
========================================================= */

.magazine-page{

    position:relative;

    min-height:100svh;

    overflow:hidden;

}


/* =========================================================
   PAGE NUMBER
========================================================= */

.magazine-page-number{

    position:absolute;

    top:35px;

    left:7vw;

    z-index:10;

    color:#999;

    font-size:9px;

    font-weight:500;

    letter-spacing:4px;

}


/* =========================================================
   06. EDITORIAL PAGE
========================================================= */

.magazine-page-editorial{

    min-height:100svh;

    display:grid;

    grid-template-columns:
        1.12fr
        .88fr;

    gap:6vw;

    align-items:center;

    padding:

        90px
        7vw;

    background:#f7f4ef;

}




/* =========================================================
   SINGLE IMAGE
========================================================= */


/* =========================================================
   SINGLE IMAGE - DESKTOP
   ẢNH DỌC HIỂN THỊ LỚN HƠN
========================================================= */

.magazine-single-image{

    width:100%;

    height:80vh;

    overflow:hidden;

    background:transparent;

}


.magazine-single-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;
    object-position:center;

    transform:scale(1.2);

}

/* =========================================================
   EDITORIAL CONTENT
========================================================= */

.magazine-single-content{

    max-width:600px;

}


.magazine-single-label{

    margin-bottom:25px;

    color:#a18d87;

    font-size:9px;

    font-weight:500;

    letter-spacing:4px;

    text-transform:uppercase;

}


.magazine-single-content h4,
.magazine-page-content h4{

    margin:

        0 0 27px;

    color:#282323;

    font-family:

        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:

        clamp(
            42px,
            5vw,
            74px
        );

    font-weight:500;

    line-height:.98;

    letter-spacing:-1px;

}


.magazine-single-content p,
.magazine-page-content p{

    margin:

        0 0 20px;

    color:#57504e;

    font-family:
        "Inter",
        sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:1.9;

}


/* =========================================================
   TEXT FORMATTING
========================================================= */

.magazine-single-content strong,
.magazine-page-content strong{

    color:#332d2b;

    font-weight:700;

}


.magazine-single-content ul,
.magazine-page-content ul{

    margin:

        20px 0;

    padding-left:22px;

}


.magazine-single-content li,
.magazine-page-content li{

    margin-bottom:10px;

    color:#57504e;

    font-size:16px;

    line-height:1.8;

}


.magazine-single-content blockquote,
.magazine-page-content blockquote{

    margin:

        30px 0;

    padding:

        5px 0
        5px 25px;

    border-left:

        2px solid #d69a86;

    color:#786966;

    font-family:

        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:25px;

    font-weight:500;

    line-height:1.45;

}


/* =========================================================
   07. GALLERY 2 IMAGES
========================================================= */

.magazine-page-gallery{

    min-height:100svh;

    padding:

        90px
        7vw;

    background:#f7f4ef;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.magazine-page-gallery-images{

    width:100%;

    display:grid;

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

    gap:35px;

}


.magazine-gallery-image{

    width:100%;

    aspect-ratio:4 / 5;

    overflow:hidden;

    background:#eee;

}


.magazine-gallery-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .8s cubic-bezier(.2,.6,.2,1);

}


.magazine-gallery-image:hover img{

    transform:scale(1.025);

}


.magazine-page-content{

    width:100%;

    max-width:850px;

    margin:

        45px auto 0;

    text-align:center;

}


.magazine-page-index{

    margin-bottom:23px;

    color:#a18d87;

    font-size:9px;

    font-weight:500;

    letter-spacing:4px;

    text-transform:uppercase;

}


/* =========================================================
   08. FULL IMAGE PAGE
========================================================= */

.magazine-page-full{

    position:relative;

    min-height:100svh;

    display:flex;

    align-items:flex-end;

    background:#111;

    color:#fff;

}


.magazine-page-image{

    position:absolute;

    inset:0;

}


.magazine-page-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}


/* =========================================================
   FULL IMAGE OVERLAY
   NHẸ HƠN BẢN CŨ
========================================================= */

.magazine-page-full-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

        linear-gradient(
            to top,
            rgba(8,7,7,.72),
            rgba(10,8,8,.18) 45%,
            transparent 75%
        );

}


.magazine-page-full .magazine-page-content{

    position:relative;

    z-index:3;

    max-width:900px;

    margin:0;

    padding:

        100px
        7vw;

    text-align:left;

}


.magazine-page-full h4{

    color:#fff;

    text-shadow:
        0 3px 18px rgba(0,0,0,.55);

}


.magazine-page-full p{

    color:#eee;

    text-shadow:
        0 2px 12px rgba(0,0,0,.50);

}


/* =========================================================
   09. SCROLL
========================================================= */

.magazine-page-scroll{

    position:absolute;

    left:50%;

    bottom:32px;

    z-index:5;

    transform:translateX(-50%);

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

    font-size:9px;

    letter-spacing:4px;

    text-transform:uppercase;

}


.magazine-page-scroll span{

    display:block;

    margin-top:10px;

    text-align:center;

    font-size:15px;

}


/* =========================================================
   10. MOBILE
========================================================= */

@media (max-width:768px){


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

    .magazine-cover{

        height:100svh;

        min-height:620px;

        align-items:flex-end;

    }


    .magazine-cover-image img{

        object-position:center;

        /*
           Giữ ảnh tự nhiên.
           Không làm sáng ảnh.
        */

        filter:
            saturate(1.01)
            contrast(1.01);

    }


    /*
       Mobile:
       chỉ làm tối khu vực chữ
    */

    .magazine-cover-overlay{

        background:

            radial-gradient(
                ellipse 90% 42% at 25% 68%,
                rgba(15,8,10,.72),
                rgba(15,8,10,.28) 48%,
                transparent 78%
            ),

            linear-gradient(
                to top,
                rgba(10,7,8,.34),
                transparent 55%
            );

    }


    .magazine-cover-content{

        padding:

            0
            20px
            48px;

        transform:none;

    }


    .magazine-cover-label{

        margin-bottom:17px;

        font-size:8px;

        letter-spacing:3.5px;

    }


    .magazine-cover-content h1{

        max-width:92%;

        font-size:

            clamp(
                42px,
                12vw,
                60px
            );

        line-height:.98;

        letter-spacing:-1px;

        text-shadow:

            0 2px 4px rgba(0,0,0,.75),

            0 7px 22px rgba(0,0,0,.60);

    }


    .magazine-cover-description{

        max-width:92%;

        margin-top:17px;

        font-size:13px;

        line-height:1.65;

        color:rgba(255,248,244,.90);

        text-shadow:

            0 2px 9px rgba(0,0,0,.75);

    }


    .magazine-cover-meta{

        gap:8px;

        margin-top:17px;

        font-size:7.5px;

        letter-spacing:2px;

    }


    .magazine-cover-button{

        margin-top:23px;

        font-size:8px;

        letter-spacing:2.5px;

    }


    .magazine-cover-button strong{

        font-size:16px;

    }


    .magazine-cover-bottom{

        display:none;

    }


    /* =====================================================
       COMMON PAGE MOBILE
    ===================================================== */

    .magazine-page{

        min-height:auto;

        overflow:hidden;

    }


    .magazine-page-number{

        top:17px;

        left:18px;

        font-size:8px;

        letter-spacing:3px;

    }


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

    .magazine-page-editorial{

        display:flex;

        flex-direction:column;

        gap:30px;

        min-height:auto;

        padding:

            58px
            18px
            68px;

    }


    /* =====================================================
       SINGLE IMAGE MOBILE
    ===================================================== */

.magazine-page-editorial .magazine-single-image{

    width:100%;

    height:auto;

    aspect-ratio:auto;

    overflow:hidden;

    background:transparent;

}

.magazine-page-editorial .magazine-single-image img{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

}


    /* =====================================================
       EDITORIAL CONTENT MOBILE
    ===================================================== */

    .magazine-single-content{

        width:100%;

        max-width:none;

    }


    .magazine-single-label{

        margin-bottom:17px;

        font-size:8px;

        letter-spacing:3px;

    }


    .magazine-single-content h4,
    .magazine-page-content h4{

        margin-bottom:19px;

        font-size:

            clamp(
                31px,
                9vw,
                43px
            );

        line-height:1;

        letter-spacing:-.5px;

    }


    .magazine-single-content p,
    .magazine-page-content p{

        font-size:14px;

        line-height:1.8;

    }


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

    .magazine-single-content strong,
    .magazine-page-content strong{

        font-weight:700;

    }


    .magazine-single-content ul,
    .magazine-page-content ul{

        padding-left:20px;

    }


    .magazine-single-content li,
    .magazine-page-content li{

        font-size:14px;

        line-height:1.75;

    }


    .magazine-single-content blockquote,
    .magazine-page-content blockquote{

        margin:25px 0;

        padding-left:17px;

        font-size:21px;

        line-height:1.45;

    }


    /* =====================================================
       GALLERY MOBILE
       2 ẢNH CHỒNG EDITORIAL
    ===================================================== */

    .magazine-page-gallery{

        min-height:auto;

        padding:

            58px
            18px
            68px;

    }


    .magazine-page-gallery-images{

        position:relative;

        display:block;

        width:100%;

        height:auto;

        padding-bottom:20px;

    }


    /* =====================================================
       IMAGE 01
    ===================================================== */

    .magazine-gallery-image{

        width:89%;

        aspect-ratio:4 / 5;

        overflow:hidden;

        background:#eee;

    }


    .magazine-gallery-image:nth-child(1){

        margin-left:0;

    }


    /* =====================================================
       IMAGE 02
       CHỒNG NHẸ
    ===================================================== */

    .magazine-gallery-image:nth-child(2){

        position:relative;

        z-index:2;

        width:80%;

        margin-top:-65px;

        margin-left:auto;

        box-shadow:

            0 18px 40px
            rgba(0,0,0,.14);

    }


    .magazine-gallery-image img{

        width:100%;

        height:100%;

        object-fit:cover;

    }


    /* =====================================================
       GALLERY CONTENT
    ===================================================== */

    .magazine-page-content{

        width:100%;

        max-width:none;

        margin-top:25px;

        text-align:center;

    }


    .magazine-page-index{

        margin-bottom:16px;

        font-size:8px;

        letter-spacing:3px;

    }


    /* =====================================================
       FULL IMAGE MOBILE
    ===================================================== */

    .magazine-page-full{

        min-height:100svh;

    }


    .magazine-page-full .magazine-page-image{

        position:absolute;

        inset:0;

    }


    .magazine-page-full
    .magazine-page-image img{

        width:100%;

        height:100%;

        object-fit:cover;

    }


    .magazine-page-full-overlay{

        background:

            linear-gradient(
                to top,
                rgba(5,5,5,.72),
                rgba(5,5,5,.14) 48%,
                transparent 75%
            );

    }


    .magazine-page-full .magazine-page-content{

        width:100%;

        padding:

            80px
            20px
            55px;

    }


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

    .magazine-page-scroll{

        display:none;

    }

}


/* =========================================================
   11. SMALL MOBILE
========================================================= */

@media (max-width:420px){

    .magazine-cover-content{

        padding-left:18px;
        padding-right:18px;
        padding-bottom:42px;

    }


    .magazine-cover-content h1{

        max-width:94%;

        font-size:

            clamp(
                39px,
                11.5vw,
                54px
            );

    }


    .magazine-cover-description{

        max-width:95%;

        font-size:12.5px;

    }


    .magazine-page-editorial{

        padding-left:16px;
        padding-right:16px;

    }


    .magazine-page-gallery{

        padding-left:16px;
        padding-right:16px;

    }


    .magazine-gallery-image:nth-child(2){

        margin-top:-55px;

    }

}


/* =========================================================
   12. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}