:root {
    --vigneron-ink: #f8f3e9;
    --vigneron-night: #111310;
    --vigneron-gold: #d5b664;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--vigneron-night);
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--vigneron-ink);
    background: var(--vigneron-night);
    font-family: Georgia, "Times New Roman", serif;
}

a {
    color: inherit;
    text-decoration: none;
}

main {
    width: 100%;
}

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 30;
    color: #fff;
    background: linear-gradient(rgba(7, 9, 7, .64), transparent);
    border: 0;
}

.site-header a,
.site-header button {
    color: inherit;
}

/* The cinematic header is white, but the shared account dropdown is a light
   surface. Keep its actions legible instead of inheriting the page theme. */
.site-header .site-account-chip-menu a,
.site-header .site-account-chip-menu button {
    color: #2b241f;
}

.site-header .site-account-chip-menu .is-signout {
    color: #8d2b28;
}

.vigneron-hero,
.split-section {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    color: var(--vigneron-ink);
    background-color: #24271f;
    background-image:
        linear-gradient(90deg, rgba(7, 9, 7, .82) 0%, rgba(7, 9, 7, .48) 34%, rgba(7, 9, 7, .05) 67%),
        linear-gradient(0deg, rgba(7, 9, 7, .38), transparent 42%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vigneron-hero {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(120px, 16vh, 190px) clamp(28px, 6vw, 108px) clamp(64px, 10vh, 110px);
}

.vigneron-hero-video {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.vigneron-hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100vw, 177.78vh);
    height: max(100vh, 56.25vw);
    border: 0;
    transform: translate(-50%, -50%);
}

.vigneron-hero.has-published-video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(7, 9, 7, .82) 0%, rgba(7, 9, 7, .48) 34%, rgba(7, 9, 7, .08) 67%),
        linear-gradient(0deg, rgba(7, 9, 7, .44), transparent 48%);
    pointer-events: none;
}

.vigneron-hero > :not(.vigneron-hero-video) {
    position: relative;
    z-index: 1;
}

.vigneron-hero-sound-toggle {
    position: absolute;
    right: auto;
    bottom: clamp(16px, 2.4vh, 28px);
    left: clamp(18px, 2.4vw, 38px);
    z-index: 8;
    display: inline-flex;
    width: auto;
    min-width: 0;
    max-width: max-content;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 999px;
    background: rgba(9, 11, 9, .78);
    color: #fff;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .28);
    font: 700 .68rem/1 Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.vigneron-hero-sound-toggle > span:first-child {
    font-size: .88rem;
    line-height: 1;
}

.vigneron-hero-sound-toggle:hover,
.vigneron-hero-sound-toggle[aria-pressed="true"] {
    border-color: var(--vigneron-gold);
    background: rgba(213, 182, 100, .94);
    color: #11130f;
}

.vigneron-hero-sound-toggle:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.vigneron-hero-sound-toggle[hidden] {
    display: none;
}

.vigneron-hero.has-published-image {
    background-image:
        linear-gradient(90deg, rgba(7, 9, 7, .82) 0%, rgba(7, 9, 7, .48) 34%, rgba(7, 9, 7, .05) 67%),
        linear-gradient(0deg, rgba(7, 9, 7, .42), transparent 48%),
        var(--vigneron-section-image);
    background-position: center, center, 72% center;
    background-size: cover, cover, auto 145%;
    background-repeat: no-repeat;
}

.eyebrow,
.section-kicker,
.card-kicker {
    margin: 0 0 18px;
    font-family: Arial, sans-serif;
    font-size: clamp(.64rem, .72vw, .78rem);
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.vigneron-hero h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(3.7rem, 7.2vw, 8.1rem);
    font-weight: 400;
    letter-spacing: -.062em;
    line-height: .88;
    text-wrap: balance;
}

.vigneron-hero .eyebrow {
    max-width: 900px;
    margin: clamp(24px, 3vh, 38px) 0 0;
    font-size: clamp(1.9rem, 2vw, 2.35rem);
    letter-spacing: .16em;
    line-height: 1.08;
}

.vigneron-hero > p:last-child {
    max-width: 1180px;
    margin: clamp(16px, 2vh, 26px) 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(2.6rem, 3vw, 3.85rem);
    line-height: 1.12;
    text-wrap: balance;
}

.intro-section {
    display: none;
}

.split-section {
    display: flex;
    min-height: 78svh;
    align-items: flex-end;
    justify-content: flex-end;
    padding: clamp(62px, 9vw, 124px) clamp(28px, 7vw, 118px);
    background-image:
        linear-gradient(270deg, rgba(8, 10, 8, .8) 0%, rgba(8, 10, 8, .38) 36%, transparent 64%),
        linear-gradient(0deg, rgba(8, 10, 8, .44), transparent 45%);
}

.split-section.has-published-image {
    background-image:
        linear-gradient(270deg, rgba(8, 10, 8, .82) 0%, rgba(8, 10, 8, .4) 37%, transparent 66%),
        linear-gradient(0deg, rgba(8, 10, 8, .46), transparent 48%),
        var(--vigneron-section-image);
    background-position: center, center, center 42%;
    background-size: cover;
}

.split-section > div:first-child,
.split-section > div:last-child:not([data-vigneron-image]) {
    position: relative;
    z-index: 2;
    width: min(620px, 46vw);
    padding: 0;
}

.split-section h2,
.section-header h2,
.journal-section h2 {
    margin: 0;
    font-size: clamp(3rem, 5.8vw, 7.1rem);
    font-weight: 400;
    letter-spacing: -.06em;
    line-height: .9;
    text-wrap: balance;
}

.split-section p:not(.section-kicker),
.journal-section p {
    max-width: 510px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(.98rem, 1.12vw, 1.2rem);
    line-height: 1.7;
}

.feature-image-placeholder {
    display: none;
}

.split-section.reverse {
    min-height: 82svh;
    justify-content: flex-start;
    background-image:
        linear-gradient(90deg, rgba(8, 10, 8, .84), rgba(8, 10, 8, .36) 40%, transparent 69%),
        linear-gradient(0deg, rgba(8, 10, 8, .42), transparent 50%);
}

.split-section.reverse.has-published-image {
    background-image:
        linear-gradient(90deg, rgba(8, 10, 8, .84), rgba(8, 10, 8, .36) 40%, transparent 69%),
        linear-gradient(0deg, rgba(8, 10, 8, .42), transparent 50%),
        var(--vigneron-section-image);
}

.card-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(82px, 9vw, 138px) clamp(22px, 4vw, 72px);
    color: var(--vigneron-ink);
    background: #151713;
}

.section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    max-width: none;
    margin: 0 0 clamp(42px, 5vw, 74px);
}

.section-header h2 {
    max-width: 1000px;
    font-size: clamp(3.4rem, 6vw, 7rem);
}

.vigneron-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 18px);
}

.vigneron-card {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: min(72svh, 780px);
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: clamp(24px, 3vw, 48px);
    border: 0;
    border-radius: 0;
    color: #fff;
    background: #26291f;
}

.vigneron-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(7, 9, 7, .9), rgba(7, 9, 7, .08) 72%);
}

.image-placeholder {
    position: absolute;
    inset: 0;
    z-index: -2;
    min-height: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .25), transparent 35%),
        linear-gradient(135deg, #806c4f, #293026);
}

.image-placeholder.has-published-image {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* The current Custom Crush source is portrait-oriented. Keep the face and
   cap inside wide desktop crops until a landscape replacement is published. */
.vigneron-card:nth-child(2) .image-placeholder.has-published-image {
    background-position: center 12%;
}

.vigneron-card .card-kicker,
.vigneron-card h3,
.vigneron-card > p:last-child {
    position: relative;
    z-index: 1;
    margin-left: 0;
    margin-right: 0;
}

.vigneron-card .card-kicker {
    margin-top: 0;
    color: var(--vigneron-gold);
}

.vigneron-card h3 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: clamp(2rem, 3vw, 3.7rem);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .98;
}

.vigneron-card > p:last-child {
    max-width: 440px;
    margin-top: 0;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .76);
    font-size: clamp(.9rem, 1vw, 1.06rem);
    line-height: 1.58;
}

.journal-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(100px, 14vw, 210px) clamp(28px, 8vw, 140px);
    text-align: left;
    color: var(--vigneron-ink);
    background:
        radial-gradient(circle at 85% 30%, rgba(137, 35, 31, .48), transparent 36%),
        linear-gradient(135deg, #171310, #2d1513);
    border-radius: 0;
}

.journal-section h2,
.journal-section p {
    max-width: 820px;
}

.primary-cta,
.secondary-cta {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    color: #fff;
    background: transparent;
    font-family: Arial, sans-serif;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.vigneron-operations-section {
    max-width: none;
    margin: 0;
    padding: 70px 28px;
    text-align: center;
    color: rgba(255, 255, 255, .72);
    background: #0e100d;
    border: 0;
}

.vigneron-operations-section h2 {
    color: #fff;
}

@media (max-width: 900px) {
    .vigneron-hero {
        min-height: 92svh;
        padding: 130px 24px 58px;
    }

    .vigneron-hero.has-published-image {
        background-image:
            linear-gradient(0deg, rgba(6, 8, 6, .88) 0%, rgba(6, 8, 6, .2) 58%, rgba(6, 8, 6, .1)),
            var(--vigneron-section-image);
        background-position: center, 54% center;
        background-size: cover, auto 118%;
    }

    .vigneron-hero h1 {
        max-width: 520px;
        font-size: clamp(3.4rem, 15vw, 6.2rem);
    }

    .vigneron-hero .eyebrow {
        font-size: clamp(1.45rem, 5vw, 2rem);
    }

    .vigneron-hero > p:last-child {
        max-width: 720px;
        font-size: clamp(1.55rem, 5.4vw, 2.6rem);
    }

    .split-section,
    .split-section.reverse {
        min-height: 78svh;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 70px 24px;
    }

    .split-section.has-published-image,
    .split-section.reverse.has-published-image {
        background-image:
            linear-gradient(0deg, rgba(7, 9, 7, .91), rgba(7, 9, 7, .1) 72%),
            var(--vigneron-section-image);
        background-position: center, center;
    }

    .split-section > div:first-child,
    .split-section > div:last-child:not([data-vigneron-image]) {
        width: min(100%, 620px);
    }

    .split-section h2,
    .section-header h2,
    .journal-section h2 {
        font-size: clamp(3rem, 12vw, 5.4rem);
    }

    .section-header {
        display: block;
    }

    .vigneron-grid {
        grid-template-columns: 1fr;
    }

    .vigneron-card {
        min-height: 76svh;
    }
}

@media (max-width: 520px) {
    .vigneron-hero {
        min-height: 88svh;
    }

    .vigneron-hero > p:last-child {
        font-size: clamp(1.42rem, 6.6vw, 1.82rem);
        line-height: 1.2;
    }

    .card-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .vigneron-grid {
        gap: 12px;
    }

    .vigneron-card {
        min-height: 68svh;
        padding: 28px 22px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .vigneron-hero,
    .split-section,
    .vigneron-card {
        animation: vigneron-reveal .8s ease both;
    }

    @keyframes vigneron-reveal {
        from {
            opacity: .5;
            transform: scale(1.008);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}