:root{
  --noir:#070504; --noir-2:#0e0a07; --amber:#d4a95f; --amber-soft:rgba(212,169,95,.35);
  --ivory:#f4ead9; --smoke:#8a7a64; --text:#f4ead9; --text-2:#b3a48c; --text-3:#73664f;
  --serif:'Marcellus',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--sans);background:var(--noir);color:var(--text);
  font-size:16px;line-height:1.7;font-weight:300;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--amber-soft)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:.03em}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(7,5,4,.88);backdrop-filter:blur(14px);border-color:rgba(212,169,95,.12)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{font-family:var(--serif);font-size:23px;letter-spacing:.42em;text-transform:uppercase}
.brand i{font-style:normal;color:var(--amber)}
.nav-links{display:flex;gap:42px}
.nav-links a{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--text-2);transition:color .3s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--amber)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;
  padding:16px 38px;font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;
  transition:all .35s;position:relative;
}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.btn-gold{background:linear-gradient(100deg,#e3bd74,#b89050);color:#160f08;font-weight:500}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(212,169,95,.3)}
.btn-line{border:1px solid rgba(244,234,217,.3);color:var(--ivory)}
.btn-line:hover{border-color:var(--amber);color:var(--amber)}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center}

/* hero + WebGL */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;overflow:hidden}
#silk{position:absolute;inset:0;width:100%;height:100%;display:block}
.silk-fallback{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,#2a1c0e,var(--noir) 70%);display:none}
.no-webgl .silk-fallback{display:block}
.no-webgl #silk{display:none}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%;padding-top:84px}
.hero-kicker{
  display:inline-flex;align-items:center;gap:16px;font-size:11.5px;letter-spacing:.56em;
  text-transform:uppercase;color:var(--amber);margin-bottom:34px;
}
.hero-kicker::before{content:'';width:52px;height:1px;background:var(--amber-soft)}
.hero h1{font-size:clamp(46px,6.8vw,92px);margin-bottom:28px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:inline-block}
.hero h1 em{font-style:italic;color:var(--amber)}
.hero p{color:var(--text-2);max-width:420px;font-size:clamp(15.5px,1.6vw,18px);margin-bottom:46px}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap}
.bottle-scene{position:relative;display:flex;justify-content:center;align-items:center;min-height:440px}
.bottle-halo{
  position:absolute;width:72%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(212,169,95,.22),transparent 65%);filter:blur(34px);
}
#bottle{
  position:relative;width:min(330px,72%);border-radius:170px;
  box-shadow:0 70px 130px rgba(0,0,0,.75),0 0 90px rgba(212,169,95,.12);
  will-change:transform;
}
.hero-num{
  position:absolute;right:4%;bottom:8%;font-family:var(--serif);font-size:clamp(80px,10vw,150px);
  color:transparent;-webkit-text-stroke:1px rgba(212,169,95,.28);z-index:1;user-select:none;
}
.scroll-cue{
  position:absolute;bottom:38px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:10.5px;letter-spacing:.5em;text-transform:uppercase;color:var(--text-3);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.scroll-cue i{width:1px;height:48px;background:linear-gradient(180deg,var(--amber),transparent);display:block}

/* sections */
.section{padding:130px 0;position:relative}
.kicker{font-size:11.5px;letter-spacing:.5em;text-transform:uppercase;color:var(--amber);margin-bottom:24px;display:block}
h2{font-size:clamp(34px,4.4vw,58px);margin-bottom:24px}
h2 em{font-style:italic;color:var(--amber)}

/* pyramid (notes) */
.pyramid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(212,169,95,.14);border:1px solid rgba(212,169,95,.14);margin-top:60px}
.note{
  background:var(--noir);padding:52px 40px;position:relative;overflow:hidden;
  transition:background .4s;
}
.note:hover{background:var(--noir-2)}
.note .n-glow{
  position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(212,169,95,.12),transparent 55%);
}
.note:hover .n-glow{opacity:1}
.note .n-stage{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--text-3);margin-bottom:20px}
.note h3{font-size:26px;margin-bottom:14px}
.note .n-time{font-size:12.5px;color:var(--amber);letter-spacing:.14em;margin-bottom:16px;display:block}
.note p{font-size:14.5px;color:var(--text-2)}

/* story */
.story{overflow:hidden}
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:center}
.story-img{position:relative;overflow:hidden}
.story-img img{width:100%;aspect-ratio:1;object-fit:cover;transform:scale(1.14);will-change:transform}
.story-img::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(212,169,95,.25);pointer-events:none}
.story-text p{color:var(--text-2);margin-bottom:20px}
.story-text .quote{
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,26px);
  color:var(--ivory);border-left:1px solid var(--amber);padding-left:26px;margin:34px 0;line-height:1.5;
}
.story-facts{display:flex;gap:clamp(24px,4vw,56px);margin-top:40px;flex-wrap:wrap}
.sf b{font-family:var(--serif);font-size:30px;color:var(--amber);display:block}
.sf span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}

/* collection */
.coll{background:var(--noir-2);border-top:1px solid rgba(212,169,95,.1);border-bottom:1px solid rgba(212,169,95,.1)}
.coll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:64px}
.flacon{
  border:1px solid rgba(212,169,95,.16);padding:46px 38px;text-align:center;position:relative;
  transition:border-color .4s,transform .4s;background:var(--noir);
}
.flacon:hover{border-color:var(--amber);transform:translateY(-6px)}
.flacon .f-vol{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--text-3);margin-bottom:18px}
.flacon h3{font-size:24px;margin-bottom:10px}
.flacon p{font-size:14px;color:var(--text-2);margin-bottom:26px}
.flacon .f-price{font-family:var(--serif);font-size:26px;color:var(--amber);margin-bottom:28px;font-variant-numeric:tabular-nums}
.flacon .btn{width:100%}

/* cta */
.cta{text-align:center}
.cta p{color:var(--text-2);max-width:460px;margin:0 auto 44px}
.cta .brand-big{
  font-family:var(--serif);font-size:clamp(56px,11vw,150px);letter-spacing:.18em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(212,169,95,.35);line-height:1;margin-bottom:40px;user-select:none;
}

/* footer */
footer{border-top:1px solid rgba(212,169,95,.1);padding:64px 0 46px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.foot-links{display:flex;gap:34px;flex-wrap:wrap}
.foot-links a{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-2)}
.foot-links a:hover{color:var(--amber)}
.foot-bottom{margin-top:44px;font-size:12px;letter-spacing:.06em;color:var(--text-3);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:20px;padding-top:130px}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-kicker{justify-content:center}
  .pyramid{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr;gap:48px}
  .coll-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;position:absolute;top:84px;left:0;right:0;
    background:rgba(7,5,4,.97);padding:30px 24px;gap:24px;border-bottom:1px solid rgba(212,169,95,.15);
  }
  .menu-btn{display:flex}
  .nav .btn{display:none}
}
@media (max-width:560px){.section{padding:96px 0}.hero-num{display:none}}

/* ---- cross-document View Transitions (progressive enhancement) ---- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .hero{view-transition-name:page-hero}
  ::view-transition-old(page-hero),::view-transition-new(page-hero){
    animation-duration:.45s;animation-timing-function:cubic-bezier(.4,0,.2,1);
  }
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
}