/* Generated by Brand Engine. Do not edit by hand. */
@import url('https://fonts.googleapis.com/css2?family=Minion+Pro:wght@400;500;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'MinionVariableConcept-Roman', 'Minion Pro', Georgia, serif; background-color: #f5f0eb; color: #302b2b; max-width: 1440px; margin-inline: auto; }
/* ─── HERO ─── */
.site-header { background-image: url('assets/images/layer-30.png'); background-size: cover; background-position: 65% top; min-height: clamp(440px, 70vh, 541px); display: flex; align-items: flex-start; }
.logo-block { width: clamp(280px, 33%, 476px); margin-left: clamp(20px, 17.2%, 247px); margin-top: clamp(32px, 6vh, 54px); display: inline-flex; flex-direction: column; align-items: center; }
.brand { display: block; }
.brand a { display: block; }
.brand img { width: 100%; height: auto; display: block; }
.tagline { font-family: 'MinionVariableConcept-Roman', Georgia, serif; font-size: clamp(14px, 2vw, 24.68px); color: #5a3320; text-align: center; font-style: normal; font-weight: 400; opacity: 0.8; margin-top: 6px; }
/* ─── HERO/INTRO DIVIDER ─── */
.section-divider { width: 100%; height: 51px; background-size: 100% 100%; background-repeat: no-repeat; }
.divider-hero-intro { background-image: url('assets/images/vector-smart-object-copy-3.png'); }
/* ─── INTRO SECTION ─── */
.intro-section { display: flex; align-items: stretch; padding-block: 0; background-color: #f5f0eb; }
.intro-content { flex: 0 0 50%; max-width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 0; padding-inline: clamp(24px, 4vw, 80px); gap: 20px; }
.intro-emblem { width: 76px; height: 67px; display: block; }
.intro-body { font-family: 'MinionVariableConcept-Roman', Georgia, serif; font-size: clamp(16px, 1.6vw, 18px); color: #585855; line-height: 1.6; font-weight: 400; }
.intro-photo { flex: 0 0 50%; max-width: 50%; width: 100%; height: auto; display: block; }
/* ─── WINE CARDS — GRID LAYOUT ─── */
.wine-card { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; background-color: #f5f0eb; }
.wine-photo { grid-column: 1; grid-row: 1 / 3; width: 100%; height: auto; display: block; }
.card-top-accent { grid-column: 2; grid-row: 1; width: 100%; height: 51px; background-size: 100% 100%; background-repeat: no-repeat; }
.wine-content { grid-column: 2; grid-row: 2; padding-top: 40px; padding-bottom: 40px; padding-inline: clamp(24px, 4vw, 72px); position: relative; }
/* Per-card accent images — one bar per card from manifest */
.wine-card:nth-of-type(1) .card-top-accent { background-image: url('assets/images/vector-smart-object-copy.png'); }
.wine-card:nth-of-type(2) .card-top-accent { background-image: url('assets/images/vector-smart-object.png'); }
.wine-card:nth-of-type(3) .card-top-accent { background-image: url('assets/images/vector-smart-object-copy-2.png'); }
.wine-card:nth-of-type(4) .card-top-accent { background-image: url('assets/images/vector-smart-object-copy-4.png'); }
.wine-card:nth-of-type(5) .card-top-accent { background-image: url('assets/images/vector-smart-object-copy-5.png'); }
/* Even cards: swap columns — photo right, content left */
.wine-card:nth-of-type(even) .wine-photo { grid-column: 2; grid-row: 1 / 3; }
.wine-card:nth-of-type(even) .card-top-accent { grid-column: 1; grid-row: 1; }
.wine-card:nth-of-type(even) .wine-content { grid-column: 1; grid-row: 2; }
/* Tree decorations per card */
.wine-card:nth-of-type(1) .wine-content { background-image: url('assets/images/tree-5.png'); background-repeat: no-repeat; background-position: right bottom; background-size: 421px 499px; }
.wine-card:nth-of-type(2) .wine-content { background-image: url('assets/images/tree-4.png'); background-repeat: no-repeat; background-position: left bottom; background-size: 630px 499px; }
.wine-card:nth-of-type(3) .wine-content { background-image: url('assets/images/tree.png'); background-repeat: no-repeat; background-position: right bottom; background-size: 422px 499px; }
.wine-card:nth-of-type(4) .wine-content { background-image: url('assets/images/tree-2.png'); background-repeat: no-repeat; background-position: left bottom; background-size: 438px 499px; }
.wine-card:nth-of-type(5) .wine-content { background-image: url('assets/images/tree-3.png'); background-repeat: no-repeat; background-position: right bottom; background-size: 390px 499px; }
/* ─── WINE NAME ─── */
.wine-name { font-family: 'MinionVariableConcept-Roman', Georgia, serif; font-size: clamp(28px, 4vw, 41px); color: #9f4b38; font-weight: 400; text-transform: uppercase; margin-top: 0; margin-bottom: 24px; line-height: 1.1; }
/* ─── ACCORDIONS ─── */
.accordion { border-bottom: 1px solid #b0a090; padding-block: 12px; }
.accordion:first-of-type { border-top: 1px solid #b0a090; }
.accordion summary { font-family: 'MinionConceptRoman-Bold', Georgia, serif; font-size: clamp(18px, 1.6vw, 20px); font-weight: bold; color: #302b2b; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding-right: 8px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ''; display: inline-block; width: 34px; height: 16px; background-image: url('assets/icons/arrow.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.2s; }
.accordion[open] summary::after { transform: rotate(180deg); }
.tasting-note { font-family: 'MinionVariableConcept-Roman', Georgia, serif; font-size: clamp(16px, 1.6vw, 18px); color: #302b2b; font-weight: 400; line-height: 1.6; margin-top: 10px; padding-bottom: 4px; }
/* ─── FOOTER ─── */
.site-footer { background-image: url('assets/images/layer-18.png'); background-size: cover; background-position: center; min-height: 259px; display: flex; align-items: center; }
.footer-inner { width: 100%; max-width: 1440px; margin-inline: auto; display: flex; justify-content: space-between; align-items: center; padding-inline: clamp(24px, 7vw, 101px); }
.footer-left, .footer-right { font-family: 'MinionPro-MediumCn', 'Minion Pro', Georgia, serif; font-size: 17px; color: #ffffff; font-weight: 500; letter-spacing: 0.04em; }
.footer-ornament { width: clamp(80px, 12vw, 154px); height: auto; display: block; }
/* ─── MOBILE RESPONSIVENESS ─── */
@media (max-width: 720px) { .site-header { justify-content: center; } .logo-block { margin-left: auto; margin-right: auto; } }
@media (max-width: 1024px) { .intro-section { flex-direction: column; } .intro-content { flex: none; max-width: 100%; padding-block: 40px; } .intro-photo { flex: none; max-width: 100%; width: 100%; } .wine-card { display: flex; flex-direction: column; } .wine-card > * { grid-column: auto; grid-row: auto; } .wine-photo { max-width: 100%; } .wine-card:nth-of-type(even) .wine-photo, .wine-card:nth-of-type(even) .card-top-accent, .wine-card:nth-of-type(even) .wine-content { grid-column: auto; grid-row: auto; } .footer-inner { flex-direction: column; gap: 16px; text-align: center; } }

/* === effect: hero-collapse-mobile === */
/* ─── HERO COLLAPSE — MOBILE ONLY (max-width: 720px) ─── */
@media (max-width: 720px) {

  /* ── Step 1: Sticky hero base (outside @supports — always applied) ── */
  /* Fallback state = full hero visible at initial height. No collapse without scroll-timeline support. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1;
    overflow: hidden;

    /* CSS custom properties for collapse math */
    --hero-initial: clamp(440px, 70vh, 541px);
    --hero-target: max(calc(100vw * 9 / 16), 220px);
    --hero-collapse-distance: calc(var(--hero-initial) - var(--hero-target));

    /* Fallback: hero stays at initial height, brand visible */
    min-height: var(--hero-initial);
    margin-bottom: 0px;
  }

  /* ── Step 2: Ken-burns ambient background via ::before pseudo ── */
  /* Clear the static engine's background-image so ::before owns the imagery */
  .site-header {
    background-image: none;
  }

  .site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/images/layer-30.png');
    background-size: cover;
    background-position: 65% top;
    z-index: 0;
    transform-origin: center center;
    animation: hero-kenburns-mobile 14s ease-in-out infinite alternate;
  }

  @keyframes hero-kenburns-mobile {
    from {
      transform: scale(1.02) translate(0%, 0%);
    }
    to {
      transform: scale(1.08) translate(-1.5%, 1%);
    }
  }

  /* Ensure logo-block sits above the ::before pseudo — NO transform, NO scale, NO margin change */
  .logo-block {
    position: relative;
    z-index: 1;
  }

  /* ── Step 3: Scroll-driven collapse animation ── */
  /* Gated by @supports — fallback (above) keeps hero at full height, brand visible */
  @supports (animation-timeline: scroll()) {

    @keyframes hero-collapse-mobile {
      from {
        min-height: var(--hero-initial);
        margin-bottom: 0px;
      }
      to {
        min-height: var(--hero-target);
        margin-bottom: var(--hero-collapse-distance);
      }
    }

    .site-header {
      animation: hero-collapse-mobile linear both;
      animation-timeline: scroll();
      animation-range: 0px var(--hero-collapse-distance);
    }
  }

  /* ── Step 4: Lift subsequent content above sticky hero ── */
  /* z-index: 2 > hero z-index: 1 so content scrolls over the locked banner */
  .divider-hero-intro,
  .intro-section,
  .wine-card,
  .site-footer {
    position: relative;
    z-index: 2;
  }

  /* ── Step 5: Reduced motion — disable collapse and ken-burns ── */
  @media (prefers-reduced-motion: reduce) {
    .site-header {
      animation: none;
      min-height: var(--hero-initial);
      margin-bottom: 0;
    }

    .site-header::before {
      animation: none;
    }
  }
}
/* === /effect: hero-collapse-mobile === */

/* === effect: intro-reveal-mobile === */
/* ─── INTRO SECTION STAGGERED SCROLL ENTRANCE — MOBILE ONLY (max-width: 720px) ─── */
@media (max-width: 720px) {

  /* ── Fallback = end state (Law 1) ── */
  /* If view-timeline doesn't progress, all three elements are fully visible. */
  .intro-emblem,
  .intro-body,
  .intro-photo {
    opacity: 1;
    transform: none;
  }

  /* ── Scroll-driven entrance — gated by @supports ── */
  @supports (animation-timeline: view()) {

    @keyframes intro-reveal-mobile {
      from {
        opacity: 0;
        transform: translateY(80px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes intro-photo-arrive {
      from {
        opacity: 0;
        transform: translateY(100px) scale(0.96);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    /* Emblem: already mostly visible on load — narrow range so it snaps into place quickly */
    .intro-emblem {
      animation: intro-reveal-mobile linear both;
      animation-timeline: view();
      animation-range: entry 40% entry 80%;
    }

    /* Body copy: slightly below emblem in scroll phase — completes just after emblem */
    .intro-body {
      animation: intro-reveal-mobile linear both;
      animation-timeline: view();
      animation-range: entry 50% entry 90%;
    }

    /* Photo: the headline entrance — arrives from further below with a scale pop */
    /* Wider range so the motion is perceptible as the user scrolls down to it */
    .intro-photo {
      animation: intro-photo-arrive linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 20%;
    }
  }

  /* ── Reduced motion override ── */
  @media (prefers-reduced-motion: reduce) {
    .intro-emblem,
    .intro-body,
    .intro-photo {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}
/* === /effect: intro-reveal-mobile === */

/* === effect: wine-card-cellar-mobile === */
/* ─── WINE CARD CELLAR EFFECT — MOBILE ONLY (max-width: 720px) ─── */
@media (max-width: 720px) {

  /* ══════════════════════════════════════════════════════════════
     LAYER 1 — STRUCTURAL FIX: tree fits the box
     min-height ensures the 499px tree silhouette has breathing room.
     background-size locks the tree height; auto preserves aspect ratio.
     We do NOT touch background-image, background-position-x,
     background-repeat, or background-position shorthand — those are
     owned by the static engine.
  ══════════════════════════════════════════════════════════════ */
  .wine-card .wine-content {
    min-height: 540px;
    background-size: auto 499px;
  }

  /* ══════════════════════════════════════════════════════════════
     LAYER 4 — THE AGING: per-wine hue tints on the copper bar.
     Static visual treatment — lives OUTSIDE @supports.
     Hue-rotate shifts the copper base toward each wine's character.
  ══════════════════════════════════════════════════════════════ */
  .wine-card:nth-of-type(1) .card-top-accent { filter: hue-rotate(10deg) saturate(1.05); }
  .wine-card:nth-of-type(2) .card-top-accent { filter: hue-rotate(-12deg) saturate(1.10); }
  .wine-card:nth-of-type(3) .card-top-accent { filter: hue-rotate(22deg) brightness(1.04); }
  .wine-card:nth-of-type(4) .card-top-accent { filter: hue-rotate(-22deg) saturate(1.15); }
  .wine-card:nth-of-type(5) .card-top-accent { filter: hue-rotate(28deg) brightness(1.06); }

  /* Gradient evolution overlay on the copper bar — slow ambient drift */
  .wine-card .card-top-accent {
    position: relative;
    overflow: hidden;
  }

  .wine-card .card-top-accent::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 240, 210, 0.22) 50%,
      transparent 100%
    );
    background-size: 220% 100%;
    background-position: -60% 0;
    mix-blend-mode: soft-light;
    pointer-events: none;
    animation: copper-aging-mobile 14s ease-in-out infinite alternate;
  }

  @keyframes copper-aging-mobile {
    from { background-position: -60% 0; }
    to   { background-position: 160% 0; }
  }

  /* ══════════════════════════════════════════════════════════════
     LAYER 3 — THE REFLECTION: light sweep across the bottle.
     .wine-card::after is positioned absolutely to overlap the
     .wine-photo region (below the 51px accent bar).
     Fallback: opacity: 0 — sweep is invisible at rest (correct,
     it's a transient effect, not a persistent state).
  ══════════════════════════════════════════════════════════════ */
  .wine-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 2; /* cards scroll over sticky hero (z-index: 1) */
  }

  .wine-card::after {
    content: '';
    position: absolute;
    top: 51px;           /* below accent bar */
    left: 0;
    right: 0;
    aspect-ratio: 1 / 1; /* approximates the bottle photo region */
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(
      115deg,
      transparent 35%,
      rgba(255, 248, 220, 0.45) 50%,
      transparent 65%
    );
    background-size: 280% 100%;
    background-position: 200% 0;
    opacity: 0;
    mix-blend-mode: screen;
  }

  /* ══════════════════════════════════════════════════════════════
     LAW 1 — FALLBACK = END STATE (outside @supports).
     If view-timeline doesn't progress, all children are fully
     visible. The sweep (::after) stays invisible at rest — correct.
  ══════════════════════════════════════════════════════════════ */
  .wine-card .card-top-accent,
  .wine-card .wine-photo,
  .wine-card .wine-content {
    opacity: 1;
  }

  /* ══════════════════════════════════════════════════════════════
     @supports gate — scroll-driven animations.
     All view-timeline animations live here.
  ══════════════════════════════════════════════════════════════ */
  @supports (animation-timeline: view()) {

    /* ── LAYER 2 — THE CELLAR: tree parallax on .wine-content ── */
    /* background-position-y longhand cascades on top of the static
       engine's background-position shorthand without disturbing
       background-position-x (right/left per :nth-of-type). */
    @keyframes wine-tree-parallax-mobile {
      from { background-position-y: calc(100% - 40px); }
      to   { background-position-y: calc(100% + 40px); }
    }

    /* ── LAYER 5 — ENTRANCE: opacity-only fades, no transforms ── */
    @keyframes wine-fade-in-mobile {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* Accent bar fades in first */
    .wine-card .card-top-accent {
      animation: wine-fade-in-mobile linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 40%;
    }

    /* Bottle fades in slightly after the bar */
    .wine-card .wine-photo {
      animation: wine-fade-in-mobile linear both;
      animation-timeline: view();
      animation-range: entry 25% entry 60%;
    }

    /* .wine-content: compound animation — fade-in entrance + tree parallax.
       Comma-separated values compose both on the same element. */
    .wine-card .wine-content {
      animation:
        wine-fade-in-mobile linear both,
        wine-tree-parallax-mobile linear both;
      animation-timeline: view(), view();
      animation-range:
        entry 40% entry 80%,
        entry 0%  exit 100%;
    }

    /* ── LAYER 3 — THE REFLECTION: light sweep (scroll-driven) ── */
    @keyframes wine-photo-reflection {
      0%   { background-position: 200% 0;  opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { background-position: -100% 0; opacity: 0; }
    }

    .wine-card::after {
      animation: wine-photo-reflection linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 30%;
    }
  }

  /* ══════════════════════════════════════════════════════════════
     REDUCED MOTION — disable all motion.
     Keep: per-wine hue tints (static), structural min-height,
     background-size: auto 499px.
     Disable: light sweep, copper aging gradient, tree parallax,
     entrance fades.
  ══════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    .wine-card .card-top-accent::after {
      animation: none;
    }

    .wine-card::after {
      animation: none;
      opacity: 0; /* sweep stays invisible */
    }

    .wine-card .card-top-accent,
    .wine-card .wine-photo,
    .wine-card .wine-content {
      animation: none;
      opacity: 1;
    }
  }
}
/* === /effect: wine-card-cellar-mobile === */

/* === effect: accordion-content-fade-in === */
/* ─── ACCORDION CONTENT FADE-IN ─── */
/* When a <details class="accordion"> is opened, its body children
   fade in with a small upward translateY. Close is instant — known
   limitation of native <details> (display:none on close prevents a
   closing transition). No @media gating — applies at all breakpoints. */

.accordion > *:not(summary) {
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  opacity: 0;
  transform: translateY(12px);
}

.accordion[open] > *:not(summary) {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: keep a minimal opacity fade, drop the transform */
@media (prefers-reduced-motion: reduce) {
  .accordion > *:not(summary) {
    transition: opacity 0.2s ease-out;
    transform: none;
  }

  .accordion[open] > *:not(summary) {
    opacity: 1;
  }
}
/* === /effect: accordion-content-fade-in === */