/* ===========================
   COLORS & GLOBAL SETTINGS
=========================== */

:root {

    --cream: #f5f1eb;
    --text: #1f1f1f;
    --burgundy: #8b1d22;
    --gold: #c9a86b;

}


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    background:var(--cream);
    color:var(--text);
    font-family:'Inter', sans-serif;
    line-height:1.7;

}


h1,
h2 {

    font-family:'Cormorant Garamond', serif;
    font-weight:500;

}



/* ===========================
   HEADER
=========================== */


.site-header {

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem 5%;

}


.logo {
	position:relative;

    width:70px;

    height:55px;
    font-family:'Cormorant Garamond', serif;
    font-size:25rem;
    letter-spacing:.1em;

}
.logo-c {

    position:absolute;
    font-family:'Cormorant Garamond', serif;

    left:0;

    top:-8px;

    font-size:4rem;

    font-weight:500;

    line-height:1;

    color:#1f1f1f;

}



.logo-f {

    position:absolute;
    font-family:'Cormorant Garamond', serif;

    left:20px;

    top:15px;

    font-size:4rem;

    font-weight:500;

    line-height:1;

    color:#8b1d22;
    }
    
.logo::after {

    content:"";

    position:absolute;

    bottom:5px;

    left:8px;

    width:45px;

    height:1px;

    background:#c9a86b;

}

.site-header ul {

    display:flex;
    gap:3rem;
    list-style:none;

}



.site-header a {

    text-decoration:none;
    color:#333;
    letter-spacing:.15em;
    text-transform:uppercase;
    font-size:.85rem;

}






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


.hero {

    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:80vh;

}



.hero-content {

    display:flex;
    flex-direction:column;
   
    justify-content:flex-start;

    padding:4rem 5rem 5rem;;

}



.hero h1 {

    font-size:6rem;
    line-height:.9;
    text-transform:uppercase;

}



.hero h2 {

    color:var(--burgundy);
    font-size:2rem;
    font-style:italic;
    margin:2rem 0;

}



.hero-image {

    position:relative;
    overflow:hidden;

}



.hero-image img {

    width:100%;
    height:100%;
    object-fit:cover;

}



/* HERO VIGNETTE */

.hero-image::after {

    content:"";
    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle,
        transparent 45%,
        rgba(0,0,0,.35) 100%
    );

    pointer-events:none;

}







/* ===========================
   DIVIDERS
=========================== */



.divider {

    width:600px;
    height:40px;
 	margin:1rem auto 0;
	 background-image:url("images/flourish.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

}

.connect-divider {
	width:400px;
    height:40px;
 background-image:url("images/f39e0817-5669-4b2a-9497-09195d8c89a9.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    

}




/* ===========================
   AUDIOBOOK CAROUSEL
=========================== */


.featured-books {
    padding: 6rem 5% 2rem;
    text-align: center;
}


.featured-books h2 {

    font-size:3rem;
    text-transform:uppercase;
    letter-spacing:.12em;

}



.carousel-wrapper {

    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    margin-top:3rem;

}



.carousel-track-container {

    overflow:hidden;
    width:80%;

}



.carousel-track {
    display: flex;
    gap: 2rem;
    overflow: hidden;
    scroll-behavior: smooth;
    padding: 2rem;
}



.book {

    flex:0 0 auto;

}



.book-cover {

    position:relative;
    overflow:hidden;

}



.book-cover img {

    width:220px;
    height:320px;
    display:block;
    object-fit: cover;

    transition:
    transform .4s ease;

}



.book:hover img {

    transform:scale(1.05);

}



/* CAROUSEL BUTTONS */


.carousel-btn {

    background:none;
    border:none;

    color:var(--burgundy);

    font-size:3rem;

    cursor:pointer;

    transition:.3s;

}



.carousel-btn:hover {

    color:var(--gold);

}







/* ===========================
   PREVIEW OVERLAY
=========================== */


.preview-overlay {

    position:absolute;
    inset:0;

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

    background:
    rgba(90,20,25,.78);

    color:white;

    opacity:0;

    transition:
    opacity .4s ease;

}



.book:hover .preview-overlay {

    opacity:1;

}



.speaker-icon {

    width:45px;
    height:45px;

    margin-bottom:.75rem;

}



.speaker-icon svg {

    width:100%;
    height:100%;

    fill:none;
    stroke:white;

    stroke-width:2;

}



.preview-text {

    font-family:'Cormorant Garamond', serif;

    font-size:1.8rem;

    letter-spacing:.3em;

}







/* ===========================
   ABOUT SECTION
=========================== */


.about-section {
    max-width: 1100px;
    margin: -1.5rem auto 0;
    padding: 0 2rem 6rem;
    min-height: 300px;
}

.about-section h2 {
    font-size: 2rem;
    margin: 0 0 1rem;
}

.about-content {
    padding: 0;
    justify-content: center;
}

.about-content p {
    margin-bottom: 0;
}



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


.connect-section {

    position: relative;

    overflow: hidden;

    background:
    linear-gradient(
        135deg,
        #5f0f12,
        #8b1d22
    );

    color: white;

    height: 150px;

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

    text-align: center;

    padding: 0;

}


.connect-section::before {

    content:"";

    position:absolute;

    inset:0;


    background:

    radial-gradient(
        circle,
        transparent 35%,
        rgba(0,0,0,.45)
    );


}



.connect-section > * {

    position:relative;

}



.connect-section h2 {
    margin: 0;
}

.connect-section .divider {
    margin: 0.25rem auto;
}

.contact-grid {

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

    gap: 4rem;

    margin-top: 0.25rem;

}


.contact-grid a {

    color:white;

    text-decoration:none;

    letter-spacing:.1em;

}

.contact-link {

    display:flex;

    flex-direction:column;

    align-items:center;

    color:white;

    text-decoration:none;

    font-size:.85rem;

    letter-spacing:.1em;

}


.contact-icon {

    font-size:2rem;

    margin-bottom:.15rem;

    color:#c9a86b;

}

.instagram-icon {

    width:20px;
    height:20px;

    stroke:#c9a86b;
    fill:none;

    stroke-width:2;
    margin-bottom:2.2rem;

}



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

img {
    max-width:100%;
}

/* Tablet: retain the desktop composition while scaling fixed elements. */
@media (min-width:901px) and (max-width:1200px) {
    .site-header {
        padding-inline:4%;
    }

    .hero {
        grid-template-columns:minmax(0, 1.08fr) minmax(320px, .92fr);
    }

    .hero-content {
        padding:3rem clamp(2.25rem, 5vw, 4rem) 4rem;
    }

    .hero h1 {
        font-size:clamp(4.5rem, 7.5vw, 5.75rem);
    }

    .hero h2 {
        font-size:clamp(1.55rem, 2.5vw, 2rem);
    }

    .divider {
        width:min(100%, 600px);
    }

    .carousel-track-container {
        width:85%;
    }
}

/* Small tablets: move to one clean column. */
@media (max-width:900px) {
    .hero {
        grid-template-columns:1fr;
        min-height:0;
    }

    .hero-content {
        padding:3.5rem clamp(1.5rem, 7vw, 4rem) 3rem;
    }

    .hero h1 {
        font-size:clamp(4rem, 12vw, 5.5rem);
    }

    .hero-image {
        min-height:560px;
    }

    .divider,
    .connect-divider {
        width:min(100%, 600px);
    }

    .carousel-track-container {
        width:82%;
    }

    .about-section {
        width:min(100%, 760px);
        margin:0 auto;
        padding:1rem clamp(1.5rem, 6vw, 3rem) 4.5rem;
    }

    .contact-grid {
        flex-direction:row;
        gap:3rem;
    }
}

/* Phones: compact navigation, one-cover carousel, and touch previews. */
@media (max-width:600px) {
    .site-header {
        min-height:72px;
        padding:.6rem 1rem .7rem;
        gap:.75rem;
    }

    .logo {
        flex:0 0 52px;
        width:52px;
        height:46px;
    }

    .logo-c,
    .logo-f {
        font-size:3rem;
    }

    .logo-c {
        top:-3px;
    }

    .logo-f {
        left:15px;
        top:14px;
    }

    .logo::after {
        bottom:0;
        left:5px;
        width:37px;
    }

    .site-header nav {
        min-width:0;
    }

    .site-header ul {
        justify-content:flex-end;
        flex-wrap:wrap;
        gap:.35rem .85rem;
    }

    .site-header a {
        display:block;
        padding:.4rem 0;
        font-size:.7rem;
        letter-spacing:.1em;
    }

    .hero-content {
        padding:2.5rem 1.25rem 2.25rem;
    }

    .hero h1 {
        font-size:clamp(3.15rem, 17vw, 4.5rem);
        line-height:.86;
    }

    .hero h2 {
        margin:1.25rem 0;
        font-size:clamp(1.4rem, 7vw, 1.8rem);
        line-height:1.2;
    }

    .hero-content p[style] {
        font-size:1.05rem !important;
        line-height:1.55;
    }

    .divider {
        width:100%;
        max-width:360px;
        height:30px;
    }

    .hero-image {
        min-height:0;
        aspect-ratio:4 / 5;
    }

    .featured-books {
        padding:3.75rem .75rem 1.5rem;
    }

    .featured-books h2 {
        font-size:clamp(2rem, 10vw, 2.6rem);
        line-height:1.05;
        letter-spacing:.08em;
    }

    .carousel-wrapper {
        gap:.35rem;
        margin-top:1.5rem;
    }

    .carousel-track-container {
        width:min(72vw, 270px);
    }

    .carousel-track {
        gap:0;
        padding:1rem 0;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
    }

    .carousel-track::-webkit-scrollbar {
        display:none;
    }

    .book {
        flex:0 0 100%;
        scroll-snap-align:center;
    }

    .book-cover {
        width:100%;
    }

    .book-cover img {
        width:100%;
        height:auto;
        aspect-ratio:11 / 16;
    }

    .carousel-btn {
        flex:0 0 44px;
        width:44px;
        height:52px;
        font-size:2.25rem;
    }

    .about-section {
        padding:1.25rem 1.35rem 3.5rem;
    }

    .about-section h2 {
        font-size:2rem;
    }

    .about-content p {
        font-size:1rem;
        line-height:1.75;
    }

    .connect-section {
        height:auto;
        min-height:140px;
        padding:1rem 1.25rem;
    }

    .connect-divider {
        width:min(78vw, 300px);
        height:28px;
    }

    .contact-grid {
        gap:2.75rem;
        margin-top:.35rem;
    }

    .contact-link {
        min-width:44px;
        min-height:44px;
        justify-content:center;
    }

    .contact-icon,
    .instagram-icon {
        margin:0;
        font-size:1.65rem;
    }
}

/* Devices without hover need the preview action to remain discoverable. */
@media (hover:none), (pointer:coarse) {
    .preview-overlay {
        inset:auto 0 0;
        min-height:64px;
        flex-direction:row;
        gap:.6rem;
        background:rgba(90,20,25,.9);
        opacity:1;
    }

    .speaker-icon {
        width:28px;
        height:28px;
        margin:0;
    }

    .preview-text {
        font-size:1.15rem;
        letter-spacing:.2em;
    }

    .book:hover img {
        transform:none;
    }
}

@media (max-width:380px) {
    .site-header {
        align-items:flex-start;
    }

    .site-header ul {
        gap:.15rem .65rem;
    }

    .site-header a {
        font-size:.64rem;
    }

    .carousel-track-container {
        width:min(70vw, 245px);
    }

    .carousel-btn {
        flex-basis:36px;
        width:36px;
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }

    .carousel-track,
    .book-cover img,
    .preview-overlay {
        scroll-behavior:auto;
        transition:none;
    }
}