:root{--ink:#0c0a08;--ink2:#17120d;--bone:#efe6d6;--brass:#b8904f;--brass2:#d8b878;--smoke:#9a8f7f;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0}html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font:300 17px/1.7 Jost,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
h1,h2,h3,.serif{font-family:"Cormorant Garamond",Garamond,"Times New Roman",serif;font-weight:300;line-height:1.05;letter-spacing:.01em}
header{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top,0px)) 28px 14px;background:linear-gradient(var(--ink),transparent)}
header img{width:45px;height:50px;object-fit:cover;object-position:center;display:block;flex:0 0 auto}
nav{display:flex;gap:28px;align-items:center;font-size:14px;letter-spacing:.08em}nav a{color:var(--bone);text-decoration:none;opacity:.75}nav a:hover{opacity:1}
.btn{display:inline-block;border:0;cursor:pointer;font:500 15px Jost,sans-serif;letter-spacing:.14em;color:#1a1208;padding:16px 44px;background:linear-gradient(120deg,var(--brass),var(--brass2) 45%,var(--brass));background-size:200% 100%;transition:background-position .6s,transform .3s,box-shadow .3s;text-decoration:none;box-shadow:0 0 0 1px var(--brass2),0 10px 40px -10px rgba(216,184,120,.45)}
.btn:hover{background-position:100% 0;transform:translateY(-2px)}.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--brass2);outline-offset:3px}
.btn.sm{padding:10px 24px;font-size:13px}
.bgm{position:fixed;right:22px;bottom:22px;z-index:26;width:46px;height:46px;border-radius:50%;border:1px solid rgba(216,184,120,.45);background:rgba(12,10,8,.62);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .3s}
.bgm:hover{border-color:var(--brass2)}
.bgm svg{width:17px;height:17px;fill:var(--brass2);display:block}
.bgm .i-pause{display:none}
.bgm.on .i-pause{display:block}.bgm.on .i-play{display:none}
.track{position:relative}.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
#t1{height:420vh}#t2{height:1200vh}
.stick:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 58%,#2a2016 0,var(--ink) 70%)}
.hero-txt{position:absolute;top:15vh;left:0;right:0;text-align:center;padding:0 24px;pointer-events:none}
.hero-txt h1{font-size:clamp(44px,8vw,104px)}.hero-txt p{color:var(--smoke);margin-top:14px;letter-spacing:.05em}
.scene{perspective:1300px;width:260px;height:340px;position:relative;margin-top:14vh}
.bottle{position:absolute;inset:0;transform-style:preserve-3d}
.cb{position:absolute;left:50%;transform-style:preserve-3d}.cb>div{position:absolute;backface-visibility:visible}
.glass>div{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 50%,rgba(255,255,255,.1));border:1px solid rgba(216,184,120,.35)}
.liq>div{background:linear-gradient(180deg,#e0a24e,#9a5a1e)}.neck>div{background:rgba(255,255,255,.12);border:1px solid rgba(216,184,120,.3)}
.cap>div{background:linear-gradient(90deg,#8a6a35,#d8b878 45%,#8a6a35);border:1px solid #6d5224}
.mw{display:grid;place-items:center;font:300 44px "Cormorant Garamond",serif;color:rgba(255,236,200,.8);text-shadow:0 0 12px rgba(0,0,0,.4);letter-spacing:.04em}
.shadow{position:absolute;left:50%;bottom:-10px;width:230px;height:30px;margin-left:-115px;background:radial-gradient(closest-side,rgba(0,0,0,.8),transparent);filter:blur(4px)}
.cap-line{position:absolute;bottom:11vh;left:0;right:0;text-align:center}
.cap-line h2{font-size:clamp(28px,4vw,46px);font-style:italic}.cap-line p{color:var(--smoke);margin-top:6px}
.bar{position:absolute;left:50%;bottom:5vh;width:120px;height:1px;margin-left:-60px;background:#3a3126}.bar i{display:block;height:1px;background:var(--brass2);width:0}
.hint{position:absolute;bottom:calc(2vh + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:13px;color:var(--smoke);letter-spacing:.1em;transition:opacity .4s}
#t2 .stick{display:block}.bg,.shade,.fore{position:absolute;inset:0}.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform,opacity}.shade{background:linear-gradient(180deg,rgba(12,10,8,.8),rgba(12,10,8,.3) 38%,rgba(12,10,8,.9)),radial-gradient(70% 60% at 50% 45%,transparent,rgba(0,0,0,.55))}.fore{display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:0 6vw calc(7vh + env(safe-area-inset-bottom,0px))}.fore h1{font-size:clamp(40px,7vw,96px);max-width:14ch}.cap2 h2{font-size:clamp(26px,3.6vw,44px);font-style:italic}.cap2 p{color:#cdbfa8;max-width:44ch}.panel{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;width:fit-content;max-width:100%;padding:18px 24px;background:rgba(20,15,10,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(184,144,79,.55)}.frame{position:relative;width:min(94vw,calc((100svh - 262px)*1.3333));min-width:290px;aspect-ratio:4/3;perspective:1200px}
.card3d{position:absolute;inset:0;transform-style:preserve-3d;box-shadow:0 40px 90px -30px #000,0 0 0 1px rgba(216,184,120,.35)}
.card3d img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rit-txt{position:absolute;bottom:9vh;left:0;right:0;text-align:center;padding:0 24px}
.rit-txt .n{font:300 14px Jost;letter-spacing:.3em;color:var(--brass2)}.rit-txt h2{font-size:clamp(30px,4.4vw,52px);margin-top:4px}.rit-txt p{color:var(--smoke);max-width:46ch;margin:6px auto 0}
.dots{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:grid;gap:12px}.dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--brass);transition:.4s}.dots i.on{background:var(--brass2);transform:scale(1.4)}
section.pad{padding:18vh 6vw}
.coll h2,.fin h2{font-size:clamp(38px,6vw,76px);text-align:center}.coll>p{text-align:center;color:var(--smoke);margin:14px auto 70px;max-width:52ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:36px;max-width:1100px;margin:auto;perspective:1100px}
.pcard{position:relative;background:var(--ink2);padding:18px 18px 26px;border:1px solid #2d2418;transition:transform .25s ease-out,border-color .3s;transform-style:preserve-3d}
.pcard:hover{border-color:var(--brass)}.pcard .ph{aspect-ratio:4/5;overflow:hidden;margin-bottom:22px;transform:translateZ(30px)}.pcard img{width:100%;height:100%;object-fit:cover;display:block}
.pcard h3{font-size:34px}.pcard .nt{color:var(--smoke);font-size:15px;margin:4px 0 18px}.pcard .row{display:flex;justify-content:space-between;align-items:center}.pcard .pr{font:400 26px "Cormorant Garamond",serif}
.link{background:none;border:0;border-bottom:1px solid var(--brass);color:var(--bone);font:400 14px Jost;letter-spacing:.1em;padding:4px 0;cursor:pointer}
.fin{text-align:center;background:radial-gradient(50% 60% at 50% 40%,#241a10,var(--ink))}.fin p{color:var(--smoke);margin:18px auto 44px;max-width:46ch}.fin .btn{font-size:17px;padding:22px 76px}
.fin2{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:16vh 6vw}.fbg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(26px) brightness(.55) saturate(1.2)}.fshade{position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(12,10,8,.3) 30%,rgba(12,10,8,.3) 70%,var(--ink)),radial-gradient(70% 60% at 50% 50%,transparent,rgba(0,0,0,.6))}.fc{position:relative;z-index:1}.fc h2{font-size:clamp(38px,6vw,76px)}.fc p{color:#cdbfa8;margin:18px auto 44px;max-width:46ch}.fc .btn{font-size:17px;padding:22px 76px}.plate{position:relative;width:min(80vw,400px);margin:0 auto 60px}.plate img{display:block;width:100%;border:1px solid rgba(184,144,79,.5);box-shadow:0 2px 3px rgba(0,0,0,.5),0 14px 24px -6px rgba(0,0,0,.6),0 40px 70px -20px rgba(0,0,0,.85),0 0 90px rgba(184,144,79,.14)}.plate:after{content:"";position:absolute;left:8%;right:8%;bottom:-32px;height:26px;background:radial-gradient(closest-side,rgba(0,0,0,.8),transparent);filter:blur(6px);z-index:-1}footer{padding:40px 6vw calc(40px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--smoke);font-size:13px;border-top:1px solid #241d14}
dialog{margin:auto;background:var(--ink2);color:var(--bone);border:1px solid var(--brass);padding:36px;width:min(92vw,460px)}dialog::backdrop{background:rgba(0,0,0,.75)}
dialog h2{font-size:38px;margin-bottom:18px}label{display:block;font-size:13px;letter-spacing:.1em;color:var(--smoke);margin:14px 0 6px}
.opts{display:flex;gap:8px;flex-wrap:wrap}.opts button{background:none;color:var(--bone);border:1px solid #4a3d2b;padding:9px 16px;font:300 15px Jost;cursor:pointer}.opts button.on{border-color:var(--brass2);background:#2a2016}
dialog input{width:100%;background:#0f0b08;border:1px solid #3a2f20;color:var(--bone);padding:12px;font:300 16px Jost}
.x{position:absolute;right:16px;top:10px;background:none;border:0;color:var(--smoke);font-size:28px;cursor:pointer}
.ok{display:none;text-align:center;padding:20px 0}.ok h2{margin-bottom:8px}
@media(max-width:640px){nav a{display:none}header{padding-inline:18px}.dots{right:10px}.scene{transform:scale(.85)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
html{scroll-snap-type:y proximity}.shop{position:relative}.sstick{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;background:var(--ink);display:grid;grid-template-columns:minmax(300px,36%) minmax(0,1fr);column-gap:4vw;padding-inline:6vw;align-items:center}.snap{height:100vh;height:100svh;scroll-snap-align:start}
.sbg{position:absolute;inset:0}.sbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity 1s ease,transform 7s ease-out}.sbg img.on{opacity:1;transform:scale(1)}
.sshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,10,8,.9),rgba(12,10,8,.4) 55%,rgba(12,10,8,.1)),linear-gradient(180deg,rgba(12,10,8,.75),transparent 25%,transparent 60%,rgba(12,10,8,.85))}
.spanel{position:relative;grid-column:1;grid-row:1;z-index:3;width:100%;max-width:460px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}.cnt{font:300 14px Jost;letter-spacing:.3em;color:var(--brass2)}.spanel h2{font-size:clamp(42px,6vw,78px)}.sprof{color:#cdbfa8;font-size:15px;min-height:1.7em}.spr{font:400 42px "Cormorant Garamond",serif}
.savebadge{display:inline-block;margin-left:.6em;padding:.28em .7em;vertical-align:middle;font:500 12px Jost;letter-spacing:.12em;color:#1a1208;background:linear-gradient(135deg,var(--brass2),#e8cd94);border-radius:2px;white-space:nowrap}
.ghost{background:none;color:var(--bone);box-shadow:inset 0 0 0 1px var(--brass)}.ghost:hover{background:#2a2016}.srow{display:flex;gap:14px;flex-wrap:wrap}.srow .btn{padding:17px 34px}
.spanel.sw .sv{animation:swp .75s cubic-bezier(.2,.7,.2,1)}@keyframes swp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.sprog{position:absolute;right:6vw;bottom:9vh;width:140px;height:1px;background:#3a3126}.sprog i{display:block;height:1px;background:var(--brass2);width:0;transition:width .6s}.hint2{position:absolute;right:6vw;bottom:calc(9vh + 14px);font-size:13px;letter-spacing:.1em;color:#cdbfa8}
dialog{max-height:90vh;max-height:90svh;overflow:auto}dialog select{width:100%;background:#0f0b08;border:1px solid #3a2f20;color:var(--bone);padding:12px;font:300 16px Jost}.tot{margin-top:18px;font:400 30px "Cormorant Garamond",serif}.dr{display:grid;grid-template-columns:80px 1fr;gap:8px 14px;margin:16px 0;font-size:15px}.dr b{font-weight:400;color:var(--brass2)}
@media(max-width:640px){.sprog,.hint2{display:none}.spanel{gap:10px}.sshade{background:linear-gradient(180deg,rgba(12,10,8,.7),transparent 25%,rgba(12,10,8,.5) 50%,rgba(12,10,8,.95))}.srow .btn{padding:15px 26px}}

/* ---------- motion + editorial layer ---------- */
/* Full-viewport water surface. The sections paint solid backgrounds, so the sheen has to
   sit above them, but it is only light: screen blending plus pointer-events:none leaves
   every control underneath exactly where it was. */
#fluid{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.5}
body.zoom #fluid{opacity:.22}
.rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;z-index:14;display:flex;align-items:center;gap:16px;font:400 10px/1 Jost;letter-spacing:.42em;text-transform:uppercase;color:rgba(216,184,120,.55);pointer-events:none}
.rail i{width:1px;height:30px;background:rgba(216,184,120,.4)}

.fore{position:relative}
.kicker{font:400 11px Jost;letter-spacing:.44em;text-transform:uppercase;color:var(--brass2)}
.fore h1{display:grid;max-width:none;font-size:clamp(42px,8.6vw,118px);letter-spacing:-.018em}
.fore h1 .w1{margin-left:0}
.fore h1 .w2{margin-left:clamp(34px,11vw,186px);font-style:italic;color:#e9dcc2}
.cap2{max-width:52ch}
.fore[data-side="right"] .kicker,.fore[data-side="right"] .cap2{text-align:right;margin-left:auto}
.fore[data-side="right"] h1 .w1{margin-left:clamp(34px,11vw,186px)}
.fore[data-side="right"] h1 .w2{margin-left:0;text-align:right}
.fore[data-side="right"] .panel{margin-left:auto}

.ghostnum{position:absolute;right:5vw;top:5vh;z-index:1;pointer-events:none;font:300 clamp(130px,25vw,330px)/.78 "Cormorant Garamond",serif;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(216,184,120,.26);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.ghostnum.flip{transform:translate3d(-18px,14px,0) scale(.96)}
/* ---------- sticky two-column showcase ---------- */
.stage{grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:center;pointer-events:none;perspective:1100px;transform-style:preserve-3d;transform:translateX(var(--shift,0px));transition:transform .8s cubic-bezier(.16,.84,.3,1)}
/* The panel itself leans into the screen — the whole gold frame, not the photo inside it, so
   the flacon keeps its original detail and is only foreshortened by perspective. The transform
   list is written out in full because the expansion overwrites it with the same four functions
   in the same order; that is what lets the tilt unwind as the flacon grows. The negative rotateY
   swings the plane from right to left: the outer edge comes forward, the inner one falls away.
   (The frame clips its leaning cutaway, and overflow forces flattening by spec, so the 3D chain
   is carried by the stage above rather than by the frame.) */
.frame{pointer-events:auto;position:relative;margin:0;width:min(46vw,calc(66svh*1.7778));min-width:280px;aspect-ratio:16/9;overflow:hidden;cursor:zoom-in;background:#0a0806;border:1px solid rgba(184,144,79,.42);box-shadow:-46px 58px 96px -40px #000,-16px 20px 46px -22px rgba(0,0,0,.9),0 0 0 1px rgba(216,184,120,.14);transform:translate(0px,0px) rotateY(-18deg) rotateX(4deg) scale(1);transform-origin:50% 50%;transition:transform .66s cubic-bezier(.16,.84,.3,1),box-shadow .5s ease;will-change:transform}
/* the near edge catches a little light, the far edge falls away */
.frame:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity .5s ease;background:linear-gradient(284deg,rgba(255,236,205,.07),rgba(255,236,205,0) 26%,rgba(0,0,0,0) 58%,rgba(0,0,0,.36))}
.flayers{position:absolute;inset:0;perspective:1150px;--cx:7deg;--cy:-13deg}
/* the layers cross-fade in place; the src attribute never changes */
.flayers img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.flayers img.on{opacity:1}
/* the shot sits square inside the leaning panel: no transform of its own, so the flacon is
   never upscaled or foreshortened a second time over the tilt the frame already carries */
.flayers img.shot{transform:none}
/* the cutaway keeps its pointer-driven lean, measured against the panel rather than the page */
.flayers img.cut{transform:rotateX(var(--cx)) rotateY(var(--cy)) scale(1.07);transition:opacity .6s ease,transform .14s ease-out}
/* the cutaway dissolves in just after the expansion starts, so it rides the growth,
   while the lean keeps answering the pointer with no added delay */
body.zoom .flayers img{transition-delay:.1s}
body.zoom .flayers img.cut{transition-delay:.1s,0s}
.snav{display:flex;flex-direction:column;gap:10px;width:100%;border-top:1px solid rgba(184,144,79,.28);padding-top:12px}
.snavtop{display:flex;align-items:center;gap:14px;font:400 12px Jost;letter-spacing:.22em;color:var(--smoke)}
.snavtop button{background:none;border:1px solid #4a3d2b;color:var(--bone);width:34px;height:34px;font:400 18px/1 Jost;cursor:pointer;transition:border-color .3s,background .3s}
.snavtop button:hover{border-color:var(--brass2);background:#2a2016}
.snav ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px 16px;max-height:21vh;overflow:auto;font:300 13px Jost;letter-spacing:.06em;scrollbar-width:thin}
.snav a{display:block;padding:3px 0;color:var(--smoke);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.snav a:hover{color:var(--bone)}
.snav li.on a{color:var(--brass2);border-bottom-color:rgba(216,184,120,.55)}
.spanel{transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.3,1)}
.sstick[data-mode="present"] .spanel{opacity:0;transform:translateY(16px);pointer-events:none}
.zveil{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(70% 70% at 50% 50%,rgba(7,6,5,.55),rgba(7,6,5,.93));transition:opacity .55s ease}
.zchip{position:absolute;left:50%;bottom:12px;z-index:4;transform:translateX(-50%);font:400 10px Jost;letter-spacing:.32em;text-transform:uppercase;color:rgba(239,230,214,.74);background:rgba(12,10,8,.58);padding:7px 14px;pointer-events:none;white-space:nowrap}
body.zoom .stage{z-index:9}
body.zoom .frame{cursor:zoom-out;box-shadow:0 70px 150px -46px #000,0 0 0 1px rgba(216,184,120,.5)}
/* the panel is square-on when expanded, so the near/far light has nothing left to sell */
body.zoom .frame:after{opacity:0}
body.zoom .zveil{opacity:1}
/* The blur sits on the sibling layers, never on an ancestor of the frame: a filter on a
   parent cannot be undone by its descendants, so the expanded flacon would blur too. */
body.zoom header,body.zoom .rail,body.zoom #t2,body.zoom .fin2,body.zoom footer,
body.zoom .shop .sbg,body.zoom .shop .sshade,body.zoom .shop .spanel,body.zoom .shop .ghostnum,
body.zoom .shop .sprog,body.zoom .shop .hint2{filter:blur(17px) saturate(.7) brightness(.68);opacity:.32;transition:filter .55s ease,opacity .55s ease}
.viewtag{display:flex;align-items:center;gap:10px;min-height:13px;font:400 10px Jost;letter-spacing:.4em;text-transform:uppercase;color:rgba(216,184,120,.8)}
.viewtag:before{content:"";width:24px;height:1px;background:var(--brass2)}

.dyn-host .wd{display:inline-block;overflow:hidden;vertical-align:bottom}
.dyn-host .wd>i{display:inline-block;font-style:inherit;transform:translate3d(0,108%,0);animation:wdup .82s cubic-bezier(.16,.84,.3,1) both}
@keyframes wdup{to{transform:none}}
@media(max-width:640px){.rail,.ghostnum{display:none}
 .fore h1 .w2,.fore[data-side="right"] h1 .w1{margin-left:0}
 .fore[data-side="right"] .kicker,.fore[data-side="right"] .cap2{margin-left:0;text-align:left}
 .fore[data-side="right"] .panel{margin-left:0}}
@media(max-width:820px){.sstick{grid-template-columns:1fr;align-content:center;row-gap:2vh}
 .spanel{grid-column:1;grid-row:2;max-width:none}
 .stage{grid-column:1;grid-row:1;transform:none}
 /* a near-edge-on panel would eat most of a phone viewport, so the lean softens with the width */
 .frame{width:min(90vw,calc(46svh*1.7778));transform:translate(0px,0px) rotateY(-8deg) rotateX(2deg) scale(1)}
 .snav ul{max-height:13vh}
 .sstick[data-mode="present"] .spanel{opacity:1;transform:none;pointer-events:auto}
 body.zoom .shop .spanel{opacity:.32}}
@media(prefers-reduced-motion:reduce){#fluid,.rail{display:none}.dyn-host .wd>i{animation:none;transform:none}.ghostnum{transition:none}.stage,.frame{transition:none}
 .flayers img{transition:none}
/* a held lean is not motion, but the pointer-driven one is, so only the cutaway flattens */
 .flayers img.cut{transform:none;transition:none}}