/* Duncan Peak — homepage (bottle-journey choreography) */
@import url("tokens.css") layer(tokens);

/* ============ header ============ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--limestone);
  transition: background-color 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft);
}
.site-header.is-solid { background: rgba(37,46,54,.92); box-shadow: 0 1px 0 rgba(242,238,231,.12); }
.site-header.is-light-on-dark { color: var(--limestone); }
.header-inner {
  max-width: 1400px; margin: 0 auto; padding: 1.1rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.wordmark { text-decoration: none; color: inherit; line-height: 1.15; }
.wordmark-name {
  display: block; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .02em;
}
.wordmark-sub { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; opacity: .75; }
.header-nav { display: flex; align-items: center; gap: 1.9rem; }
.header-nav a { color: inherit; text-decoration: none; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; opacity: .82; transition: opacity 200ms; }
.header-nav a:hover { opacity: 1; }
.header-nav a[data-pending] { opacity: .45; cursor: not-allowed; }
.nav-shop { border-bottom: 1px solid var(--copper); padding-bottom: .2rem; }
.btn-ghost-copper {
  border: 1px solid var(--copper); color: inherit; text-decoration: none;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .65rem 1.15rem; transition: background-color 250ms, color 250ms;
}
.btn-ghost-copper:hover { background: var(--copper); color: var(--slate); }
.header-mobile { display: none; align-items: center; gap: 1rem; }
.hamburger { background: none; border: 0; color: inherit; cursor: pointer; padding: .4rem; }
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--slate); color: var(--limestone);
  padding: 5.5rem 2rem 2rem; display: flex; flex-direction: column;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 1.4rem; }
.mobile-menu nav a { color: inherit; text-decoration: none; font-family: var(--font-display); font-size: 1.9rem; }
.mobile-menu nav a[data-pending] { opacity: .45; }
.menu-close { position: absolute; top: 1.4rem; right: 1.4rem; background: none; border: 0; color: inherit; cursor: pointer; padding: .4rem; }

/* ============ age gate ============ */
.agegate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.agegate-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.agegate-veil { position: absolute; inset: 0; background: rgba(24,31,37,.72); }
.agegate-panel {
  position: relative; text-align: center; color: var(--limestone);
  max-width: 420px; padding: 2rem;
}
.agegate-mark { color: var(--copper); margin: 0 auto 1.1rem; }
.agegate-eyebrow { opacity: .8; margin: 0 0 .8rem; }
.agegate-body { opacity: .8; margin: 1rem 0 1.8rem; }
.agegate-actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.btn-pill-wine {
  background: var(--wine); color: var(--limestone); border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .95rem 2rem; border-radius: 999px; transition: background-color 250ms;
}
.btn-pill-wine:hover { background: #7d3a48; }
.agegate-no { color: var(--limestone); opacity: .7; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.agegate-footnote { margin: 1.8rem 0 .8rem; opacity: .6; }
.agegate-rule { border: 0; border-top: 1px solid rgba(242,238,231,.25); margin: 0 0 .8rem; }
.agegate-legal { opacity: .6; }
.agegate[hidden] { display: none; }

/* ============ journey stage ============ */
.sec-journey { position: relative; }
.stage {
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--slate); color: var(--limestone);
}
.jy-land { position: absolute; inset: 0; }
.jy-land-img { width: 100%; height: 100%; object-fit: cover; }
.jy-land-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,31,37,.5) 0%, rgba(24,31,37,.15) 45%, rgba(24,31,37,.55) 100%); }
.jy-bg { position: absolute; inset: 0; background: transparent; }
.jy-scrim { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.28) 100%); }

/* bottle actor */
.bottle-actor {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; /* anchor point; images positioned around it */
  will-change: transform; z-index: 3;
}
.bottle-actor img { position: absolute; max-width: none; transform-origin: 50% 55%; filter: drop-shadow(0 24px 34px rgba(10,14,18,.45)); }
.b-max  { height: 74vh; width: auto; left: calc(var(--bw, 150px) / -2); top: -37vh; }
.b-sage { height: 62vh; width: auto; left: calc(var(--bws, 177px) / -2); top: -31vh; opacity: 0; }
.b-pour { height: 40vh; width: auto; left: -25vh; top: -20vh; opacity: 0; }

/* chapters */
.jy-chapters, .jy-chapter { position: absolute; inset: 0; }
.jy-chapter {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 6vw; width: min(620px, 52vw); opacity: 0; pointer-events: none;
}
.jy-chapter.is-visible { pointer-events: auto; }
.jy-chapter h1, .jy-chapter h2 { margin: 0 0 1.1rem; }
.jy-chapter .support { margin: 0 0 1.4rem; opacity: .9; }
.jy-mark { color: var(--copper); margin-bottom: 1.4rem; }

.jy-ch-open {
  align-items: center; text-align: center; width: min(720px, 88vw); left: 50%;
  transform: translateX(-50%); opacity: 1;
}
.jy-ch-open .eyebrow { color: var(--limestone); opacity: .85; margin-bottom: 1.1rem; }
.jy-open-support { margin-bottom: 1.6rem; opacity: .9; }
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.btn-ghost-light {
  border: 1px solid rgba(242,238,231,.55); color: var(--limestone); text-decoration: none;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .8rem 1.5rem; transition: background-color 250ms, color 250ms, border-color 250ms;
}
.btn-ghost-light:hover { background: var(--limestone); color: var(--slate); border-color: var(--limestone); }

.jy-ch-estate, .jy-ch-hands, .jy-ch-craft { color: var(--slate); }
.jy-ch-estate .eyebrow, .jy-ch-hands .eyebrow, .jy-ch-craft .eyebrow { color: var(--wine); }

/* metrics rows */
.metrics { display: flex; gap: 2.6rem; flex-wrap: wrap; margin: 0; }
.metric { display: flex; flex-direction: column; }
.metric-num { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.1; }
.metric-cap { letter-spacing: .14em; opacity: .7; }
.jy-metrics { margin-top: .4rem; }

/* wine presentation */
.jy-ch-wine1, .jy-ch-wine2 { color: var(--limestone); left: 6vw; }
.wine-swap { display: flex; align-items: baseline; gap: 1.1rem; margin-bottom: 1.2rem; }
.wine-index {
  font-family: var(--font-display); font-size: clamp(3.4rem, 6vw, 5.6rem); line-height: 1;
  color: var(--copper);
}
.jy-ch-wine1 .eyebrow, .jy-ch-wine2 .eyebrow { color: var(--limestone); opacity: .85; }
.wine-metrics { margin-bottom: 1.2rem; }
.wine-tasting { max-width: 44ch; }
.wine-links { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.arrow-link { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.arrow-link svg { transition: transform 250ms var(--ease-soft); }
.arrow-link:hover svg { transform: translateX(5px); }
.ph-note {
  margin: 1.6rem 0 0; padding: .5rem .9rem; border: 1px dashed rgba(242,238,231,.4);
  color: rgba(242,238,231,.8); letter-spacing: .1em;
}

/* pour chapter */
.jy-ch-pour { color: var(--slate); left: 6vw; }
.jy-ch-pour .eyebrow { color: var(--wine); }

/* rail + cue */
.chapter-rail {
  position: absolute; right: 2.2rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 1.05rem; z-index: 5;
}
.rail-item { display: flex; align-items: center; gap: .7rem; justify-content: flex-end; text-decoration: none; color: inherit; }
.rail-label { font-size: .6rem; letter-spacing: .2em; opacity: 0; transform: translateX(6px); transition: opacity 250ms, transform 250ms; }
.rail-item:hover .rail-label, .rail-item.is-active .rail-label { opacity: .85; transform: none; }
.rail-dot {
  width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; opacity: .45;
  transition: background-color 250ms, opacity 250ms;
}
.rail-item.is-active .rail-dot { background: var(--copper); border-color: var(--copper); opacity: 1; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem; z-index: 5; opacity: .85;
}
.scroll-line { width: 1px; height: 44px; background: linear-gradient(var(--limestone), transparent); }

/* ============ editorial ending ============ */
.sec-land { padding: 9rem 6vw 7rem; background: var(--limestone); color: var(--slate); }
.panel-set { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.2vw; margin: 0 0 6rem; }
.panel { margin: 0; position: relative; overflow: hidden; }
.panel img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease-soft), transform 800ms var(--ease-soft); }
.panel.is-in img { opacity: 1; transform: none; }
.panel-a { grid-column: 1 / 9; aspect-ratio: 16 / 10; }
.panel-b { grid-column: 9 / 13; aspect-ratio: 3 / 4; transform: translateY(4.5rem); }
.panel-c { grid-column: 2 / 5; aspect-ratio: 4 / 5; transform: translateY(-2.5rem); }
.panel-d { grid-column: 5 / 12; aspect-ratio: 21 / 9; transform: translateY(1.5rem); }
.land-content { text-align: center; }
.land-mark { color: var(--wine); margin: 0 auto 1.3rem; }
.land-support { margin: 0 auto 2rem; }
.land-return { display: inline-block; margin-top: 2.2rem; color: inherit; opacity: .65; text-decoration: none; }
.land-return:hover { opacity: 1; }
.btn-block-wine {
  display: inline-block; background: var(--wine); color: var(--limestone); text-decoration: none;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  padding: 1rem 2.4rem; transition: background-color 250ms;
}
.btn-block-wine:hover { background: #7d3a48; }

/* ============ invite + footer ============ */
.sec-invite { background: var(--slate); color: var(--limestone); padding: 8rem 6vw 3rem; }
.invite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; max-width: 1400px; margin: 0 auto 6rem; }
.invite-text h2 { margin: 0 0 1.4rem; }
.rule-copper { border: 0; border-top: 1px solid var(--copper); width: 72px; margin: 0 0 1.6rem; }
.craft-eyebrow { color: var(--copper); margin-bottom: 1.1rem; }
.invite-form-col { max-width: 460px; }
.invite-mark { color: var(--copper); margin-bottom: 1.6rem; }
.alloc-form { display: grid; gap: 1.4rem; }
.field { display: grid; gap: .5rem; }
.field label { opacity: .75; }
.field input {
  background: transparent; border: 0; border-bottom: 1px solid rgba(242,238,231,.35);
  color: var(--limestone); padding: .6rem 0; font: inherit; border-radius: 0;
}
.field input:focus { outline: none; border-bottom-color: var(--copper); }
.form-submit { margin-top: .6rem; }
.form-error { color: #e2b3a6; }
.footer-rule { border: 0; border-top: 1px solid rgba(242,238,231,.18); margin: 0 0 2.2rem; }
.site-footer {
  max-width: 1400px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr auto auto; gap: 4vw; align-items: start;
}
.foot-nav, .foot-legal { display: flex; flex-direction: column; gap: .7rem; }
.foot-col a, .foot-col p { color: inherit; opacity: .75; text-decoration: none; }
.foot-col a:hover { opacity: 1; }
.foot-shop { opacity: 1 !important; }

/* ============ static fallback (reduced motion / no GSAP) ============ */
body.static-mode .stage { height: auto; overflow: visible; }
body.static-mode .jy-land { position: relative; height: 64vh; }
body.static-mode .jy-bg, body.static-mode .jy-scrim, body.static-mode .bottle-actor,
body.static-mode .chapter-rail, body.static-mode .scroll-cue { display: none; }
body.static-mode .jy-chapter {
  position: relative; inset: auto; opacity: 1 !important; width: min(620px, 88vw);
  min-height: 0; padding: 4.5rem 6vw; pointer-events: auto;
}
body.static-mode .jy-ch-open { width: min(720px, 88vw); left: auto; transform: none; margin: 0 auto; padding: 5rem 6vw; }
body.static-mode .jy-ch-estate, body.static-mode .jy-ch-craft { background: var(--limestone); }
body.static-mode .jy-ch-hands { background: #E7EAE2; }
body.static-mode .jy-ch-wine1 { background: #42242D; padding-block: 5.5rem; }
body.static-mode .jy-ch-wine2 { background: #2B3331; padding-block: 5.5rem; }
body.static-mode .jy-ch-pour { background: #E9D9C6; }
body.static-mode .jy-ch-wine1 .eyebrow, body.static-mode .jy-ch-wine2 .eyebrow { color: var(--limestone); }
body.static-mode .jy-chapter h1, body.static-mode .jy-chapter h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
body.static-mode .jy-ch-open h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }

/* ============ responsive ============ */
@media (max-width: 940px) {
  .header-nav { display: none; }
  .header-mobile { display: flex; }
  .header-inner { padding: .9rem 1.25rem; }

  .b-max  { height: 36vh; top: -22vh; --bw: 72px; }
  .b-sage { height: 31vh; top: -19vh; --bws: 89px; }
  .b-pour { height: 24vh; left: -15vh; top: -12vh; }

  .jy-chapter {
    align-items: flex-start; justify-content: flex-end; width: auto;
    left: 1.25rem; right: 1.25rem; top: auto; bottom: 9.5vh; padding: 0 0 1rem;
  }
  .jy-ch-open { align-items: center; text-align: center; justify-content: flex-end; width: min(640px, 90vw); left: 50%; transform: translateX(-50%); }
  .scroll-cue { display: none; }
  .wine-links { gap: 1.4rem; }
  .jy-chapter h2 { font-size: clamp(1.7rem, 5.4vw, 2.4rem); margin-bottom: .8rem; }
  .wine-index { font-size: 2.6rem; }
  .chapter-rail { display: none; }
  .scroll-cue { bottom: 1.1rem; }

  .sec-land { padding: 5rem 5vw 4.5rem; }
  .panel-set { gap: 3.5vw; }
  .panel-a { grid-column: 1 / 13; }
  .panel-b { grid-column: 1 / 7; transform: translateY(0); margin-top: -14vw; }
  .panel-c { grid-column: 7 / 13; transform: translateY(0); }
  .panel-d { grid-column: 1 / 13; transform: translateY(0); }
  .invite-grid { grid-template-columns: 1fr; gap: 3rem; }
  .site-footer { grid-template-columns: 1fr; gap: 2rem; }
}

/* very small phones */
@media (max-width: 380px) {
  .jy-chapter { bottom: 9vh; }
  .metrics { gap: 1.1rem; }
}