/*==========================================================
    JOURNAL PAGE
    Ryokan Website
==========================================================*/


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

:root{

    --journal-rose:#AA3D3A;
    --journal-sage:#41564D;
    --journal-paper:#D5BB8A;
    --journal-ink:#211A14;

    --journal-cream:#F8F4ED;
    --journal-linen:#F2EEE6;
    --journal-parchment:#EEE5D6;

    --journal-text:#4A443E;

}



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

.journal-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#251C18;

    color:#fff;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        brightness(.62)
        saturate(.86);

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(48, 31, 24, 0.432),

            rgba(24, 18, 15, 0.875)

        );

}


/*==========================================================
    FLOATING LIGHT
==========================================================*/

.paper-light{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 18% 22%,
        rgba(255, 236, 188, 0.275),
        transparent 90%),

        radial-gradient(circle at 82% 30%,
        rgba(255, 225, 164, 0.255),
        transparent 90%),

        radial-gradient(circle at 55% 80%,
        rgba(255, 255, 255, 0.273),
        transparent 90%);

    mix-blend-mode:screen;

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

}

@keyframes journalGlow{

    0%{

        opacity:.45;
        transform:translateY(0);

    }

    50%{

        opacity:.82;
        transform:translateY(-18px);

    }

    100%{

        opacity:.45;
        transform:translateY(0);

    }

}



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

.journal-hero .container{

    position:relative;

    z-index:5;

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:760px;

}

.journal-hero h1{

    margin:1.5rem 0;

    color:#fff;

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

    line-height:.92;

}

.journal-hero p{

    max-width:620px;

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

    font-size:1.05rem;

}



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

.journal-btn{

    margin-top:3rem;

    background:var(--journal-rose);

    color:#fff;

    border:none;

    transition:.35s ease;

}

.journal-btn:hover{

    background:#be4d49;

    color:#fff;

    transform:translateY(-4px);

}



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

.journal-hanko{

    position:absolute;

    right:3.5%;
    top:7%;

    width:150px;
    height:150px;

    border:8px solid rgba(213,187,138,.88);

    background:rgba(213,187,138,.08);

    color:#f8e2bc;

    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;

    letter-spacing:.18rem;

    line-height:1.05;

    pointer-events:none;

    user-select:none;

    z-index:1;

}

/* HERO */

.hero-jp{

    top:50%;

    right:2.5rem;

    transform:translateY(-50%);

    font-size:11rem;

    color:rgba(213,187,138,.62);

}

/* INTRO */

.intro-jp{

    left:-4rem;

    top:4rem;

    font-size:10rem;

    color:rgba(65,86,77,.32);

}



/*==========================================================
    JOURNAL INTRO
==========================================================*/

.journal-intro{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:var(--journal-cream);

}



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

.paper-background{

    position:relative;

}

.paper-background::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.035;

    pointer-events:none;

    background-image:

        radial-gradient(

            rgba(65,86,77,.45) 1px,

            transparent 1px

        );

    background-size:26px 26px;

}



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

.journal-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}



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

.journal-content{

    position:relative;

    z-index:2;

}

.journal-content .brand-tag{

    color:var(--journal-rose);

}

.journal-content h2{

    margin:1.5rem 0 2rem;

    color:var(--journal-ink);

}

.journal-content p{

    margin-bottom:1.8rem;

    color:var(--journal-text);

    line-height:1.9;

}

.section-accent{

    width:82px;

    height:3px;

    margin:2rem 0;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            var(--journal-rose),

            var(--journal-paper)

        );

}



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

.journal-image{

    position:relative;

    overflow:hidden;

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

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

}

.journal-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.journal-image:hover img{

    transform:scale(1.05);

    filter:brightness(.98);

}

.journal-image::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.08)

        );

}



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

.featured-story{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:

        linear-gradient(

            180deg,

            #fbf9f4,

            #f2ece2

        );

}

.featured-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:6rem;

    align-items:center;

}

.featured-image{

    overflow:hidden;

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

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

}

.featured-image img{

    width:100%;

    height:760px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.featured-image:hover img{

    transform:scale(1.05);

    filter:brightness(.98);

}

.featured-content{

    max-width:560px;

    position:relative;

}

.story-date{

    display:inline-block;

    margin:2rem 0 1rem;

    color:var(--journal-sage);

    text-transform:uppercase;

    letter-spacing:.16em;

    font-size:.8rem;

}

.featured-content h2{

    margin-bottom:2rem;

    color:var(--journal-ink);

}

.featured-content p{

    color:var(--journal-text);

    line-height:1.85;

    margin-bottom:1.6rem;

}

.featured-content blockquote{

    margin:2.5rem 0;

    padding-left:2rem;

    border-left:3px solid var(--journal-paper);

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

    font-size:1.6rem;

    line-height:1.6;

    color:var(--journal-rose);

    font-style:italic;

}
/*==========================================================
    SEASONAL ESSAYS
==========================================================*/

.seasonal-essays{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:var(--journal-linen);

}

.seasonal-essays::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    top:-160px;

    right:-160px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(170,61,58,.08),

            transparent 70%

        );

    filter:blur(35px);

    pointer-events:none;

}



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

.essay-grid{

    display:grid;

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

    gap:2.5rem;

    margin-top:4rem;

}

.essay-card{

    position:relative;

    overflow:hidden;

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

    background:#fff;

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

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.essay-card:hover{

    transform:translateY(-10px);

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

}

.essay-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:transform .9s ease;

}

.essay-card:hover img{

    transform:scale(1.06);

}

.essay-content{

    padding:2rem;

}

.essay-content h3{

    margin:1rem 0;

    color:var(--journal-ink);

}

.essay-content p{

    color:var(--journal-text);

    line-height:1.8;

}



/*==========================================================
    QUIET NOTES
==========================================================*/

.quiet-notes{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:

        linear-gradient(

            180deg,

            #faf8f3,

            #efe7db

        );

}

.quiet-notes::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(65,86,77,.08),

            transparent 70%

        );

    filter:blur(35px);

}



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

.notes-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.note-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

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

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        rotate .45s ease;

}

.note-card:nth-child(odd){

    transform:rotate(-1deg);

}

.note-card:nth-child(even){

    transform:rotate(1deg);

}

.note-card:hover{

    transform:

        rotate(0deg)

        translateY(-10px);

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

    z-index:5;

}

.note-card.wide{

    grid-column:span 2;

}

.note-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.note-card.wide img{

    height:340px;

}

.note-card:hover img{

    transform:scale(1.05);

    filter:brightness(.95);

}



/*==========================================================
    NOTE CONTENT
==========================================================*/

.note-content{

    padding:1.8rem;

}

.note-content h3{

    margin-bottom:1rem;

    color:var(--journal-ink);

}

.note-content p{

    color:var(--journal-text);

    line-height:1.8;

}



/*==========================================================
    PAPER LABEL
==========================================================*/

.note-card::before{

    content:"Journal Note";

    position:absolute;

    top:18px;

    left:18px;

    z-index:3;

    padding:.4rem .85rem;

    border-radius:999px;

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

    backdrop-filter:blur(10px);

    color:var(--journal-rose);

    font-size:.7rem;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-weight:600;

}



/*==========================================================
    PAPER SHADOW
==========================================================*/

.note-card::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    border-radius:inherit;

    box-shadow:

        inset 0 1px rgba(255,255,255,.6),

        inset 0 -25px 40px rgba(0,0,0,.03);

}
/*==========================================================
    JOURNAL PHILOSOPHY
==========================================================*/

.journal-philosophy{

    position:relative;

    overflow:hidden;

    padding:10rem 0;

    background:

        linear-gradient(

            135deg,

            #faf7f2,

            #efe7da

        );

}

.philosophy-content{

    position:relative;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.quote-jp{

    left:50%;

    top:-2rem;

    transform:translateX(-50%);

    font-size:12rem;

    color:rgba(170,61,58,.12);

}

.philosophy-content blockquote{

    position:relative;

    z-index:2;

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

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

    line-height:1.3;

    color:var(--journal-ink);

    font-style:italic;

    margin:2rem 0;

}

.philosophy-content p{

    max-width:720px;

    margin:auto;

    color:var(--journal-text);

    line-height:1.9;

}

.journal-philosophy::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:50%;

    top:50%;

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

    border-radius:50%;

    border:1px solid rgba(170,61,58,.12);

    animation:journalRipple 8s linear infinite;

}

.journal-philosophy::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    left:50%;

    top:50%;

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

    border-radius:50%;

    border:1px solid rgba(213,187,138,.18);

    animation:journalRipple 8s linear infinite 2s;

}

@keyframes journalRipple{

    0%{

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

        opacity:.45;

    }

    100%{

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

        opacity:0;

    }

}



/*==========================================================
    NEWSLETTER
==========================================================*/

.journal-newsletter{

    padding:9rem 0;

    background:var(--journal-paper);

}

.newsletter-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:5rem;

    align-items:center;

}

.newsletter-content h2{

    margin:1.5rem 0 2rem;

    color:var(--journal-ink);

}

.newsletter-content p{

    color:var(--journal-text);

    line-height:1.9;

}

.newsletter-form{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.newsletter-form input{

    padding:1.25rem 1.5rem;

    border:none;

    border-radius:999px;

    background:#fff;

    font-size:1rem;

    color:var(--journal-text);

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

    transition:.3s ease;

}

.newsletter-form input:focus{

    outline:none;

    box-shadow:0 0 0 3px rgba(170,61,58,.15);

}



/*==========================================================
    JOURNAL CTA
==========================================================*/

.journal-cta{

    position:relative;

    overflow:hidden;

    padding:10rem 0;

    text-align:center;

    color:#fff;

    background:

        linear-gradient(

            rgba(40,25,22,.72),

            rgba(40,25,22,.72)

        ),

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

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.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,.86);

}

.journal-cta .hero-buttons{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    flex-wrap:wrap;

}

.journal-cta .btn-secondary{

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

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

    backdrop-filter:blur(12px);

    color:#fff;

}

.journal-cta .btn-secondary:hover{

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

}



/*==========================================================
    THE LAST PAGE
==========================================================*/

.last-page{

    position:relative;

    padding:10rem 0;

    background:

        linear-gradient(

            180deg,

            #f7f3ec,

            #ece4d7

        );

}

.last-page-card{

    position:relative;

    max-width:900px;

    margin:auto;

    padding:5rem;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

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

    overflow:hidden;

}

.page-number{

    position:absolute;

    top:2rem;

    right:2.5rem;

    font-size:.8rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:rgba(65,86,77,.55);

}

.last-jp{

    position:absolute;

    right:3rem;

    top:50%;

    transform:translateY(-50%);

    font-size:10rem;

    color:rgba(170,61,58,.08);

}

.last-page-card h2{

    margin:2rem 0;

    color:var(--journal-ink);

}

.last-page-card p{

    color:var(--journal-text);

    line-height:1.95;

    margin-bottom:1.8rem;

}

.signature{

    margin-top:3rem;

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

    font-size:1.35rem;

    color:var(--journal-rose);

}

.book-close{

    margin-top:4rem;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:1.5rem;

}

.book-close .jp{

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

    color:var(--journal-sage);

    letter-spacing:.2em;

}

.book-close .line{

    width:100px;

    height:1px;

    background:rgba(65,86,77,.3);

}

.book-close .en{

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:.75rem;

    color:rgba(65,86,77,.7);

}



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

.site-footer{

    background:#2B2520;

    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(--journal-paper);

    padding-left:.35rem;

}

.footer-bottom{

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

}



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

@media(max-width:1100px){

    .journal-grid,

    .featured-grid,

    .newsletter-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .journal-image,

    .featured-image{

        order:-1;

    }

    .essay-grid{

        grid-template-columns:1fr;

    }

    .notes-grid{

        grid-template-columns:1fr;

    }

    .note-card.wide{

        grid-column:auto;

    }

}

@media(max-width:768px){

    .journal-intro,

    .featured-story,

    .seasonal-essays,

    .quiet-notes,

    .journal-philosophy,

    .journal-newsletter,

    .journal-cta,

    .last-page{

        padding:6rem 0;

    }

    .journal-image img,

    .featured-image img{

        height:420px;

    }

    .essay-card img{

        height:260px;

    }

    .note-card img,

    .note-card.wide img{

        height:240px;

    }

    .journal-hanko{

        display:none;

    }

    .last-page-card{

        padding:3rem 2rem;

    }

    .journal-cta{

        background-attachment:scroll;

    }

    .journal-cta .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .journal-btn,

    .journal-cta .btn-secondary{

        width:100%;

        max-width:320px;

    }

}

@media(max-width:480px){

    .journal-hero h1{

        font-size:3rem;

    }

    .journal-image img,

    .featured-image img{

        height:300px;

    }

    .essay-card img,

    .note-card img,

    .note-card.wide img{

        height:220px;

    }

    .philosophy-content blockquote{

        font-size:1.9rem;

    }

    .book-close{

        flex-direction:column;

        gap:1rem;

    }

    .book-close .line{

        width:60px;

    }

}