/*==========================================================
    TEA HOUSE COLOR PALETTE
==========================================================*/

:root{

    --tea-green-dark:#364023;

    --tea-green:#6A823E;

    --tea-green-light:#9C9F69;

    --tea-pink:#C7A39B;

    --tea-blush:#E6B1C4;

    --tea-rose:#EFD4DD;

    --tea-cream:#F7F5EF;

}
/*==========================================================
    TEA HOUSE VERTICAL JAPANESE TEXT
==========================================================*/

.tea-hero .vertical-jp,
.tea-intro .vertical-jp,
.wagashi-section .vertical-jp,
.tea-master .vertical-jp{

   

    position:absolute;

    writing-mode:vertical-rl;

    text-orientation:upright;

    white-space:nowrap;

    display:block;

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

    line-height:1.1;

    letter-spacing:.2rem;

}
.hero-content,
.tea-content,
.wagashi-content,
.master-content{

    position:relative;

    z-index:2;

}


.tea-hero .vertical-jp{

     top:50%;

    right:2.5rem;

    transform:translateY(-50%);
    opacity:.6;

    font-size:12rem;

    color:rgba(254, 167, 196, 0.889);

}

.tea-intro .vertical-jp{

    left:-4rem;

    top:11rem;

    font-size:11rem;

    color:rgba(162, 213, 98, 0.24);

    opacity:0.99;


}
.wagashi-section .vertical-jp{

    left:-4rem;

    top:3rem;

    font-size:11rem;

    color:rgba(162, 213, 98, 0.24);

    opacity:0.99;

}
.tea-master .vertical-jp{

   left:-4rem;

    top:3rem;

    font-size:11rem;

    color:rgba(162, 213, 98, 0.24);

    opacity:0.99;

}



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

.tea-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    color:#fff;

    background:#1f2618;

}


.tea-hero .hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:

        saturate(.82)

        brightness(.72);

}


.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(24,34,20,.25),

            rgba(20,28,18,.72)

        );

}


.forest-mist{

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 20% 20%,
        rgba(255,255,255,.16),
        transparent 40%),

        radial-gradient(circle at 80% 35%,
        rgba(255,255,255,.10),
        transparent 35%),

        radial-gradient(circle at 50% 100%,
        rgba(255,255,255,.10),
        transparent 55%);

    mix-blend-mode:screen;

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

}


@keyframes mistFloat{

    0%{

        transform:translateY(0);

        opacity:.6;

    }

    50%{

        transform:translateY(-20px);

        opacity:.85;

    }

    100%{

        transform:translateY(0);

        opacity:.6;

    }

}


.tea-hero .container{

    position:relative;

    z-index:5;

}


.tea-hero .hero-content{

    max-width:760px;

}


.tea-hero h1{

    color:#fff;

    margin:1.5rem 0;

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

    line-height:.92;

}


.tea-hero p{

    max-width:620px;

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

    font-size:1.1rem;

}




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

.tea-btn{
    margin-top:2rem;

    background:var(--tea-green);

    border:none;

    color:#fff;

}


.tea-btn:hover{

    background:var(--tea-pink);

    color:#fff;

    transform:translateY(-3px);

}




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

.tea-hanko{

    position:absolute;

    right:3.5%;

    top:6%;

    width:150px;

    height:150px;

    border:8px solid rgba(230,177,196,.9);

    color:var(--tea-blush);

    background:rgba(230,177,196,.08);

    backdrop-filter:blur(10px);

}




/*==========================================================
    TEA INTRO
==========================================================*/

.tea-intro{

    position:relative;

    padding:9rem 0;

    background:

        linear-gradient(

            rgba(229, 244, 212, 0.495),

            rgba(241, 219, 226, 0.96)

        );

}


/*==========================================================
    INTRO → JOURNEY TRANSITION BAND
    (only the brush-divider directly after .tea-intro —
    every other .brush-divider on this page, and on every
    other page, is untouched)
==========================================================*/

.tea-intro + .brush-divider{

    width:100%;

    max-width:none;

    margin:0;

    padding:4rem 0;

    background:rgba(107, 51, 69, 0.411);

}


.tea-paper{

    position:relative;

}


.tea-paper::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.03;

    background-image:

        radial-gradient(circle,
        var(--tea-green) 1px,
        transparent 1px);

    background-size:24px 24px;

    pointer-events:none;

}


.tea-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}


.tea-content{

    position:relative;

}


.tea-content h2{

    color:var(--tea-green-dark);

    margin:1.5rem 0 2rem;

}


.tea-content p{

    margin-bottom:1.75rem;

}


.tea-content .brand-tag{

    color:var(--tea-green);

}


.tea-content .vertical-jp{

    left:-7rem;
    color:rgba(106, 130, 62, 0.527);

}


.tea-image{

    overflow:hidden;

}


.tea-image img{

    width:100%;

    height:720px;

    object-fit:cover;

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

    transition:

        transform .9s ease,

        filter .9s ease;

}


.tea-image:hover img{

    transform:scale(1.05);

    filter:brightness(.98);

}
/*==========================================================
    TEA JOURNEY
==========================================================*/

.tea-journey{

    position:relative;

    padding:9rem 0;

    background:
        linear-gradient(
            180deg,
           rgba(241, 219, 226, 0.96),
            rgba(229, 244, 212, 0.495)
        );

}
.tea-journey + .brush-divider{

    width:100%;

    max-width:none;

    margin:0;

    padding:4rem 0;

    background:rgba(94, 117, 67, 0.382);

}


.journey-timeline{

    position:relative;

    display:grid;

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

    gap:2rem;

    margin-top:5rem;

}


.journey-line{

    position:absolute;

    left:8%;

    right:8%;

    top:60px;

    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--tea-green-light),
            var(--tea-green),
            var(--tea-pink)
        );

    opacity:.35;

}


.journey-step{

    position:relative;

    text-align:center;

    z-index:2;

}


.step-circle{

    width:62px;

    height:62px;

    margin:0 auto 1.25rem;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--tea-green-dark);

    color:#fff;

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

    font-size:1rem;

    letter-spacing:.12em;

    box-shadow:0 15px 35px rgba(54,64,35,.18);

    transition:all .45s ease;

}


.journey-step:hover .step-circle{

    background:var(--tea-pink);

    transform:translateY(-6px) scale(1.08);

}


.step-icon{

    font-size:2rem;

    margin-bottom:1rem;

    filter:drop-shadow(0 8px 12px rgba(0,0,0,.12));

}


.journey-step h3{

    margin-bottom:1rem;

    color:var(--tea-green-dark);

}


.journey-step p{

    font-size:.95rem;

    max-width:220px;

    margin:auto;

}




/*==========================================================
    WAGASHI
==========================================================*/

.wagashi-section{

    position:relative;

    padding:9rem 0;

    background:
        linear-gradient(
            rgba(229, 244, 212, 0.495),
            rgba(241, 219, 226, 0.96)
        );

}

.wagashi-section + .brush-divider{

    width:100%;

    max-width:none;

    margin:0;

    padding:4rem 0;

    background:rgba(107, 51, 69, 0.411);
}


.wagashi-grid{

    display:grid;

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

    gap:6rem;

    align-items:center;

}


.wagashi-image{

    overflow:hidden;

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

}


.wagashi-image img{

    width:100%;

    height:760px;

    object-fit:cover;

    transition:
        transform .9s ease,
        filter .9s ease;

}


.wagashi-image:hover img{

    transform:scale(1.05);

    filter:brightness(.98);

}


.wagashi-content{

    position:relative;

    max-width:540px;

}


.wagashi-content h2{

    color:var(--tea-green-dark);

    margin:1.5rem 0 2rem;

}


.wagashi-content p{

    margin-bottom:1.75rem;

}


.wagashi-content .brand-tag{

    color:var(--tea-pink);

}


.wagashi-content .vertical-jp{

    left:-7rem;

    color:rgba(199,163,155,.18);

}




/*==========================================================
    TEA ROOMS
==========================================================*/

.tea-rooms{

    position:relative;

    padding:9rem 0;

     background:
        linear-gradient(
           rgba(241, 219, 226, 0.96)
           rgba(229, 244, 212, 0.495)
            
        );

}


.tea-room-grid{

    display:grid;

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

    gap:2.5rem;

    margin-top:4rem;

}


.tea-room-card{

    overflow:hidden;

    background:#fff;

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

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

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


.tea-room-card:hover{

    transform:translateY(-10px);

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

}


.tea-room-card img{

    width:100%;

    height:330px;

    object-fit:cover;

    transition:transform .9s ease;

}


.tea-room-card:hover img{

    transform:scale(1.06);

}


.tea-room-content{

    padding:2rem;

}


.tea-room-content h3{

    color:var(--tea-green-dark);

    margin:1rem 0;

}




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

@media(max-width:1100px){

    .journey-timeline{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .journey-line{

        display:none;

    }

    .wagashi-grid{

        grid-template-columns:1fr;

    }

    .tea-room-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:768px){

    .tea-journey,

    .wagashi-section,

    .tea-rooms{

        padding:6rem 0;

    }

    .wagashi-image img{

        height:420px;

    }

    .tea-room-card img{

        height:260px;

    }

}
/*==========================================================
    TEA MASTER
==========================================================*/

.tea-master{

    position:relative;

    padding:9rem 0;

    background:
        linear-gradient(
            135deg,
            #f7f5ef 0%,
            #eef2e5 100%
        );

    overflow:hidden;

}


.master-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}


.master-image{

    overflow:hidden;

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

}


.master-image img{

    width:100%;

    height:760px;

    object-fit:cover;

    transition:
        transform .9s ease,
        filter .9s ease;

}


.master-image:hover img{

    transform:scale(1.05);

    filter:brightness(.98);

}


.master-content{

    position:relative;

    max-width:560px;

}


.master-content .vertical-jp{

    left:-5rem;

    color:rgba(54,64,35,.14);

}


.master-content .brand-tag{

    color:var(--tea-green);

}


.master-content blockquote{

    margin:2rem 0;

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

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

    line-height:1.2;

    color:var(--tea-green-dark);

    font-style:italic;

    position:relative;

}


.master-content blockquote::before{

    content:"“";

    position:absolute;

    left:-1rem;

    top:-2rem;

    font-size:6rem;

    color:rgba(54,64,35,.08);

}


.master-content p{

    margin-bottom:1.6rem;

}


.master-content .chef-signature{

    color:var(--tea-pink);

}




/*==========================================================
    BAMBOO DECORATION
==========================================================*/

.bamboo-illustration{

    position:absolute;

    top:0;

    width:180px;

    height:100%;

    opacity:.06;

    pointer-events:none;

}


.bamboo-left{

    left:0;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 30px,
            var(--tea-green) 31px,
            transparent 33px
        );

}


.bamboo-right{

    right:0;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 28px,
            var(--tea-green-dark) 29px,
            transparent 31px
        );

}




/*==========================================================
    FOUR PRINCIPLES
==========================================================*/

.tea-principles{

    position:relative;

    padding:9rem 0;

    background:
        linear-gradient(
            rgba(247,245,239,.98),
            rgba(239,212,221,.18)
        );

}


.principles-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}


.principle-card{

    background:#fff;

    padding:3rem 2rem;

    text-align:center;

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

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

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.principle-card:hover{

    transform:translateY(-10px);

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

}


.principle-symbol{

    width:85px;

    height:85px;

    margin:0 auto 1.5rem;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(106,130,62,.08);

    color:var(--tea-green);

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

    font-size:2rem;

    border:1px solid rgba(106,130,62,.15);

}


.principle-card h3{

    margin-bottom:1rem;

    color:var(--tea-green-dark);

}


.principle-card p{

    margin:0;

}




/*==========================================================
    SECTION ACCENTS
==========================================================*/

.tea-master .section-accent,

.wagashi-content .section-accent,

.tea-content .section-accent{

    background:
        linear-gradient(
            90deg,
            var(--tea-green),
            var(--tea-pink)
        );

}




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

@media(max-width:1100px){

    .master-grid{

        grid-template-columns:1fr;

    }

    .principles-grid{

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

    }

    .master-content{

        max-width:100%;

    }

}


@media(max-width:768px){

    .tea-master,

    .tea-principles{

        padding:6rem 0;

    }

    .master-image img{

        height:420px;

    }

    .principles-grid{

        grid-template-columns:1fr;

    }

    .principle-card{

        padding:2.5rem 2rem;

    }

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

.reservation-cta{

    position:relative;

    overflow:hidden;

    padding:10rem 0;

    text-align:center;

    color:#fff;

    background:
        linear-gradient(
            rgba(32,42,24,.72),
            rgba(32,42,24,.72)
        ),
        url("../images/image44.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}


.reservation-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at 15% 20%,
        rgba(239,212,221,.12),
        transparent 35%),

        radial-gradient(circle at 80% 80%,
        rgba(255,255,255,.08),
        transparent 40%);

    pointer-events:none;

}


.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{

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

    max-width:620px;

    margin:0 auto 2.5rem;

}


.reservation-cta .hero-buttons{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    flex-wrap:wrap;

}




/*==========================================================
    FLOATING PETALS
==========================================================*/

.reservation-cta::after{

    content:"❀";

    position:absolute;

    right:12%;

    top:15%;

    font-size:2.5rem;

    color:rgba(239,212,221,.28);

    animation:petalFloat 8s ease-in-out infinite;

}


@keyframes petalFloat{

    0%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(18px) rotate(18deg);

    }

    100%{

        transform:translateY(0) rotate(0deg);

    }

}




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

.reservation-cta .tea-btn{

    min-width:230px;

}


.reservation-cta .btn-secondary{

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

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

    color:#fff;

    backdrop-filter:blur(12px);

}


.reservation-cta .btn-secondary:hover{

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

}




/*==========================================================
    IMAGE OPTIMIZATION
==========================================================*/

.master-image,

.tea-image,

.wagashi-image,

.tea-room-card{

    will-change:transform;

}


.master-image img,

.tea-image img,

.wagashi-image img,

.tea-room-card img{

    backface-visibility:hidden;

}




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

.site-footer{

    background:#27311b;

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

}


.site-footer h3,

.site-footer h4{

    color:#fff;

}


.site-footer a{

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

    transition:all .3s ease;

}


.site-footer a:hover{

    color:var(--tea-blush);

    padding-left:.4rem;

}


.footer-bottom{

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

}




/*==========================================================
    LARGE SCREENS
==========================================================*/

@media(min-width:1500px){

    .tea-hero h1{

        font-size:8rem;

    }

    .tea-image img,

    .wagashi-image img,

    .master-image img{

        height:860px;

    }

}




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

@media(max-width:992px){

    .reservation-cta{

        background-attachment:scroll;

        padding:8rem 0;

    }

}




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

@media(max-width:768px){

    .reservation-cta{

        padding:6rem 0;

    }

    .reservation-cta .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .reservation-cta .tea-btn,

    .reservation-cta .btn-secondary{

        width:100%;

        max-width:320px;

    }

    .bamboo-illustration{

        display:none;

    }

}




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

@media(max-width:480px){

    .tea-hero h1{

        font-size:3rem;

    }

    .tea-image img,

    .wagashi-image img,

    .master-image img{

        height:300px;

    }

    .tea-room-card img{

        height:220px;

    }

    .master-content blockquote{

        font-size:1.8rem;

    }

    .principle-symbol{

        width:70px;

        height:70px;

        font-size:1.6rem;

    }

    /*==========================================================
    TEA HOUSE BRUSH DIVIDER
==========================================================*/

.tea-house-page .brush-divider::before,
.tea-house-page .brush-divider::after{

    background:linear-gradient(
        90deg,
        transparent,
        #a8c97b,
        #f5b6c9,
        transparent
    );

}

.tea-house-page .brush-divider span{

    border-color:#722424;

}
body.tea-house-page{

    --brand-gold:#9bc17d;
    --brand-vermilion:#d96d78;

}

}