:root{
  --ivory:#F4EFE6; --cream:#EDE3D3; --charcoal:#141310; --black:#0B0A08;
  --agave:#4A5D4E; --amber:#C67A2E; --gold:#D8C193; --clay:#9C5B3C;
  --ink:#141310; --bg:#F4EFE6;
  --serif:"Fraunces",Georgia,serif; --sans:"Archivo",Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); overflow-x:hidden;
  transition:background-color .8s ease,color .8s ease;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#141310;color:#F4EFE6}
a{color:inherit;text-decoration:none}
em{font-family:var(--serif);font-style:italic;font-weight:300}

/* texture */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:90;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:89;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.14) 100%)}

/* loader */
#loader{position:fixed;inset:0;z-index:200;background:#0B0A08;color:#F4EFE6;display:flex;align-items:center;justify-content:center;transition:transform 1s cubic-bezier(.76,0,.24,1)}
#loader.done{transform:translateY(-100%)}
.loader-inner{text-align:center}
.loader-logo{font-family:var(--serif);font-size:clamp(2.4rem,7vw,5rem);letter-spacing:.35em;margin-left:.35em;display:flex;gap:.12em;justify-content:center}
.loader-logo span{display:inline-block;opacity:0;transform:translateY(40px);animation:lup .9s cubic-bezier(.22,1,.36,1) forwards}
.loader-logo span:nth-child(2){animation-delay:.06s}.loader-logo span:nth-child(3){animation-delay:.12s}.loader-logo span:nth-child(4){animation-delay:.18s}.loader-logo span:nth-child(5){animation-delay:.24s}.loader-logo span:nth-child(6){animation-delay:.3s}.loader-logo span:nth-child(7){animation-delay:.36s}.loader-logo span:nth-child(8){animation-delay:.42s}
@keyframes lup{to{opacity:1;transform:none}}
.loader-sub{margin-top:1.2rem;display:flex;justify-content:space-between;gap:3rem;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:.7}
.loader-bar{margin-top:1rem;height:1px;background:rgba(244,239,230,.2);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:#D8C193}

/* nav */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1.4rem 2rem;mix-blend-mode:difference;color:#fff}
.brand{font-family:var(--serif);letter-spacing:.32em;font-size:.95rem}
.brand sup{font-size:.5rem;letter-spacing:0}
.desk{display:flex;gap:1.8rem;align-items:center;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase}
.desk a{opacity:.75;transition:opacity .3s}.desk a:hover{opacity:1}
.desk .pill{border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:.55rem 1.2rem}
#menuBtn{display:none;background:none;border:0;flex-direction:column;gap:6px;cursor:pointer}
#menuBtn span{display:block;width:26px;height:1px;background:#fff}
#menuOverlay{position:fixed;inset:0;background:#0B0A08;color:#F4EFE6;z-index:99;display:flex;flex-direction:column;justify-content:center;padding:3rem 2rem;gap:1rem;transform:translateY(-100%);transition:transform .7s cubic-bezier(.76,0,.24,1)}
#menuOverlay.open{transform:none}
#menuOverlay a{font-family:var(--serif);font-size:3rem}
#menuOverlay p{margin-top:2rem;font-size:.7rem;letter-spacing:.2em;opacity:.6}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:101;background:transparent}
.progress i{display:block;height:100%;width:0;background:#C67A2E}

/* scenes */
.scene{position:relative;min-height:100vh;padding:7rem 2rem 4rem;overflow:hidden}
.folio{display:flex;justify-content:space-between;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;opacity:.65;margin-bottom:2rem}
.folio.light{color:inherit}
.mega{font-family:var(--serif);font-weight:300;font-size:clamp(3.8rem,13vw,12rem);line-height:.9;letter-spacing:-.02em}
.mega .line{display:block;overflow:hidden}
.mega .line i{display:block;font-style:normal;transform:translateY(110%)}
.serif-it{font-style:italic!important;font-weight:300}
.lede{margin-top:1.5rem;font-size:clamp(.9rem,1.4vw,1.05rem);line-height:1.6;opacity:.75;max-width:34rem}

/* bottle placeholder — Bottle3D (DOM stand-in, GLB-ready) */
.bottle-3d{position:relative;display:flex;justify-content:center;perspective:1200px}
.ph-tag{position:absolute;top:-1.9rem;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;border:1px dashed currentColor;padding:.35rem .7rem;opacity:.55;border-radius:99px;pointer-events:none}
.ph-tag.inline{position:static;transform:none;display:inline-block;margin-top:.8rem}
.bottle{position:relative;width:150px;transform-style:preserve-3d;filter:drop-shadow(0 40px 40px rgba(0,0,0,.25))}
.bottle-3d.large .bottle{width:min(210px,52vw)}
.cap{width:44px;height:46px;margin:0 auto;background:linear-gradient(90deg,#2b2b28,#5c5c55 30%,#1a1a18 60%,#3d3d38);border-radius:6px 6px 2px 2px}
.cap.wood{background:linear-gradient(90deg,#6b4a2c,#a97c4e 40%,#5a3d24)}
.cap.dark{background:linear-gradient(90deg,#1c1410,#4a3220 40%,#000)}
.cap.black{background:linear-gradient(90deg,#000,#333 45%,#000)}
.neck{width:34px;height:64px;margin:-2px auto 0;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.55) 30%,rgba(255,255,255,.15) 55%,rgba(0,0,0,.3));border-left:1px solid rgba(0,0,0,.2);border-right:1px solid rgba(0,0,0,.2)}
.shoulder{width:118px;height:34px;margin:0 auto;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(0,0,0,.12));clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);opacity:.9}
.body{position:relative;width:150px;min-height:300px;margin:-1px auto 0;border-radius:14px 14px 22px 22px;overflow:hidden;border:1px solid rgba(0,0,0,.22);
  background:linear-gradient(100deg,rgba(20,20,18,.35) 0%,rgba(255,255,255,.65) 18%,rgba(240,235,220,.35) 38%,rgba(30,30,28,.45) 70%,rgba(255,255,255,.25) 88%,rgba(0,0,0,.35) 100%)}
.bottle-3d.large .body{width:min(210px,52vw);min-height:min(420px,72vw)}
.body.tone-blanco{background:linear-gradient(100deg,rgba(74,93,78,.35),rgba(255,255,255,.7) 20%,rgba(235,240,232,.4) 45%,rgba(20,30,24,.4) 72%,rgba(255,255,255,.3) 90%)}
.body.tone-reposado{background:linear-gradient(100deg,rgba(198,122,46,.5),rgba(255,235,200,.75) 22%,rgba(220,170,100,.5) 48%,rgba(60,30,10,.55) 75%,rgba(255,220,170,.3) 92%)}
.body.tone-anejo{background:linear-gradient(100deg,rgba(60,25,8,.7),rgba(200,130,60,.55) 22%,rgba(120,60,20,.6) 50%,rgba(10,5,2,.7) 78%,rgba(220,160,90,.3) 92%)}
.body.tone-extra{background:linear-gradient(100deg,rgba(0,0,0,.8),rgba(120,90,50,.5) 25%,rgba(40,20,8,.7) 55%,rgba(0,0,0,.85) 80%,rgba(216,193,147,.35) 95%)}
.glass-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.25))}
.highlight{position:absolute;top:4%;bottom:6%;left:12%;width:14px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.05));border-radius:99px;filter:blur(.5px)}
.label{position:absolute;left:8%;right:8%;top:34%;background:#F4EFE6;color:#141310;text-align:center;padding:1.1rem .5rem;border:1px solid rgba(0,0,0,.15)}
.label small{font-size:.55rem;letter-spacing:.35em;display:block;opacity:.7}
.label strong{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:.12em;display:block;margin:.3rem 0}
.label span{font-size:.55rem;letter-spacing:.25em;opacity:.7}
.label.clay{background:#9C5B3C;color:#F4EFE6}.label.dark{background:#141310;color:#F4EFE6}.label.gold{background:#141310;color:#D8C193;border-color:#D8C193}
.punt-shadow{width:70%;height:18px;margin:14px auto 0;background:radial-gradient(ellipse,rgba(0,0,0,.4),transparent 70%)}
.bottle.small{width:110px}.bottle.small .body{width:110px;min-height:220px}.bottle.small .label strong{font-size:1rem}

/* opening layout */
.opening{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-bottle-wrap{margin:3rem 0 1rem;min-height:420px;display:flex;align-items:center}
.hero-meta{display:flex;gap:1rem;align-items:center;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6;flex-wrap:wrap;justify-content:center}
.hero-meta i{width:32px;height:1px;background:currentColor;display:inline-block;opacity:.5}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);width:1px;height:56px;background:currentColor;opacity:.3;overflow:hidden}
.scroll-hint span{display:block;width:100%;height:50%;background:#C67A2E;animation:hint 1.8s cubic-bezier(.76,0,.24,1) infinite}
@keyframes hint{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}

.marquee{border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);overflow:hidden;padding:.9rem 0;font-size:.7rem;letter-spacing:.35em;white-space:nowrap}
.marquee .track{display:inline-flex;animation:mq 22s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

/* bottle scene */
.bottle-scene{background:transparent}
.bottle-scene .pinned{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ghost{position:absolute;font-family:var(--serif);font-size:clamp(6rem,22vw,20rem);line-height:.85;opacity:.08;letter-spacing:-.02em;pointer-events:none}
.bottle-stage{min-height:46vh;display:flex;align-items:center}
.turn-captions{position:absolute;inset:0;pointer-events:none}
.tc{position:absolute;font-size:.8rem;text-align:left}
.tc em{font-size:2rem;display:block}
.tc-0{left:6%;top:30%}.tc-1{right:6%;top:45%}.tc-2{left:8%;bottom:18%}
.turn-meter{display:flex;align-items:center;gap:1rem;font-size:.62rem;letter-spacing:.3em;margin-top:1rem}
.turn-meter .meter{width:min(320px,50vw);height:1px;background:rgba(244,239,230,.25);position:relative}
.turn-meter .meter i{position:absolute;inset:0;background:#D8C193;transform-origin:left;transform:scaleX(0)}
.bottle-copy{margin-top:1.4rem;max-width:26rem;opacity:.7;line-height:1.6}

/* variants horizontal */
.variants{padding-left:0;padding-right:0}
.variants-head{padding:0 2rem;margin-bottom:1rem}
.variants-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7vw,5.5rem);line-height:1}
.h-wrap{position:relative}
.h-track{display:flex;will-change:transform}
.variant{position:relative;min-width:100vw;min-height:92vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:4rem 6vw;gap:2rem;overflow:hidden;transition:background-color .6s}
.v-num{position:absolute;top:2rem;left:4vw;font-family:var(--serif);font-size:clamp(5rem,12vw,10rem);opacity:.14;line-height:1}
.v-text h3{font-family:var(--serif);font-weight:300;font-size:clamp(3.4rem,10vw,9rem);line-height:.9}
.v-desc{margin-top:1rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);max-width:22rem;line-height:1.5}
.v-spec{margin-top:1rem;font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;opacity:.7}
.v-bottle{display:flex;justify-content:center}
.h-progress{height:2px;background:rgba(0,0,0,.15);margin:0 2rem}
.h-progress i{display:block;height:100%;background:#141310;transform:scaleX(0);transform-origin:left}

/* origin */
.origin .reveal{will-change:transform}
.origin h2{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,10vw,9rem);line-height:.92}
.origin-story{margin:2rem 0 3rem;max-width:36rem;font-size:1.05rem;line-height:1.7;opacity:.85}
.img-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.ph-img{position:relative;border:1px solid rgba(244,239,230,.2);padding:.6rem}
.ph-img .ph-tag{top:.2rem}
.ph-img figcaption{margin-top:.6rem;font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;opacity:.6}
.ph-art{min-height:280px;background-size:cover}
.ph-art.agave{background:radial-gradient(circle at 30% 20%,#6b8a72,#2c3a30 55%,#101613),repeating-linear-gradient(100deg,transparent 0 18px,rgba(216,193,147,.25) 18px 20px)}
.ph-art.harvest{background:radial-gradient(circle at 70% 30%,#C67A2E,#5a3d24 50%,#17100a),repeating-linear-gradient(0deg,transparent 0 26px,rgba(0,0,0,.25) 26px 28px)}
.ph-art.land{background:linear-gradient(180deg,#D8C193 0%,#9C5B3C 45%,#1C2420 46%,#101613 100%)}
.ph-img.tall{grid-row:span 2}.ph-img.tall .ph-art{min-height:580px}

/* making */
.making h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7vw,5.5rem);line-height:1;margin-bottom:3rem}
.timeline{position:relative;max-width:56rem;margin:0 auto;padding-left:2rem}
.t-line{position:absolute;left:6px;top:0;bottom:0;width:1px;background:rgba(20,19,16,.2)}
.t-line i{position:absolute;top:0;left:0;width:100%;height:0;background:#9C5B3C;display:block}
.t-stage{padding:2.2rem 0;border-bottom:1px solid rgba(20,19,16,.12);opacity:.28;transition:opacity .5s}
.t-stage.active{opacity:1}
.t-stage em{font-size:.7rem;letter-spacing:.3em}
.t-stage h4{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3.6rem);letter-spacing:.04em}
.t-stage p{opacity:.75;max-width:26rem;line-height:1.6}

/* collection */
.collection{text-align:center}
.collection h2{font-family:var(--serif);font-weight:300;font-size:clamp(4rem,14vw,12rem);line-height:.88}
.family{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(.5rem,3vw,2.5rem);margin:3rem 0;min-height:380px}
.family .f{transition:transform .3s}
.family .f0{transform:translateY(30px) scale(.94)}
.family .f1{transform:translateY(-10px) scale(1.04)}
.family .f2{transform:translateY(24px) scale(1.1)}
.family .f3{transform:translateY(-22px) scale(1.16)}
.family .ph-tag{top:-2.6rem}
.fam-note{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6}

/* statement */
.statement{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.kicker{font-size:.65rem;letter-spacing:.4em;text-transform:uppercase;opacity:.6;margin-bottom:2rem}
.mega-sm{font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,9vw,8rem);line-height:.95}
.statement .rule{display:block;width:1px;height:80px;background:currentColor;margin-top:3rem;opacity:.4}

/* final */
.final{text-align:center;display:flex;flex-direction:column;align-items:center}
.final-glow{position:absolute;left:50%;top:34%;width:min(720px,90vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(216,193,147,.35),transparent 65%);pointer-events:none}
.final h2{font-family:var(--serif);font-weight:300;font-size:clamp(3.4rem,11vw,10rem);line-height:.9;margin-top:2rem}
.final p{margin-top:1rem;opacity:.7;line-height:1.6}
.cta-row{display:flex;gap:1rem;margin-top:2.4rem;flex-wrap:wrap;justify-content:center}
.btn{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;padding:1.1rem 2.2rem;border-radius:99px;border:1px solid currentColor;transition:all .4s}
.btn.solid{background:#F4EFE6;color:#0B0A08;border-color:#F4EFE6}
.btn.solid:hover{background:#D8C193;border-color:#D8C193}
.btn.ghost{opacity:.8}.btn.ghost:hover{opacity:1;background:rgba(244,239,230,.1)}
footer{margin-top:5rem;width:100%;display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;opacity:.55;flex-wrap:wrap;gap:1rem}

@media(max-width:860px){
  .desk{display:none}#menuBtn{display:flex}
  .scene{padding:6rem 1.2rem 3rem}
  .variant{grid-template-columns:1fr;min-height:100vh;text-align:center;padding:5rem 1.2rem 3rem}
  .v-desc{margin-inline:auto}
  .img-grid{grid-template-columns:1fr}
  .turn-captions{display:none}
  .family{flex-wrap:wrap;align-items:flex-end}
  footer{justify-content:center;text-align:center}
}