/*==========================================================
    GALLERY PAGE
    Ryokan Website
==========================================================*/


/*==========================================================
    COLOR PALETTE
==========================================================*/

:root{

    --gallery-charcoal:#2E2A24;

    --gallery-gold:#A37738;
    --gallery-sand:#A8A27E;
    --gallery-bronze:#7E6232;

    --gallery-paper:#F8F5EE;
    --gallery-cream:#F3EFE7;

    --gallery-ink:#5C2123;

    --gallery-light:#FDFBF6;

}


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

.gallery-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#262119;

    color:#fff;

}

.gallery-hero .hero-image{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:

        brightness(.62)
        saturate(.86);

}

.gallery-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(72,54,27,.38),

            rgba(28,23,18,.78)

        );

}

.light-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 18% 24%,
        rgba(255,232,184,.18),
        transparent 34%),

        radial-gradient(circle at 72% 28%,
        rgba(255,222,164,.12),
        transparent 38%),

        radial-gradient(circle at 60% 82%,
        rgba(255,215,148,.10),
        transparent 40%);

    mix-blend-mode:screen;

    animation:galleryGlow 16s ease-in-out infinite;

}

@keyframes galleryGlow{

    0%{

        opacity:.45;

        transform:translateY(0);

    }

    50%{

        opacity:.85;

        transform:translateY(-18px);

    }

    100%{

        opacity:.45;

        transform:translateY(0);

    }

}


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

.gallery-hero .container{

    position:relative;

    z-index:5;

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:760px;

}

.gallery-hero h1{

    margin:1.5rem 0;

    color:#fff;

    font-size:clamp(4.8rem,8vw,7.5rem);

    line-height:.92;

}

.gallery-hero p{

    max-width:620px;

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

    font-size:1.05rem;

}


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

.gallery-btn{

    margin-top:3rem;

    background:var(--gallery-gold);

    color:#fff;

    border:none;

    transition:.35s ease;

}

.gallery-btn:hover{

    background:#ba8942;

    transform:translateY(-4px);

}


/*==========================================================
    HANKO
==========================================================*/

.gallery-hanko{

    position:absolute;

    right:3.5%;

    bottom:8%;

    width:150px;
    height:150px;

    border:8px solid rgba(205,165,87,.88);

    background:rgba(205,165,87,.08);

    color:#d5b06a;

    backdrop-filter:blur(10px);

}


/*==========================================================
    JAPANESE TYPOGRAPHY
==========================================================*/

.vertical-jp{

    position:absolute;

    writing-mode:vertical-rl;

    text-orientation:upright;

    white-space:nowrap;

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

    line-height:1.1;

    letter-spacing:.2rem;

    user-select:none;

    pointer-events:none;

    z-index:1;

}


/* HERO */

.hero-jp{

    top:50%;

    right:2.8rem;

    transform:translateY(-50%);

    font-size:11rem;

    color:rgba(226,191,115,.72);

}


/* INTRO */

.intro-jp{

    left:-4rem;

    top:4rem;

    font-size:10rem;

    color:rgba(168,162,126,.52);

}


/*==========================================================
    GALLERY INTRO
==========================================================*/

.gallery-intro{

    position:relative;

    padding:9rem 0;

    overflow:hidden;

    background:var(--gallery-paper);

}


/*==========================================================
    PAPER TEXTURE
==========================================================*/

.paper-background{

    position:relative;

}

.paper-background::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.04;

    background-image:

        radial-gradient(

            circle,

            rgba(126,98,50,.45) 1px,

            transparent 1px

        );

    background-size:24px 24px;

}


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

.gallery-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}


/*==========================================================
    INTRO CONTENT
==========================================================*/

.gallery-content{

    position:relative;

    z-index:2;

}

.gallery-content .brand-tag{

    color:var(--gallery-gold);

}

.gallery-content h2{

    margin:1.5rem 0 2rem;

    color:var(--gallery-charcoal);

}

.gallery-content p{

    margin-bottom:1.8rem;

    color:#5d5a55;

    line-height:1.9;

}


/* decorative accent */

.section-accent{

    width:80px;

    height:3px;

    margin:2rem 0;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            var(--gallery-gold),

            var(--gallery-sand)

        );

}


/*==========================================================
    INTRO IMAGE
==========================================================*/

.gallery-image{

    position:relative;

    overflow:hidden;

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

    box-shadow:var(--shadow-lg);

}

.gallery-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.gallery-image:hover img{

    transform:scale(1.05);

    filter:brightness(.98);

}

.gallery-image::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.08)

        );

}
/*==========================================================
    CURATED COLLECTIONS
==========================================================*/

.collections-intro{

    position:relative;

    overflow:hidden;

    padding:8rem 0;

    background:

        linear-gradient(

            180deg,

            #fdfbf7,

            #f7f2ea

        );

}

.collections-intro::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-150px;

    top:-80px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(163,119,56,.10),

            transparent 70%

        );

    filter:blur(40px);

    pointer-events:none;

}



/*==========================================================
    SEASONAL COLLECTIONS
==========================================================*/

.season-gallery{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:

        linear-gradient(

            180deg,

            #f6f2ea,

            #efe8dc

        );

}

.season-gallery::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    left:-180px;

    bottom:-160px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(168,162,126,.16),

            transparent 72%

        );

    filter:blur(55px);

}



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

.season-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    grid-template-rows:330px 330px;

    gap:2rem;

    margin-top:4rem;

}

.season-card{

    position:relative;

    overflow:hidden;

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

    box-shadow:var(--shadow-md);

    cursor:pointer;

}

.season-card.large{

    grid-row:span 2;

}



/*==========================================================
    SEASON IMAGE
==========================================================*/

.season-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.season-card:hover img{

    transform:scale(1.08);

    filter:brightness(.84);

}



/*==========================================================
    SEASON OVERLAY
==========================================================*/

.season-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:2.2rem;

    background:

        linear-gradient(

            transparent,

            rgba(28,22,16,.74)

        );

}

.season-overlay h3{

    color:#fff;

    margin:1rem 0;

}

.season-overlay p{

    max-width:360px;

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

    line-height:1.8;

}



/*==========================================================
    ARCHITECTURE
==========================================================*/

.architecture-section{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:var(--gallery-paper);

}

.architecture-section::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    right:-120px;

    top:120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(163,119,56,.10),

            transparent 70%

        );

    filter:blur(35px);

}



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

.architecture-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}



/*==========================================================
    ARCHITECTURE IMAGE
==========================================================*/

.architecture-image{

    position:relative;

    overflow:hidden;

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

    box-shadow:var(--shadow-lg);

}

.architecture-image img{

    width:100%;

    height:760px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.architecture-image:hover img{

    transform:scale(1.05);

    filter:brightness(.98);

}

.architecture-image::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.08)

        );

}



/*==========================================================
    ARCHITECTURE CONTENT
==========================================================*/

.architecture-content{

    position:relative;

    max-width:560px;

    z-index:2;

}

.architecture-content .brand-tag{

    color:var(--gallery-gold);

}

.architecture-content h2{

    margin:1.5rem 0 2rem;

    color:var(--gallery-charcoal);

}

.architecture-content p{

    color:#666;

    line-height:1.85;

    margin-bottom:1.8rem;

}



/*==========================================================
    JAPANESE TYPOGRAPHY
==========================================================*/

.architecture-jp{

    left:-4rem;

    top:5rem;

    font-size:11rem;

    color:rgba(126,98,50,.42);

}



/*==========================================================
    MOMENTS GALLERY
==========================================================*/

.moments-gallery{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:

        linear-gradient(

            180deg,

            #faf7f1,

            #f3ede4

        );

}

.moments-gallery::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-140px;

    top:-120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(163,119,56,.10),

            transparent 72%

        );

    filter:blur(40px);

}



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

.moments-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.moment-card{

    position:relative;

    overflow:hidden;

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

    box-shadow:var(--shadow-md);

    cursor:pointer;

}

.moment-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.moment-card:hover img{

    transform:scale(1.08);

    filter:brightness(.86);

}

.moment-card.wide{

    grid-column:span 3;

}

.moment-card.wide img{

    height:420px;

}
/*==========================================================
    GALLERY PHILOSOPHY
==========================================================*/

.gallery-philosophy{

    position:relative;

    overflow:hidden;

    padding:10rem 0;

    background:

        linear-gradient(

            135deg,

            #fbf8f3,

            #efe8dc

        );

}

.philosophy-content{

    position:relative;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.philosophy-content blockquote{

    position:relative;

    z-index:2;

    font-family:var(--font-heading);

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

    line-height:1.3;

    font-style:italic;

    color:var(--gallery-charcoal);

}

.philosophy-content span{

    display:block;

    margin-top:2rem;

    color:var(--gallery-gold);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.85rem;

}

.quote-jp{

    left:50%;

    top:-2rem;

    transform:translateX(-50%);

    font-size:12rem;

    color:rgba(163,119,56,.18);

}

.gallery-philosophy::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1px solid rgba(163,119,56,.15);

    animation:galleryRipple 8s linear infinite;

}

.gallery-philosophy::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1px solid rgba(168,162,126,.15);

    animation:galleryRipple 8s linear infinite 2s;

}

@keyframes galleryRipple{

    0%{

        transform:translate(-50%,-50%) scale(.75);

        opacity:.45;

    }

    100%{

        transform:translate(-50%,-50%) scale(1.45);

        opacity:0;

    }

}



/*==========================================================
    GALLERY CTA
==========================================================*/

.gallery-cta{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:10rem 0;

    color:#fff;

    background:

        linear-gradient(

            rgba(40,30,18,.70),

            rgba(40,30,18,.70)

        ),

        url("../images/image66.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.gallery-cta::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at 25% 30%,

            rgba(255,219,140,.10),

            transparent 35%

        ),

        radial-gradient(

            circle at 78% 72%,

            rgba(255,214,122,.10),

            transparent 45%

        );

    animation:galleryGlow 18s ease-in-out infinite;

}

.cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

}

.cta-content h2{

    color:#fff;

    margin:1.5rem 0 2rem;

}

.cta-content p{

    max-width:640px;

    margin:0 auto 2.5rem;

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

}

.gallery-cta .hero-buttons{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    flex-wrap:wrap;

}

.gallery-cta .btn-secondary{

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

    border:1px solid rgba(255,255,255,.20);

    backdrop-filter:blur(12px);

    color:#fff;

}

.gallery-cta .btn-secondary:hover{

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

}



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

.site-footer{

    background:#2c2721;

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

}

.site-footer h3,

.site-footer h4{

    color:#fff;

}

.site-footer a{

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

    transition:.3s ease;

}

.site-footer a:hover{

    color:var(--gallery-gold);

    padding-left:.35rem;

}

.footer-bottom{

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

}



/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .gallery-grid,

    .architecture-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .gallery-image,

    .architecture-image{

        order:-1;

    }

    .season-grid{

        grid-template-columns:1fr;

        grid-template-rows:auto;

    }

    .season-card.large{

        grid-row:auto;

    }

    .season-card{

        height:340px;

    }

    .moments-grid{

        grid-template-columns:1fr;

    }

    .moment-card.wide{

        grid-column:auto;

    }

    .moment-card img,

    .moment-card.wide img{

        height:340px;

    }

}

@media(max-width:768px){

    .gallery-intro,

    .collections-intro,

    .season-gallery,

    .architecture-section,

    .moments-gallery,

    .gallery-philosophy,

    .gallery-cta{

        padding:6rem 0;

    }

    .gallery-image img,

    .architecture-image img{

        height:420px;

    }

    .season-card,

    .moment-card img,

    .moment-card.wide img{

        height:260px;

    }

    .gallery-hanko{

        display:none;

    }

    .gallery-cta{

        background-attachment:scroll;

    }

    .gallery-cta .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .gallery-btn,

    .gallery-cta .btn-secondary{

        width:100%;

        max-width:320px;

    }

}

@media(max-width:480px){

    .gallery-hero h1{

        font-size:3rem;

    }

    .gallery-image img,

    .architecture-image img{

        height:300px;

    }

    .season-card,

    .moment-card img,

    .moment-card.wide img{

        height:220px;

    }

    .philosophy-content blockquote{

        font-size:1.9rem;

    }

}
/*==========================================================
    GALLERY PHILOSOPHY
==========================================================*/

.gallery-philosophy{

    position:relative;

    overflow:hidden;

    padding:10rem 0;

    background:

        linear-gradient(

            135deg,

            #fbf8f3,

            #efe8dc

        );

}

.philosophy-content{

    position:relative;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.philosophy-content blockquote{

    position:relative;

    z-index:2;

    font-family:var(--font-heading);

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

    line-height:1.3;

    font-style:italic;

    color:var(--gallery-charcoal);

}

.philosophy-content span{

    display:block;

    margin-top:2rem;

    color:var(--gallery-gold);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.85rem;

}

.quote-jp{

    left:50%;

    top:-2rem;

    transform:translateX(-50%);

    font-size:12rem;

    color:rgba(163,119,56,.18);

}

.gallery-philosophy::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1px solid rgba(163,119,56,.15);

    animation:galleryRipple 8s linear infinite;

}

.gallery-philosophy::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1px solid rgba(168,162,126,.15);

    animation:galleryRipple 8s linear infinite 2s;

}

@keyframes galleryRipple{

    0%{

        transform:translate(-50%,-50%) scale(.75);

        opacity:.45;

    }

    100%{

        transform:translate(-50%,-50%) scale(1.45);

        opacity:0;

    }

}



/*==========================================================
    GALLERY CTA
==========================================================*/

.gallery-cta{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:10rem 0;

    color:#fff;

    background:

        linear-gradient(

            rgba(40,30,18,.70),

            rgba(40,30,18,.70)

        ),

        url("../images/image66.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.gallery-cta::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at 25% 30%,

            rgba(255,219,140,.10),

            transparent 35%

        ),

        radial-gradient(

            circle at 78% 72%,

            rgba(255,214,122,.10),

            transparent 45%

        );

    animation:galleryGlow 18s ease-in-out infinite;

}

.cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

}

.cta-content h2{

    color:#fff;

    margin:1.5rem 0 2rem;

}

.cta-content p{

    max-width:640px;

    margin:0 auto 2.5rem;

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

}

.gallery-cta .hero-buttons{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    flex-wrap:wrap;

}

.gallery-cta .btn-secondary{

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

    border:1px solid rgba(255,255,255,.20);

    backdrop-filter:blur(12px);

    color:#fff;

}

.gallery-cta .btn-secondary:hover{

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

}



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

.site-footer{

    background:#2c2721;

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

}

.site-footer h3,

.site-footer h4{

    color:#fff;

}

.site-footer a{

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

    transition:.3s ease;

}

.site-footer a:hover{

    color:var(--gallery-gold);

    padding-left:.35rem;

}

.footer-bottom{

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

}



/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .gallery-grid,

    .architecture-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .gallery-image,

    .architecture-image{

        order:-1;

    }

    .season-grid{

        grid-template-columns:1fr;

        grid-template-rows:auto;

    }

    .season-card.large{

        grid-row:auto;

    }

    .season-card{

        height:340px;

    }

    .moments-grid{

        grid-template-columns:1fr;

    }

    .moment-card.wide{

        grid-column:auto;

    }

    .moment-card img,

    .moment-card.wide img{

        height:340px;

    }

}

@media(max-width:768px){

    .gallery-intro,

    .collections-intro,

    .season-gallery,

    .architecture-section,

    .moments-gallery,

    .gallery-philosophy,

    .gallery-cta{

        padding:6rem 0;

    }

    .gallery-image img,

    .architecture-image img{

        height:420px;

    }

    .season-card,

    .moment-card img,

    .moment-card.wide img{

        height:260px;

    }

    .gallery-hanko{

        display:none;

    }

    .gallery-cta{

        background-attachment:scroll;

    }

    .gallery-cta .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .gallery-btn,

    .gallery-cta .btn-secondary{

        width:100%;

        max-width:320px;

    }

}

@media(max-width:480px){

    .gallery-hero h1{

        font-size:3rem;

    }

    .gallery-image img,

    .architecture-image img{

        height:300px;

    }

    .season-card,

    .moment-card img,

    .moment-card.wide img{

        height:220px;

    }

    .philosophy-content blockquote{

        font-size:1.9rem;

    }

}