/* ==========================================================================
   Tufa Winery — "Our Wines" premium collection
   Palette: warm cellar blacks/creams + the existing pastel bottle mats
   ========================================================================== */

:root {
    --tw-ink: #191715;
    --tw-cream: #f7f4ed;
    --tw-stone: #b3aa9d;
    --tw-gold: #c8a15c;
    --tw-font-display: 'Cormorant Garamond', 'Times New Roman', serif;
    --tw-font-body: 'Montserrat', 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   Editorial hero
   -------------------------------------------------------------------------- */
.tw-hero {
    position: relative;
    background: var(--tw-ink);
    color: var(--tw-cream);
    overflow: hidden;
    padding: clamp(7rem, 13vw, 11.5rem) 0 clamp(5rem, 9vw, 8rem);
    text-align: center;
}

.tw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 62% 52% at 50% -4%, rgba(200, 161, 92, .16), transparent 70%),
        radial-gradient(ellipse 40% 46% at 82% 108%, rgba(200, 161, 92, .09), transparent 72%);
    pointer-events: none;
}

/* Abstract vineyard contours keep the opening about the whole estate. */
.tw-landscape{position:absolute;inset:0;pointer-events:none;opacity:.3}
.tw-landscape svg{width:100%;height:100%;fill:none;stroke:var(--tw-gold);stroke-width:1}
.tw-landscape circle{fill:#c8a15c12;stroke-width:.8}
.tw-hero-content{position:relative;z-index:1}
.tw-hero .tw-place{font:500 .62rem/1.5 var(--tw-font-body);letter-spacing:.32em;color:var(--tw-gold);margin:2rem 0 1.2rem}
.tw-hero .lead{padding:12px;background:radial-gradient(ellipse,#191715b8,transparent 75%)}

.tw-kicker {
    display: inline-block;
    font: 600 .68rem/1 var(--tw-font-body);
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--tw-gold);
    margin-bottom: 1.6rem;
}

.tw-hero h1 {
    font: 500 clamp(2.9rem, 6vw, 4.8rem)/1.06 var(--tw-font-display);
    letter-spacing: .01em;
    margin-bottom: 1.6rem;
    color: var(--tw-cream);
}

.tw-hero h1 em {
    font-style: italic;
    color: var(--tw-gold);
}

.tw-hero .lead {
    max-width: 560px;
    margin: 0 auto;
    font: 300 1.02rem/1.8 var(--tw-font-body);
    letter-spacing: .02em;
    color: rgba(247, 244, 237, .72);
}

.tw-hero .count {
    margin-top: 2.8rem;
    font: 500 .72rem/1 var(--tw-font-body);
    letter-spacing: .34em;
    text-transform: uppercase;
    color: rgba(247, 244, 237, .45);
}

.tw-hero .count b {
    color: var(--tw-gold);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Filter row
   -------------------------------------------------------------------------- */
.tw-filterbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(247, 244, 237, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(25, 23, 21, .08);
}

.tw-filterbar .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem 2.6rem;
    padding: 1.15rem 1rem;
}

.tw-filter {
    appearance: none;
    background: none;
    border: 0;
    padding: .3rem 0;
    font: 600 .72rem/1 var(--tw-font-body);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(25, 23, 21, .4);
    cursor: pointer;
    position: relative;
    transition: color .25s ease;
}

.tw-filter::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -.35rem;
    width: 0;
    height: 1px;
    background: var(--tw-gold);
    transform: translateX(-50%);
    transition: width .3s ease;
}

.tw-filter:hover { color: var(--tw-ink); }

.tw-filter.active {
    color: var(--tw-ink);
}

.tw-filter.active::after { width: 100%; }

/* Hidden radios drive the filtering; labels do the acting. */
.tw-filter input { display: none; }

/* --------------------------------------------------------------------------
   Collection rows
   -------------------------------------------------------------------------- */
.tw-collection {
    background: var(--tw-cream);
    padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.tw-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    border-bottom: 1px solid rgba(25, 23, 21, .09);
}

.tw-row:last-child { border-bottom: 0; }

.tw-row.is-flipped .tw-visual { order: 2; }
.tw-row.is-flipped .tw-copy { order: 1; }

.tw-visual {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    aspect-ratio: 4 / 4.6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}

.tw-visual img {
    width: 58%;
    height: auto;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.tw-row:hover .tw-visual {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(25, 23, 21, .16);
}

.tw-row:hover .tw-visual img { transform: scale(1.06); }

.tw-visual .shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 70% at 50% 110%, rgba(0, 0, 0, .14), transparent 65%);
    pointer-events: none;
}

.tw-visual .mat {
    position: absolute;
    top: 1.1rem;
    left: 1.3rem;
    font: 600 .62rem/1 var(--tw-font-body);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(25, 23, 21, .45);
}

/* Pastel mats kept from the original design language */
.tw-mat-merlot { background: #f6e7e5; }
.tw-mat-cabernet { background: #e6eee8; }
.tw-mat-chardonnay { background: #f7f0dc; }

.tw-copy .varietal {
    font: 500 .68rem/1 var(--tw-font-body);
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--tw-gold);
    margin-bottom: 1rem;
}

.tw-copy h2 {
    font: 500 clamp(2rem, 3.4vw, 3rem)/1.1 var(--tw-font-display);
    color: var(--tw-ink);
    margin-bottom: .4rem;
}

.tw-copy .badge {
    display: inline-block;
    font: 700 .58rem/1 var(--tw-font-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tw-ink);
    border: 1px solid rgba(200, 161, 92, .55);
    border-radius: 999px;
    padding: .42em .95em;
    margin-bottom: 1.1rem;
}

.tw-copy .badge + .varietal { margin-top: 1.4rem; }

.tw-copy p {
    font: 400 .96rem/1.85 var(--tw-font-body);
    color: rgba(25, 23, 21, .66);
    margin-bottom: 1.7rem;
}

.tw-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2.4rem;
    margin-bottom: 1.9rem;
}

.tw-facts span {
    font: 500 .66rem/1.6 var(--tw-font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(25, 23, 21, .5);
}

.tw-facts b {
    display: block;
    font: 600 .78rem/1.4 var(--tw-font-body);
    letter-spacing: .06em;
    color: var(--tw-ink);
}

.tw-link {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font: 600 .74rem/1 var(--tw-font-body);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tw-ink);
    text-decoration: none;
    padding-bottom: .45rem;
    border-bottom: 1px solid rgba(200, 161, 92, .8);
    transition: gap .25s ease, color .25s ease;
}

.tw-link:hover { color: var(--tw-gold); gap: 1.1rem; }

/* --------------------------------------------------------------------------
   Cuvée feature (the Reserve)
   -------------------------------------------------------------------------- */
.tw-cuvee {
    position: relative;
    background: var(--tw-ink);
    color: var(--tw-cream);
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.tw-cuvee::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 60% at 18% 20%, rgba(200, 161, 92, .13), transparent 68%);
    pointer-events: none;
}

.tw-cuvee .grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.tw-cuvee .bottle {
    width: min(62%, 300px);
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 34px 50px rgba(0, 0, 0, .55));
}

.tw-cuvee .tw-cuvee-mark {
    font: 600 .68rem/1 var(--tw-font-body);
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--tw-gold);
    margin-bottom: 1.4rem;
}

.tw-cuvee h2 {
    font: 500 clamp(2.4rem, 4.4vw, 3.9rem)/1.08 var(--tw-font-display);
    color: var(--tw-cream);
    margin-bottom: 1.4rem;
}

.tw-cuvee .motto {
    font-style: italic;
    color: rgba(247, 244, 237, .58);
}

.tw-cuvee p.body {
    font: 300 .98rem/1.9 var(--tw-font-body);
    color: rgba(247, 244, 237, .7);
    max-width: 480px;
    margin: 0 auto 2.2rem;
}

.tw-cuvee .pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    border-top: 1px solid rgba(247, 244, 237, .16);
    padding-top: 1.8rem;
}

.tw-cuvee .pillars span {
    font: 500 .6rem/1 var(--tw-font-body);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(247, 244, 237, .45);
    display: block;
    margin-bottom: .5rem;
}

.tw-cuvee .pillars b {
    font: 600 .82rem/1.5 var(--tw-font-body);
    color: var(--tw-cream);
}

/* --------------------------------------------------------------------------
   Cellar invitation
   -------------------------------------------------------------------------- */
.tw-invite {
    background: var(--tw-cream);
    text-align: center;
    padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.tw-invite h2 {
    font: 500 clamp(2.2rem, 4vw, 3.4rem)/1.14 var(--tw-font-display);
    color: var(--tw-ink);
    max-width: 640px;
    margin: 0 auto 1.3rem;
}

.tw-invite p {
    font: 400 .98rem/1.8 var(--tw-font-body);
    color: rgba(25, 23, 21, .62);
    max-width: 520px;
    margin: 0 auto 2.4rem;
}

.tw-invite .btn-brand {
    background: var(--tw-ink);
    color: var(--tw-cream);
    border-radius: 999px;
    padding: 1rem 2.6rem;
    font: 600 .74rem/1 var(--tw-font-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    border: 0;
    transition: background .25s ease, transform .25s ease;
}

.tw-invite .btn-brand:hover {
    background: var(--tw-gold);
    color: var(--tw-ink);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .tw-row,
    .tw-cuvee .grid {
        grid-template-columns: 1fr;
    }

    .tw-row.is-flipped .tw-visual { order: 1; }
    .tw-row.is-flipped .tw-copy { order: 2; }

    .tw-visual { aspect-ratio: 4 / 3.4; }
    .tw-visual img { width: 44%; }

    .tw-cuvee .bottle { width: min(44%, 220px); }
}

@media (max-width: 575px) {
    .tw-filterbar .wrap { gap: .4rem 1.4rem; }
    .tw-facts { gap: .8rem 1.6rem; }
    .tw-cuvee .pillars { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* Reveal from the side occupied by each product, without horizontal scrolling. */
.tw-collection{overflow-x:clip}
.tw-row[hidden]{display:none}
/* Observe the stationary row; animate its contents so movement cannot retrigger the observer. */
[data-wine-reveal]>.tw-visual,[data-wine-reveal]>.tw-copy{opacity:1;transform:translateX(0);transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s ease}
[data-wine-reveal].tw-reveal-pending>.tw-visual,[data-wine-reveal].tw-reveal-pending>.tw-copy{opacity:0;transform:translateX(clamp(-280px,-20vw,-70px));transition:none}
.tw-row.is-flipped.tw-reveal-pending>.tw-visual,.tw-row.is-flipped.tw-reveal-pending>.tw-copy{transform:translateX(clamp(70px,20vw,280px))}
.tw-empty{text-align:center;padding:3rem 1rem;color:var(--tw-ink)}
.tw-cuvee .tw-link{color:var(--tw-cream);margin-bottom:2rem}
@media(prefers-reduced-motion:reduce){[data-wine-reveal],[data-wine-reveal].tw-reveal-pending,.tw-row.is-flipped.tw-reveal-pending{opacity:1;transform:none;transition:none}.tw-visual,.tw-visual img{transition:none}.tw-row:hover .tw-visual,.tw-row:hover .tw-visual img{transform:none}}

@media(prefers-reduced-motion:reduce){[data-wine-reveal]>.tw-visual,[data-wine-reveal]>.tw-copy,[data-wine-reveal].tw-reveal-pending>.tw-visual,[data-wine-reveal].tw-reveal-pending>.tw-copy{opacity:1;transform:none;transition:none}}

@media(max-width:767px){.tw-filterbar{top:64px}.tw-filterbar .wrap{gap:12px 20px;padding:10px 16px}.tw-filter{min-height:40px;letter-spacing:.12em}.tw-filterbar .tw-link{min-height:40px;align-items:center}.tw-row{gap:24px;padding:32px 0}.tw-copy h2{overflow-wrap:anywhere}.tw-visual .mat{right:16px;line-height:1.6;letter-spacing:.14em}.tw-visual img{max-height:90%;object-fit:contain}.tw-facts{gap:16px 22px}.tw-cuvee .pillars{grid-template-columns:1fr}.tw-hero h1{font-size:clamp(36px,9vw,56px)}.tw-hero .lead{font-size:16px}.tw-invite .btn-brand{max-width:100%;white-space:normal;line-height:1.6;padding:14px 22px}}