/* =========================
   COLOR SYSTEM
========================= */
:root {
    --fog: #C8C0B4;
    --cement: #A89D90;
    --beige: #D8C7AF;
    --clay: #C78F6B;
    --stone: #8C857A;
    --ink: #2A2624;
    --smoke: #6F6C66;
    --white: #EEE7DA;
}

/* =========================
   RESET
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

/* CONTINUOUS ATMOSPHERIC BACKGROUND */
body{
    background: linear-gradient(
        180deg,
        var(--white) 0%,
        var(--fog) 55%,
        var(--cement) 140%
    );
    color: var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
}

/* =========================
   GLOBAL
========================= */
img{
    width:100%;
    display:block;
}

section{
    width:100%;
    position:relative;
}

.container{
    width:min(1200px,92%);
    margin:auto;
}

/* =========================
   HERO
========================= */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:80px 0;
    border-bottom:1px solid rgba(42,38,36,.08);

    position:relative;
}

/* SOFT LIGHT LAYER (instead of harsh gradient section break) */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(
        circle at 50% 20%,
        rgba(216,199,175,.35),
        transparent 60%
    );
    pointer-events:none;
}

.hero-inner{
    max-width:900px;
    position:relative;
}

.hero h1{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(4rem,11vw,9rem);
    line-height:.9;
    font-weight:600;
    letter-spacing:-3px;
    margin-bottom:25px;
}

.hero p{
    max-width:700px;
    margin:auto;
    color: var(--smoke);
    line-height:1.8;
    font-size:1rem;
}

.scroll-indicator{
    margin-top:70px;
    font-size:.8rem;
    letter-spacing:4px;
    text-transform:uppercase;
    opacity:.45;
}

/* =========================
   FEATURE SECTION
========================= */
.feature-section{
    padding:140px 0 120px;
    position:relative;
}

/* SOFT MATERIAL BLEED */
.feature-section::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(200,192,180,.45),
        transparent 70%
    );
    opacity:.6;
    pointer-events:none;
}

.feature-wrapper{
    position:relative;
    width:100%;
    max-width:900px;
    margin:auto;
    perspective:1800px;
}

/* =========================
   MAIN CARD
========================= */
.main-card{
    position:relative;
    width:100%;
    aspect-ratio:4/5;
    border-radius:28px;
    overflow:hidden;
    transform-style:preserve-3d;
    transition:1s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;

    box-shadow:
    0 30px 80px rgba(70,55,45,.14);
}

.main-card.flip{
    transform:rotateY(180deg);
}

.card-face{
    position:absolute;
    inset:0;
    backface-visibility:hidden;
}

.card-front,
.card-back{
    width:100%;
    height:100%;
}

.card-front{
    background:
    linear-gradient(
        rgba(42,38,36,.15),
        rgba(42,38,36,.35)
    ),
    url('https://images.unsplash.com/photo-1542727365-19732a80dcfd?q=80&w=1600&auto=format&fit=crop')
    center/cover;
}

.card-back{
    transform:rotateY(180deg);
    background: var(--fog);

    display:flex;
    align-items:center;
    justify-content:center;

    font-family:'Cormorant Garamond',serif;
    font-size:3rem;
    letter-spacing:2px;

    color: var(--ink);
}

/* =========================
   BUTTON
========================= */
.show-btn{
    margin:50px auto 0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border:1px solid rgba(42,38,36,.12);

    background: var(--beige);
    color: var(--ink);

    border-radius:999px;

    cursor:pointer;
    transition:.35s ease;

    font-size:.85rem;
    letter-spacing:2px;
    text-transform:uppercase;
}

.show-btn:hover{
    background: var(--clay);
    color:#fff;
    transform:translateY(-3px);
}

/* =========================
   CARD SPREAD
========================= */
.spread{
    position:relative;
    width:100%;
    height:550px;
    margin-top:70px;
}

.small-card{
    position:absolute;
    width:220px;
    aspect-ratio:4/5;
    border-radius:22px;
    overflow:hidden;

    top:50%;
    left:50%;

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

    opacity:0;

    transition:1s cubic-bezier(.2,.8,.2,1);

    box-shadow:
    0 20px 60px rgba(70,55,45,.18);
}

.small-card img{
    height:100%;
    object-fit:cover;
    cursor:pointer;
}

/* ACTIVE POSITIONS */
.spread.active .card1{
    transform:translate(-520px,-50%) rotate(-22deg);
    opacity:1;
}

.spread.active .card2{
    transform:translate(-340px,-53%) rotate(-14deg);
    opacity:1;
}

.spread.active .card3{
    transform:translate(-160px,-50%) rotate(-6deg);
    opacity:1;
}

.spread.active .card4{
    transform:translate(0px,-48%) rotate(4deg);
    opacity:1;
}

.spread.active .card5{
    transform:translate(180px,-50%) rotate(12deg);
    opacity:1;
}

.spread.active .card6{
    transform:translate(360px,-52%) rotate(20deg);
    opacity:1;
}

/* =========================
   BIO
========================= */
.bio{
    padding:180px 0;
    border-top:1px solid rgba(42,38,36,.08);
    position:relative;
}

/* SOFT TRANSITION LAYER */
.bio::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(216,199,175,.25),
        transparent 65%
    );
    pointer-events:none;
}

.bio-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:start;
    position:relative;
}

.bio-title{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(3rem,7vw,6rem);
    line-height:.95;
}

.bio-copy{
    color: var(--smoke);
    line-height:2;
    font-size:1rem;
}

.bio-copy p{
    margin-bottom:28px;
}

/* =========================
   FOOTER
========================= */
.footer{
    padding:80px 0 140px;
    text-align:center;

    border-top:1px solid rgba(42,38,36,.08);

    background: var(--ink);
    color: var(--white);
}

.footer h3{
    font-family:'Cormorant Garamond',serif;
    font-size:2rem;
    margin-bottom:10px;
}

.footer p{
    opacity:.6;
    letter-spacing:1px;
}

/* =========================
   FLOATING BUTTON
========================= */
.floating-book-btn{
    position:fixed;
    bottom:30px;
    right:30px;
    z-index:9999;

    padding:18px 32px;

    background: var(--ink);
    color: var(--white);

    text-decoration:none;
    text-transform:uppercase;

    letter-spacing:2px;
    font-size:.8rem;
    font-weight:600;

    border-radius:999px;

    box-shadow:
    0 12px 40px rgba(42,38,36,.22);

    transition:.35s ease;
}

.floating-book-btn:hover{
    transform:translateY(-4px);
    background: var(--clay);
    color:#fff;
}

/* =========================
   LIGHTBOX
========================= */
.lightbox{
    position:fixed;
    inset:0;

    background: rgba(42,38,36,.92);

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;
    pointer-events:none;

    transition:.4s ease;

    z-index:99999;
    padding:40px;
}

.lightbox.active{
    opacity:1;
    pointer-events:auto;
}

.lightbox img{
    max-width:90%;
    max-height:90%;
    object-fit:contain;
    border-radius:18px;
}

.close-lightbox{
    position:absolute;
    top:30px;
    right:40px;

    font-size:4rem;

    color: var(--white);

    cursor:pointer;
    line-height:1;
    font-weight:200;
}

/* =========================
   MOBILE
========================= */
@media(max-width:950px){

    .spread{
        height:950px;
    }

    .small-card{
        width:180px;
    }

    .spread.active .card1{
        transform:translate(-50%,-420px) rotate(-12deg);
    }

    .spread.active .card2{
        transform:translate(-50%,-250px) rotate(10deg);
    }

    .spread.active .card3{
        transform:translate(-50%,-80px) rotate(-7deg);
    }

    .spread.active .card4{
        transform:translate(-50%,90px) rotate(8deg);
    }

    .spread.active .card5{
        transform:translate(-50%,260px) rotate(-10deg);
    }

    .spread.active .card6{
        transform:translate(-50%,430px) rotate(11deg);
    }

    .bio-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .hero h1{
        letter-spacing:-1px;
    }

    .close-lightbox{
        top:20px;
        right:25px;
        font-size:3rem;
    }

    .floating-book-btn{
        bottom:20px;
        right:20px;

        padding:16px 24px;

        font-size:.75rem;
    }
}