/*==========================================================
    DINING PAGE
==========================================================*/


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

.dining-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    color:#fff;

    background:#473349;

}


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

.dining-hero .hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:
        brightness(.42)
        saturate(.72);

    z-index:0;

}


/*==========================================================
    DARK OVERLAY
==========================================================*/

.dining-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(22, 16, 28, 0.22);

    z-index:1;

}


/*==========================================================
    GRADIENT OVERLAY
==========================================================*/

.dining-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

           rgba(61, 38, 65, 0.186),

            rgba(27, 24, 28, 0.29)

        );

    z-index:2;

}


/*==========================================================
    STEAM
==========================================================*/

.steam-overlay{

    
    position:absolute;
    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 20% 25%,
        rgba(255,255,255,.14),
        transparent 36%),

        radial-gradient(circle at 75% 35%,
        rgba(255,255,255,.12),
        transparent 38%),

        radial-gradient(circle at 55% 82%,
        rgba(255,255,255,.12),
        transparent 42%);

    mix-blend-mode:screen;

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

}


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

.dining-hero .container{

    position:relative;

    z-index:5;

}

.dining-hero .hero-content{

    position:relative;

    max-width:760px;

    z-index:5;

}

.dining-hero h1{

    margin:1.5rem 0;

    color:#fff;

    font-size:clamp(4.5rem,8vw,7rem);

    line-height:.95;

}

.dining-hero p{

    max-width:620px;

    font-size:1.1rem;

    line-height:1.8;

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

}


/*==========================================================
    INTRODUCTION
==========================================================*/

.dining-intro{

    position:relative;

    padding:9rem 0;

}


.intro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}


.intro-image{

    overflow:hidden;

}


.intro-image img{

    width:100%;

    height:720px;

    object-fit:cover;

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

    transition:transform .8s ease;

}


.intro-image:hover img{

    transform:scale(1.05);

}


.intro-content{

    position:relative;

}


.intro-content h2{

    margin:1.5rem 0 2rem;

}


.intro-content p{

    margin-bottom:1.75rem;

}


.intro-content .vertical-jp{
    
    left:-5rem;
    color: rgba(245, 245, 220, 0.914);

}




/*==========================================================
    SHARED SECTION STYLING
==========================================================*/

.kaiseki-section,

.breakfast-section,

.tea-desserts,

.ingredients-section,

.chef-section,

.private-dining{

    position:relative;

    padding:9rem 0;

}


.section-heading{

    max-width:760px;

    margin:0 auto 5rem;

    text-align:center;

}


.section-heading h2{

    margin:1rem 0 1.75rem;

}


.section-heading p{

    max-width:620px;

    margin:0 auto;

}




/*==========================================================
    RESPONSIVE
==========================================================*/
@keyframes steamFloat{

    0%{
        transform:translateY(0);
        opacity:.55;
    }

    50%{
        transform:translateY(-24px);
        opacity:.82;
    }

    100%{
        transform:translateY(0);
        opacity:.55;
    }

}

@media(max-width:992px){

    .intro-grid{

        grid-template-columns:1fr;

    }

    .intro-image{

        order:-1;

    }

    .intro-image img{

        height:520px;

    }

}


@media(max-width:768px){

    .dining-hero{

        min-height:75vh;

    }

    .dining-hero h1{

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

    }

    .dining-intro{

        padding:6rem 0;

    }

    .intro-image img{

        height:380px;

    }

}
/*==========================================================
    KAISEKI EXPERIENCE
==========================================================*/

.kaiseki-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:5rem;

    align-items:center;

}


.kaiseki-content{

    position:relative;

    max-width:540px;

}


.kaiseki-content h2{

    margin:1rem 0 2rem;

}


.kaiseki-content p{

    margin-bottom:1.75rem;

}


.kaiseki-content .vertical-jp{

    left:-5rem;

}




/*==========================================================
    KAISEKI IMAGE
==========================================================*/

.kaiseki-image{

    overflow:hidden;

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

}


.kaiseki-image img{

    width:100%;

    height:760px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}


.kaiseki-image:hover img{

    transform:scale(1.05);

    filter:brightness(.97);

}




/*==========================================================
    EXPERIENCE LIST
==========================================================*/

.experience-list{

    list-style:none;

    margin:2.5rem 0;

    padding:0;

    display:grid;

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

    gap:1rem 2rem;

}


.experience-list li{

    position:relative;

    padding-left:1.4rem;

}


.experience-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:.65rem;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--color-accent);

}




/*==========================================================
    BREAKFAST
==========================================================*/

.breakfast-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:5rem;

    align-items:center;

}


.breakfast-image{

    overflow:hidden;

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

}


.breakfast-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}


.breakfast-image:hover img{

    transform:scale(1.05);

    filter:brightness(.97);

}


.breakfast-content{

    position:relative;

    max-width:520px;

}


.breakfast-content h2{

    margin:1rem 0 2rem;

}


.breakfast-content p{

    margin-bottom:1.75rem;

}


.breakfast-content .vertical-jp{

    right:-5rem;

}




/*==========================================================
    TEA & DESSERTS
==========================================================*/

.dessert-showcase{

    overflow:hidden;

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

    margin-top:4rem;

}


.dessert-showcase img{

    width:100%;

    height:720px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}


.dessert-showcase:hover img{

    transform:scale(1.04);

    filter:brightness(.98);

}




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

@media(max-width:992px){

    .kaiseki-grid,

    .breakfast-grid{

        grid-template-columns:1fr;

    }

    .kaiseki-content,

    .breakfast-content{

        max-width:100%;

    }

    .kaiseki-image img,

    .breakfast-image img,

    .dessert-showcase img{

        height:500px;

    }

}


@media(max-width:768px){

    .kaiseki-section,

    .breakfast-section,

    .tea-desserts{

        padding:6rem 0;

    }

    .experience-list{

        grid-template-columns:1fr;

    }

    .kaiseki-image img,

    .breakfast-image img,

    .dessert-showcase img{

        height:340px;

    }

}/*==========================================================
    SEASONAL INGREDIENTS
==========================================================*/

.ingredients-grid{

    display:grid;

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

    gap:2.5rem;

}


.ingredient-card{

    background:var(--color-surface);

    overflow:hidden;

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

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

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}


.ingredient-card:hover{

    transform:translateY(-10px);

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

}


.ingredient-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}


.ingredient-card:hover img{

    transform:scale(1.06);

    filter:brightness(.98);

}


.ingredient-content{

    padding:2rem;

}


.ingredient-content h3{

    margin:1rem 0;

}


.ingredient-content p{

    margin:0;

}




/*==========================================================
    CHEF SECTION
==========================================================*/

.chef-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:5rem;

    align-items:center;

}


.chef-image{

    overflow:hidden;

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

}


.chef-image img{

    width:100%;

    height:760px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}


.chef-image:hover img{

    transform:scale(1.05);

    filter:brightness(.97);

}


.chef-content{

    position:relative;

    max-width:560px;

}


.chef-content .vertical-jp{

    left:-5rem;

}




/*==========================================================
    BLOCKQUOTE
==========================================================*/

.chef-content blockquote{

    margin:2rem 0;

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

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

    line-height:1.2;

    color:var(--color-heading);

    font-style:italic;

    position:relative;

}


.chef-content blockquote::before{

    content:"“";

    position:absolute;

    left:-1rem;

    top:-1.5rem;

    font-size:6rem;

    color:rgba(0,0,0,.08);

}


.chef-content p{

    margin-bottom:1.5rem;

}


.chef-signature{

    display:inline-block;

    margin-top:1rem;

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

    font-size:1.2rem;

    color:var(--color-accent);

    letter-spacing:.08em;

}




/*==========================================================
    PRIVATE DINING
==========================================================*/

.private-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:5rem;

    align-items:center;

}


.private-content{

    position:relative;

    max-width:540px;

}


.private-content h2{

    margin:1.5rem 0 2rem;

}


.private-content p{

    margin-bottom:1.75rem;

}


.private-content .vertical-jp{

    right:-5rem;

}


.private-image{

    overflow:hidden;

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

}


.private-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}


.private-image:hover img{

    transform:scale(1.05);

    filter:brightness(.97);

}




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

@media(max-width:992px){

    .ingredients-grid{

        grid-template-columns:1fr;

    }

    .chef-grid,

    .private-grid{

        grid-template-columns:1fr;

    }

    .chef-content,

    .private-content{

        max-width:100%;

    }

    .chef-image img,

    .private-image img{

        height:500px;

    }

}


@media(max-width:768px){

    .ingredients-section,

    .chef-section,

    .private-dining{

        padding:6rem 0;

    }

    .ingredient-card img{

        height:240px;

    }

    .chef-image img,

    .private-image img{

        height:340px;

    }

    .chef-content blockquote{

        font-size:2rem;

    }

}
/*==========================================================
    RESERVATION CTA
==========================================================*/

.reservation-cta{

    position:relative;

    overflow:hidden;

    padding:10rem 0;

    text-align:center;

    color:#fff;

    background:
        linear-gradient(
            rgba(15,15,15,.58),
            rgba(15,15,15,.58)
        ),
        url("../images/image36.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}


.reservation-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.08),
            transparent 45%
        );

    pointer-events:none;

}


.cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:0 auto;

}


.cta-content h2{

    color:#fff;

    margin:1.5rem 0 2rem;

}


.cta-content p{

    max-width:620px;

    margin:0 auto 2.5rem;

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

}


.reservation-cta .hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:1.5rem;

}




/*==========================================================
    CTA BUTTONS
==========================================================*/

.reservation-cta .btn{

    min-width:220px;

}


.reservation-cta .btn-secondary{

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

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

    backdrop-filter:blur(10px);

    color:#fff;

}


.reservation-cta .btn-secondary:hover{

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

}




/*==========================================================
    SUBTLE PAGE DETAILS
==========================================================*/

.ingredient-card,

.chef-image,

.private-image,

.kaiseki-image,

.breakfast-image,

.dessert-showcase{

    will-change:transform;

}


.ingredient-card img,

.chef-image img,

.private-image img,

.kaiseki-image img,

.breakfast-image img,

.dessert-showcase img{

    backface-visibility:hidden;

}




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

.site-footer{

    padding-top:6rem;

}


.footer-brand p{

    max-width:340px;

}


.footer-links a{

    transition:

        color .3s ease,

        padding-left .3s ease;

}


.footer-links a:hover{

    padding-left:.4rem;

}




/*==========================================================
    LARGE DESKTOPS
==========================================================*/

@media(min-width:1500px){

    .dining-hero h1{

        font-size:8rem;

    }

    .kaiseki-image img,

    .breakfast-image img,

    .chef-image img,

    .private-image img{

        height:850px;

    }

}




/*==========================================================
    TABLETS
==========================================================*/

@media(max-width:992px){

    .reservation-cta{

        padding:8rem 0;

        background-attachment:scroll;

    }

}




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

@media(max-width:768px){

    .reservation-cta{

        padding:6rem 0;

    }

    .reservation-cta .hero-buttons{

        flex-direction:column;

    }

    .reservation-cta .btn{

        width:100%;

        max-width:320px;

    }

    .cta-content h2{

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

    }

    .cta-content p{

        font-size:1rem;

    }

}




/*==========================================================
    EXTRA SMALL DEVICES
==========================================================*/

@media(max-width:480px){

    .dining-hero h1{

        font-size:3rem;

    }

    .kaiseki-image img,

    .breakfast-image img,

    .dessert-showcase img,

    .chef-image img,

    .private-image img{

        height:280px;

    }

    .ingredient-card img{

        height:220px;

    }

    .ingredient-content{

        padding:1.6rem;

    }

    .chef-content blockquote{

        font-size:1.7rem;

    }

}