/* ==================================================
   NITALE CREATIONS — SINGLE STYLESHEET
================================================== */

/* ==================================================
   SHARED WEBSITE STYLES
================================================== */

:root {

    --paper: #fbf8f2;

    --paper-deep: #f3ece2;

    --charcoal: #40352e;

    --soft-charcoal: #6c5d53;

    --gold: #b9985a;

    --gold-light: #ddc99f;

    --green: #7d9273;

    --white: #ffffff;

    --shadow:
        0 16px 40px
        rgba(73, 55, 42, 0.13);

    --soft-shadow:
        0 10px 28px
        rgba(73, 55, 42, 0.10);

    --serif:
        Georgia,
        "Times New Roman",
        serif;

    --sans:
        Arial,
        Helvetica,
        sans-serif;

}

* {

    box-sizing: border-box;

}

body {

    margin: 0;

    color: var(--charcoal);

    background: var(--paper);

    font-family: var(--sans);

    line-height: 1.6;

}

img {

    display: block;

    width: 100%;

}

h1,
h2,
h3 {

    margin-top: 0;

    font-family: var(--serif);

    font-weight: 400;

    line-height: 1.15;

}

.page-shell {

    width:
        min(
            1180px,
            calc(100% - 36px)
        );

    margin-right: auto;

    margin-left: auto;

}


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

.site-header {

    position: sticky;

    top: 0;

    z-index: 100;

    background:
        rgba(251, 248, 242, 0.96);

    border-bottom:
        1px solid
        rgba(185, 152, 90, 0.25);

}

.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 94px;

}

.brand {

    display: inline-flex;

    align-items: center;

    flex: 0 0 auto;

    text-decoration: none;

}

.brand-logo {

    display: block;

    width: 250px;

    max-width: 32vw;

    height: auto;

}

.site-nav ul {

    display: flex;

    gap: 20px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.site-nav a {

    color: var(--red);

    text-decoration: none;

}

.site-nav a:hover {

    color: var(--gold);

}

.menu-toggle {

    display: none;

}


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

.page-hero {

    position: relative;

    width: min(72%, 1120px);

    margin:
        18px
        auto
        0;

    overflow: hidden;

    background: transparent;

    border-radius: 18px;

    box-shadow: var(--shadow);

}

.page-hero-image {

    display: block;

    width: 100%;

    height: auto;

    margin: 0;

}

.page-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(38, 29, 24, 0.58),
            rgba(38, 29, 24, 0.10) 62%,
            transparent
        );

}

.page-hero-content {

    position: absolute;

    bottom: 9%;

    left: 8%;

    width: min(440px, 84%);

    color: var(--white);

    text-shadow:
        0 2px 16px
        rgba(32, 24, 20, 0.42);

}

.page-hero-eyebrow {

    color: var(--gold-light);

    font-family: var(--serif);

    font-style: italic;

}

.page-hero h1 {

    margin-bottom: 12px;

    font-size:
        clamp(
            2.6rem,
            6vw,
            5rem
        );

}

.page-hero-text {

    max-width: 650px;

    margin-bottom: 0;

    font-family: var(--serif);

}


/* ==================================================
   SHARED INNER PAGE STYLES
================================================== */

.page-introduction {

    max-width: 850px;

    padding:
        54px
        0
        30px;

    text-align: center;

}

.page-introduction h2,
.section-heading h2,
.intro-section h2 {

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

}

.page-introduction p,
.section-heading p,
.intro-section p {

    color: var(--soft-charcoal);

    font-family: var(--serif);

    font-size: 1.08rem;

}

.product-grid {

    display: grid;

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

    gap: 26px;

    padding-bottom: 64px;

}

.product-card {

    overflow: hidden;

    background: var(--white);

    border-radius: 18px;

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

}

.product-card img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 8px;

}

.product-card h3 {

    margin:
        20px
        22px
        8px;

}

.product-card p {

    margin:
        0
        22px
        24px;

    color: var(--soft-charcoal);

    font-family: var(--serif);

}


/* ==================================================
   HOMEPAGE-ONLY STYLES
================================================== */

.home-page .intro-section {

    max-width: 840px;

    padding:
        44px
        0;

    text-align: center;

}

.home-page .collections-section {

    padding-bottom: 64px;

}

.home-page .section-heading {

    max-width: 700px;

    margin:
        0
        auto
        32px;

    text-align: center;

}

.home-page .collection-grid {

    display: grid;

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

    gap:
        38px
        30px;

}

.home-page .collection-card {

    text-align: center;

}

.home-page .circle-image {

    display: block;

    width:
        min(
            100%,
            310px
        );

    aspect-ratio: 1;

    margin:
        0
        auto
        18px;

    overflow: hidden;

    border:
        11px solid
        #fffdf8;

    border-radius: 50%;

    outline:
        1px solid
        rgba(185, 152, 90, 0.68);

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

}

.home-page .circle-image img {

    height: 100%;

    object-fit: cover;

}

.home-page .collection-card p {

    color: var(--soft-charcoal);

    font-family: var(--serif);

}

.text-link {

    color: var(--charcoal);

    text-decoration: none;

    border-bottom:
        1px solid
        var(--gold);

}


/* ==================================================
   CARDS PAGE-ONLY STYLES
================================================== */

.cards-page .product-card {

    border-top:
        4px solid
        rgba(196, 138, 138, 0.55);

}


/* ==================================================
   INVITATIONS PAGE-ONLY STYLES
================================================== */

.invitations-page .product-card {

    border-top:
        4px solid
        rgba(185, 152, 90, 0.55);

}


/* ==================================================
   ART PRINTS PAGE-ONLY STYLES
================================================== */

.art-prints-page .product-card {

    border-top:
        4px solid
        rgba(125, 146, 115, 0.55);

}


/* ==================================================
   BOOKS PAGE-ONLY STYLES
================================================== */

.books-page .product-card {

    border-top:
        4px solid
        rgba(124, 153, 181, 0.48);

}


/* ==================================================
   SURFACE PATTERNS PAGE-ONLY STYLES
================================================== */

.surface-patterns-page .product-card {

    border-top:
        4px solid
        rgba(156, 125, 163, 0.48);

}


/* ==================================================
   STUDIO DOOR PAGE-ONLY STYLES
================================================== */

.studio-door-page .about-layout {

    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    align-items: center;

    gap: 48px;

    padding:
        58px
        0
        68px;

}

.studio-door-page .about-image img {

    border-radius: 20px;

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

}

.studio-door-page .about-copy p {

    color: var(--soft-charcoal);

    font-family: var(--serif);

}


/* ==================================================
   CONTACT PAGE-ONLY STYLES
================================================== */

.contact-page .contact-layout {

    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap: 48px;

    padding:
        58px
        0
        68px;

}

.contact-page .contact-form {

    display: grid;

    gap: 10px;

    padding: 28px;

    background: var(--white);

    border-radius: 20px;

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

}

.contact-page input,
.contact-page textarea {

    width: 100%;

    padding: 12px;

    border:
        1px solid
        rgba(108, 93, 83, 0.28);

    border-radius: 8px;

    font: inherit;

}

.contact-page .button {

    justify-self: start;

    padding:
        11px
        20px;

    color: var(--white);

    background: var(--green);

    border: 0;

    border-radius: 999px;

}


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

.site-footer {

    background: var(--paper-deep);

    border-top:
        1px solid
        rgba(185, 152, 90, 0.25);

}

.footer-inner {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    padding:
        32px
        0;

}

.footer-links {

    display: flex;

    gap: 18px;

}

.footer-links a {

    color: var(--charcoal);

    text-decoration: none;

}

.copyright {

    margin: 0;

    padding-bottom: 20px;

    text-align: center;

}


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

@media (max-width: 980px) {

    .menu-toggle {

        display: block;

        padding: 8px 14px;

        background: var(--white);

        border:
            1px solid
            rgba(185, 152, 90, 0.5);

        border-radius: 999px;

    }

    .site-nav {

        position: absolute;

        top: 76px;

        right: 18px;

        left: 18px;

        display: none;

        padding: 18px;

        background: var(--paper);

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

    }

    .site-nav.is-open {

        display: block;

    }

    .site-nav ul {

        display: grid;

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

    }

    .product-grid,
    .home-page .collection-grid {

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

    }

}



@media (max-width: 700px) {

    .brand-logo {

        width: 190px;

        max-width: 58vw;

    }



    .page-hero {

        width: 90%;

        border-radius: 14px;

    }

    .page-hero-content {

        bottom: 6%;

        left: 6%;

        width: 88%;

    }

    .page-hero h1 {

        margin-bottom: 6px;

        font-size: clamp(2rem, 10vw, 3.2rem);

    }

    .page-hero-text {

        font-size: 0.95rem;

        line-height: 1.45;

    }



    .page-hero-image {

        width: 92%;

    }



    .brand-tagline {

        display: none;

    }

    .page-hero-content {

        right: 24px;

        bottom: 24px;

        left: 24px;

    }

    .product-grid,
    .home-page .collection-grid,
    .studio-door-page .about-layout,
    .contact-page .contact-layout {

        grid-template-columns: 1fr;

    }

    .footer-inner {

        align-items: flex-start;

        flex-direction: column;

    }

}

@media (max-width: 480px) {

    .page-hero-overlay {

        display: none;

    }

    .page-hero-content {

        position: static;

        padding: 22px;

        color: var(--charcoal);

        background: var(--white);

        text-shadow: none;

    }

}