:root {
    --jdc-bg: #f7f5f0;
    --jdc-text: #242323;
    --jdc-muted: #77736e;
    --jdc-accent: #a38966;
    --jdc-line: #e6e1d8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--jdc-bg);
    color: var(--jdc-text);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.6;
}

a { color: inherit; }

img { max-width: 100%; height: auto; }

.jdc-container {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
}

.jdc-skip {
    position: absolute;
    left: -9999px;
}

.jdc-skip:focus {
    left: 15px;
    top: 15px;
    z-index: 100;
    background: white;
    padding: 10px;
}

.jdc-site-header {
    background: rgba(247,245,240,.97);
    border-bottom: 1px solid var(--jdc-line);
}

.jdc-header-inner {
    min-height: 88px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.jdc-brand a {
    text-decoration: none;
    letter-spacing: .15em;
    font-size: 17px;
    font-weight: bold;
}

.jdc-brand .custom-logo { max-height: 65px; width: auto; }

.jdc-navigation a {
    text-decoration: none;
    font: 12px Arial, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.jdc-navigation ul {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 19px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.jdc-site-header .jdc-navigation {
    min-width: 0;
}

.jdc-site-header .melina-motion-nav-item {
    flex: 0 0 36px;
    margin: 0;
    align-self: center;
}

.jdc-site-header .melina-motion-toggle {
    display: inline-flex;
    vertical-align: middle;
}

.jdc-hero {
    min-height: 560px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f7f5f0, #e9e4d9);
}

.jdc-hero-inner { padding-block: 110px; }

.jdc-eyebrow {
    color: var(--jdc-accent);
    font: 11px Arial, sans-serif;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.jdc-hero h1 {
    font-weight: normal;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.12;
    letter-spacing: -.035em;
    margin: 22px 0;
}

.jdc-hero-description {
    color: var(--jdc-muted);
    font-size: 17px;
    max-width: 570px;
}

.jdc-button {
    display: inline-block;
    padding: 14px 25px;
    border: 1px solid var(--jdc-accent);
    margin-top: 22px;
    font: 12px Arial, sans-serif;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
}

.jdc-button:hover { background: #e9e1d6; }

.jdc-gallery-section { padding-block: 90px 110px; }

.jdc-section-heading { margin-bottom: 42px; }

.jdc-section-heading h2 {
    font-size: clamp(27px, 3vw, 38px);
    font-weight: normal;
    margin: 10px 0;
}

.jdc-art-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px 28px;
}

.jdc-art-link { text-decoration: none; }

.jdc-art-image {
    background: #eae6de;
    aspect-ratio: 4/5;
    overflow: hidden;
}

.jdc-art-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jdc-art-placeholder {
    width: 100%;
    height: 100%;
    background: #e7e2d9;
}

.jdc-art-details h2 {
    font-size: 20px;
    font-weight: normal;
    margin: 16px 0 5px;
}

.jdc-art-details p,
.jdc-empty {
    color: var(--jdc-muted);
    font-size: 14px;
}

.jdc-content-page { padding-block: 75px 15px; }

.jdc-reading-width { max-width: 850px; }

.jdc-content-page h1 {
    font-size: clamp(29px, 3.2vw, 43px);
    font-weight: normal;
}

.jdc-single-artwork {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 60px;
    align-items: start;
}

.jdc-single-image { text-align: center; }

.jdc-single-image img { max-height: 80vh; width: auto; }

.jdc-prose { font-size: 16px; }

.jdc-site-footer {
    border-top: 1px solid var(--jdc-line);
    padding-block: 28px;
    font: 12px Arial, sans-serif;
    color: var(--jdc-muted);
}

.jdc-footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.jdc-footer-nav { margin-top: 20px; }
.jdc-footer-nav ul { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0; }
.jdc-footer-nav a { text-decoration: none; }

@media (max-width: 800px) {
    .jdc-header-inner {
        flex-direction: column;
        padding-block: 20px;
        gap: 14px;
    }

    .jdc-hero { min-height: 450px; }

    .jdc-hero-inner { padding-block: 70px; }

    .jdc-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .jdc-single-artwork { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 520px) {
    .jdc-container { width: calc(100% - 32px); }
    .jdc-art-grid { grid-template-columns: 1fr; }
    .jdc-gallery-section { padding-block: 55px; }
    .jdc-navigation {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .jdc-navigation::-webkit-scrollbar { display: none; }
    .jdc-navigation ul {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 12px;
        width: max-content;
        min-width: 100%;
    }
    .jdc-navigation a {
        white-space: nowrap;
        font-size: 11px;
        letter-spacing: .06em;
    }
    .jdc-site-header .melina-motion-nav-item {
        flex-basis: 30px;
    }
    .jdc-site-header .melina-motion-toggle {
        width: 30px;
        height: 30px;
        font-size: 22px;
    }
}

/* ==================================================
   JDC ARTIST GALLERY v0.2.0
   PREMIUM HOMEPAGE
   ================================================== */

.jdc-premium-hero {
    background:
        radial-gradient(
            ellipse at 75% 40%,
            rgba(183,160,126,.11),
            transparent 52%
        ),
        #f8f6f1;
    border-bottom: 1px solid #e5dfd5;
}

.jdc-premium-hero-grid {
    min-height: 560px;
    display: grid;
    grid-template-columns: 47% 53%;
    align-items: center;
    gap: 0;
}

.jdc-premium-intro {
    padding: 55px 65px 55px 0;
}

.jdc-gold-rule {
    width: 52px;
    height: 1px;
    background: #aa8960;
    margin-bottom: 32px;
}

.jdc-premium-intro h1 {
    font-size: clamp(40px, 4.2vw, 66px);
    font-weight: normal;
    line-height: 1.13;
    letter-spacing: -.045em;
    margin: 25px 0 30px;
    max-width: 540px;
}

.jdc-premium-intro h1 em {
    display: block;
    font-weight: normal;
    color: #a58b69;
}

.jdc-premium-description {
    max-width: 440px;
    font-size: 17px;
    line-height: 1.9;
    color: #77716a;
}

.jdc-premium-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 32px;
    padding: 17px 24px;
    border: 1px solid #b19a78;
    color: #3a3128;
    text-decoration: none;
    font: 11px Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .13em;
    transition: background .2s, color .2s;
}

.jdc-premium-button:hover {
    background: #3b302b;
    color: #fff;
}

.jdc-premium-signature {
    margin-top: 50px;
    font: 12px Georgia, serif;
    letter-spacing: .2em;
}

.jdc-premium-signature span {
    display: block;
    margin-top: 8px;
    font: 9px Arial, sans-serif;
    color: #9e9487;
    letter-spacing: .27em;
}

.jdc-premium-feature {
    padding: 70px 0 70px 20px;
    min-width: 0;
}

.jdc-featured-artwork {
    display: block;
    text-decoration: none;
    text-align: center;
}

.jdc-featured-img {
    display: block;
    width: 100%;
    height: 530px;
    object-fit: contain;
}

.jdc-featured-caption {
    display: block;
    margin-top: 20px;
    font-size: 16px;
}

.jdc-feature-placeholder {
    min-height: 550px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background:
        linear-gradient(
            145deg,
            #272125 0%,
            #372631 44%,
            #171416 100%
        );
}

.jdc-feature-lines {
    position: absolute;
    width: 68%;
    height: 72%;
    border: 1px solid rgba(189,154,99,.40);
    transform: rotate(-7deg);
}

.jdc-feature-lines::after {
    content: "";
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(189,154,99,.14);
}

.jdc-feature-words {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font: 35px Georgia, serif;
    letter-spacing: .15em;
    color: #c6a676;
    text-align: center;
}

.jdc-feature-words span:nth-child(2) {
    color: #e9dfd1;
    font-style: italic;
}

.jdc-feature-placeholder p {
    position: absolute;
    bottom: 25px;
    left: 10px;
    right: 10px;
    color: #a99c91;
    text-align: center;
    font: 9px Arial, sans-serif;
    letter-spacing: .2em;
}

.jdc-collection-intro {
    padding: 45px 0 75px;
}

.jdc-section-premium {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 25px;
}

.jdc-section-premium h2 {
    font-size: clamp(29px, 3vw, 41px);
}

.jdc-view-all {
    font: 11px Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #866d50;
    text-decoration: none;
    padding-bottom: 9px;
    border-bottom: 1px solid #bba489;
}

.jdc-collection-empty {
    text-align: center;
    background: #f0ece5;
    padding: 72px 25px;
}

.jdc-collection-empty > span {
    color: #b2946a;
    font-size: 32px;
}

.jdc-collection-empty h3 {
    font-size: 27px;
    font-weight: normal;
    margin: 12px 0;
}

.jdc-collection-empty p {
    font-size: 15px;
    color: #78716a;
}

.jdc-gallery-statement {
    padding: 95px 0 100px;
    text-align: center;
    background: #282326;
}

.jdc-gallery-statement .jdc-eyebrow {
    color: #c6a676;
}

.jdc-statement-text {
    max-width: 800px;
    margin: 35px auto;
    color: #f0e9df;
    font-size: clamp(24px, 3vw, 43px);
    font-weight: normal;
    line-height: 1.4;
}

.jdc-statement-line {
    height: 1px;
    width: 60px;
    margin: auto;
    background: #b99b70;
}

@media (max-width: 900px) {
    .jdc-premium-hero-grid {
        grid-template-columns: 1fr;
    }

    .jdc-premium-intro {
        padding: 70px 0 25px;
    }

    .jdc-premium-feature {
        padding: 25px 0 65px;
    }

    .jdc-premium-signature {
        margin-top: 45px;
    }

    .jdc-feature-placeholder {
        min-height: 440px;
    }
}

@media (max-width: 520px) {
    .jdc-premium-intro h1 {
        font-size: 41px;
    }

    .jdc-feature-placeholder {
        min-height: 340px;
    }

    .jdc-feature-words {
        font-size: 25px;
    }

    .jdc-section-premium {
        align-items: start;
        flex-direction: column;
    }

    .jdc-collection-intro {
        padding: 45px 0;
    }

    .jdc-gallery-statement {
        padding: 65px 0;
    }
}