/* ======================================================
   HERO
====================================================== */
.hero {
    position: relative;
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-background {
    position: absolute;
    inset: 0;
    z-index: 1;

    background-image: url("../assets/imgdesktop/hero-1920.webp");
    background-repeat: no-repeat;

    left: 0;

    background-position: center center;
    background-size: cover;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(
            90deg,
            var(--color-background) 0%,
            rgba(248,244,239,.98) 12%,
            rgba(248,244,239,.92) 22%,
            rgba(248,244,239,.75) 32%,
            rgba(248,244,239,.40) 44%,
            rgba(248,244,239,.10) 56%,
            rgba(248,244,239,0) 68%
            ),
            radial-gradient(
            circle at 36% 50%,
            rgba(255,255,255,.45) 0%,
            rgba(255,255,255,.10) 25%,
            rgba(255,255,255,0) 60%
        );
}
.hero-container {
    position: relative;
    z-index: 10;
    width: min(92%, 1400px);
    margin-inline: auto;
}
.hero-content {
    position: relative;
    z-index: 4;
    padding-top: 30px;
}
.hero-tag {
    display: inline-block;
    margin-bottom: 24px;
    color: #A48363;
    letter-spacing: .18em;
    font-size: .85rem;
    font-weight: 600;
}
.hero-title {
    font-size: clamp(4rem, 6vw, 6rem);
    font-weight: 600;
    line-height: .88;
    letter-spacing: -.03em;
    margin-bottom: 36px;
    font-family: "Cormorant Garamond", serif;
}
.hero-description {
    max-width: 470px;
    margin-bottom: 42px;
    font-size:clamp(1rem,1.2vw,1.18rem);
    font-weight: 400;
    line-height: 1.8;
}
.hero .btn {
    padding:clamp(14px,1vw,18px)
            clamp(26px,2vw,36px);
}
@keyframes heroFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0);
    }
}
/* ======================================================
   HERO EFFECTS
====================================================== */
.hero-effects{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
}
.hero-effects > div {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
/* ======================================================
   HERO - AMBIENT LIGHT
====================================================== */
.hero-light {
    inset: 0;
    opacity: .8;
    mix-blend-mode: screen;
    background: linear-gradient(
        115deg,
        rgba(255,245,190,.25) 0%,
        rgba(255,245,190,.12) 18%,
        transparent 40%
    );
}
/* ======================================================
   HERO - FOG
====================================================== */
.hero-fog-1 {
    left: 68%;
    top: 23%;
    width: 8%;
    height: 26%;
    opacity: .30;
    filter: blur(28px);
    background: radial-gradient(
        ellipse at center,
        rgba(255,248,236,.32) 0%,
        rgba(255,232,195,.18) 42%,
        rgba(255,220,180,.08) 72%,
        transparent 100%
    );
    animation: hero-fog-breathe 24s ease-in-out infinite;
}
.hero-fog-2 {
    left: 69.5%;
    top: 27%;
    width: 5%;
    height: 15%;
    opacity: .22;
    filter: blur(22px);
    background: radial-gradient(
        ellipse at center,
        rgba(255,248,236,.24) 0%,
        rgba(255,232,195,.14) 45%,
        rgba(255,220,180,.05) 75%,
        transparent 100%
    );
    animation: hero-fog-breathe 24s ease-in-out infinite;
    animation-delay: -12s;
}
@keyframes hero-fog-breathe {
    0% {
        opacity: .20;
        transform: scale(.96);
    }
    35% {
        opacity: .32;
        transform: scale(1.05);
    }
    70% {
        opacity: .24;
        transform: scale(.99);
    }
    100% {
        opacity: .20;
        transform: scale(.96);
    }
}
/* ======================================================
   HERO - LANTERN
====================================================== */
.hero-lantern-flame {
    left: 81.7%;
    top: 69.5%;
    width: 2.2%;
    height: 5.5%;
    filter: blur(8px);
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255,248,220,.35) 0%,
        rgba(255,190,90,.18) 45%,
        rgba(255,160,60,.08) 70%,
        transparent 100%
    );
    animation: hero-lantern-flicker 5.5s ease-in-out infinite;
}
@keyframes hero-lantern-flicker {
    0% {
        opacity: .65;
    }
    11% {
        opacity: .72;
    }
    24% {
        opacity: .60;
    }
    37% {
        opacity: .68;
    }
    51% {
        opacity: .63;
    }
    66% {
        opacity: .74;
    }
    82% {
        opacity: .61;
    }
    100% {
        opacity: .67;
    }
}
/* ======================================================
   SECTION DIVIDER
====================================================== */
.section-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    width:min(100% - 48px,900px);
    margin:80px auto 70px;
}
.section-divider span{
    flex:1;
    height:1px;
    background:rgba(164,131,99,.28);
}
.section-divider p{
    margin:0;
    color:#A48363;
    font-size:.80rem;
    font-weight:550;
    letter-spacing:.25em;
    white-space:nowrap;
}
/* ======================================================
   FEATURED BOOK
====================================================== */
#featured-book{
    position:relative;
    padding:30px 0;
}
.featured-book-grid{
    display:grid;
    grid-template-columns:440px 1fr;
    gap:64px;
    align-items:center;
}
.featured-book-cover{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.featured-book-cover::before{
    content:"";
    position:absolute;
    width:370px;
    height:320px;
    border-radius:50%;
    background:#F3E8D8;
    opacity:.25;
    filter:blur(65px);
    z-index:-1;
}
.featured-book-cover img{
    width:100%;
    max-width:380px;
    border-radius:14px;
    box-shadow:0 22px 60px rgba(0,0,0,.12);
    transition:transform .45s ease;
}
.featured-book-cover:hover img{
    transform:translateY(-10px) rotate(-1deg);
}
.featured-book-content{
    margin-left:-20px;
    max-width:720px;
}
.featured-book-title{
    margin-bottom:30px;
    font-family:var(--font-display);
    font-size:3.8rem;
    font-weight:500;
    line-height:.95;
    color:var(--color-heading);
}
.featured-book-quote{
    margin-bottom:35px;
    font-family:var(--font-display);
    font-size:1.85rem;
    font-style:italic;
    font-weight:400;
    line-height:1.45;
    margin-bottom:42px;
    color:#9B7655;
    border:none;
}
.featured-book-text{
    margin-bottom:24px;
    font-size:1.12rem;
    line-height:1.95;
    color:#4E4037;
}
.featured-book-content .btn{
    margin-top:20px;
    padding:17px 34px;
}
#featured-book::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:220px;
    height:1px;
    background:linear-gradient(
        to right,
        transparent,
        rgba(164,131,99,.35),
        transparent
    );
}
/* ======================================================
   BOOKS
====================================================== */
.books{
    padding:30px 0;
}
.book-card{
    display:flex;
    flex-direction:column;
    height:100%;
}
.book-card:hover .book-link{
    letter-spacing:.03em;
    transform:translateX(4px);
}
.book-cover{
    position:relative;
    margin-bottom:34px;
}
.book-cover::before{
    content:"";
    position:absolute;
    inset:12%;
    border-radius:50%;
    background:#F3E8D8;
    opacity:.55;
    filter:blur(55px);
    z-index:-1;
}
.book-cover::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    width:160px;
    height:18px;
    border-radius:50%;
    background:rgba(0,0,0,.08);
    filter:blur(14px);
    z-index:-2;
}
.book-body{
    display:flex;
    flex-direction:column;
    flex:1;
    max-width:310px;
    margin:auto;
}
.book-title{
    margin-bottom:18px;
    font-family:var(--font-display);
    font-size:2rem;
    font-weight:500;
    line-height:1.15;
    color:var(--color-heading);
}

.book-description{
    margin-bottom:30px;

    font-size:1rem;
    line-height:1.95;
    color:var(--color-text);
}
.book-cover img{
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        filter .45s ease;
    width:100%;
    max-width:250px;
    border-radius:14px;
    box-shadow:
        0 18px 50px rgba(0,0,0,.10);
}
.book-card:hover .book-cover img{
    transform:
        translateY(-10px)
        scale(1.03)
        rotate(-1deg);
    filter:brightness(1.03);
    box-shadow:
        0 28px 70px rgba(0,0,0,.16);
}
.book-price{
    display:block;
    margin-top:10px;
    margin-bottom:22px;
    font-size:2rem;
    font-weight:700;
    font-family:var(--font-display);
    line-height:1;
    color:var(--color-heading);
}
.book-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    color:#A48363;
    text-decoration:none;
    font-weight:600;
    transition:
        transform .3s ease,
        letter-spacing .3s ease;
}
.books-header{
    max-width:700px;
    margin:0 auto 60px;
    text-align:center;
}
.books-title{
    margin:20px 0;
    font-family:var(--font-display);
    font-size:3.8rem;
    font-weight:500;
    line-height:.95;
    color:var(--color-heading);
}
.books-description{
    font-size:1.15rem;
    line-height:1.9;
    color:var(--color-text);
}
.books-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 280px)
        );

    justify-content: center;

    gap: 80px;

    width: 100%;
}
.books-footer{
    display:flex;
    justify-content:center;
    margin-top:90px;
}

/* ======================================================
   ABOUT
====================================================== */
.about{
    position:relative;
    padding:155px 0;
}

/* ======================================================
   GRID
====================================================== */
.about-grid{
    display:grid;
    grid-template-columns:55% 45%;
    align-items:center;
}

/* ======================================================
   CONTENT
====================================================== */
.about-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.about-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:44px;
}
.about-tag{
    display:inline-block;
    margin-bottom:0;
    color:#A48363;
    font-size:.84rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-bottom:10px;
}
.about-decoration{
    width:150px;
    height:1px;
    margin:22px 0 34px;
    background:#D8C8B7;
}
.about-title{
    font-family:var(--font-display);
    font-size:3.9rem;
    font-weight:500;
    line-height:.95;
    letter-spacing:-.015em;
    color:var(--color-heading);
    margin-bottom:32px;
    text-align:center;
}
.about-intro{
    margin-bottom:30px;
    font-size:1.38rem;
    line-height:1.6;
    color:#4B3B31;
    margin-bottom:36px;
}
.about-text{
    margin-bottom:28px;
    font-size:1.08rem;
    line-height:1.9;
    color:var(--color-text);
}
.about-content strong{
    font-weight:600;
}
.about-content .btn{
    align-self:flex-start;
    margin-top:42px;
}

/* ======================================================
   PHOTO
====================================================== */
.about-photo{
    display:flex;
    height:100%;
}
.about-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    transition:
        transform .45s ease,
        box-shadow .45s ease;
}
.about-photo:hover img{
    transform:translateY(-6px);
}

/* ======================================================
   DECORATION
====================================================== */
.about::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:220px;
    height:1px;
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(164,131,99,.35),
            transparent
        );
}

/* ======================================================
   CONSULTATION
====================================================== */

.consultation{
    padding:160px 0;
    background:#F5EEE7;
}

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

.consultation-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:90px;
    align-items:center;
}

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

.consultation-image{
    display:flex;
    align-items:flex-end;
}

.consultation-image img{
    width:100%;
    display:block;

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

.consultation-image:hover img{
    transform:translateY(-6px);
}

/* ======================================================
   CONTENT
====================================================== */
.consultation-content{
    max-width:520px;
}
.consultation-header{
    margin-bottom:38px;
}
.consultation-tag{
    display:inline-block;
    margin-bottom:18px;
    color:#A48363;
    font-size:.84rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.consultation-title{
    font-family:var(--font-display);
    font-size:3.9rem;
    font-weight:500;
    line-height:.95;
    letter-spacing:-.015em;
    color:var(--color-heading);
}
.consultation-decoration{
    width:150px;
    height:1px;
    margin:28px 0 0;
    background:#D8C8B7;
}
.consultation-text{
    margin-bottom:26px;
    font-size:1.12rem;
    line-height:1.9;
    color:var(--color-text);
}
.consultation-content .btn{
    margin-top:18px;
}
.consultation-note{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    font-size:.9rem;
    line-height:1.6;
    color:#8A8178;
}
.consultation-note i{
    color:#76916A;
}

/* ======================================================
   TESTIMONIALS
====================================================== */
.testimonials-section{
    padding:90px 0 60px;
}
.testimonials-section .section-divider p{
    font-family:var(--font-display);
    font-size:1.15rem;
    font-weight:500;
    letter-spacing:.18em;
    color:#8B7663;
}

/* ======================================================
   GRID
====================================================== */
.testimonials-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,360px));
    justify-content:center;
    gap:32px;
}

/* ======================================================
   CARD
====================================================== */
.testimonial-card{
    padding:34px;
    background:#FFFCF8;
    border:1px solid #D8C7B6;
    border-radius:12px;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}
.testimonial-card:hover{
    transform:translateY(-4px);
    border-color:#C8B39D;
    box-shadow:
        0 12px 28px rgba(0,0,0,.05);
}

/* ======================================================
   TEXT
====================================================== */
.testimonial-text{
    margin-bottom:28px;
    font-size:1.05rem;
    line-height:1.9;
    color:#473D35;
}

/* ======================================================
   FOOTER
====================================================== */
.testimonial-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.testimonial-author{
    font-size:.80rem;
    font-weight:600;
    letter-spacing:.16em;
    color:#8B7663;
}

/* ======================================================
   ICON
====================================================== */
.testimonial-icon{
    width:26px;
    height:26px;
    fill:none;
    stroke:#9C8B79;
    stroke-width:1.5;
    transition:transform .25s ease;
}
.testimonial-card:hover .testimonial-icon{
    transform:scale(1.08);
}