/* An editorial wine story, with a bottle choreographed by native scrolling. */
.wine-experience{--paper:#f2eee4;--text:#31362a;--muted:#797866;--line:#c9c5b6;position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--text);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#b4af9d var(--paper);font-family:'DM Sans',sans-serif}
.wine-experience::backdrop{background:#10120ee6}
.wine-experience button,.wine-experience a{-webkit-tap-highlight-color:transparent}
.wine-experience button{color:inherit;background:none;border:0}
.wine-experience :focus-visible{outline:2px solid #787954;outline-offset:5px}
.wine-experience h1,.wine-experience h2,.wine-experience h3{font-family:'Cormorant Garamond',serif;font-weight:400;letter-spacing:-.045em}
.wine-experience em{font-weight:400;color:#858363}
.wine-experience p{font-size:14px;line-height:1.85}
.wine-experience .wx-kicker{font:500 10px/1.5 'DM Sans',sans-serif;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.wx-nav{position:sticky;top:0;z-index:20;height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4%;background:linear-gradient(var(--paper) 35%,#f2eee4ed 75%,#f2eee400);border:0}
.wx-back{justify-self:start;display:flex;align-items:center;gap:14px;min-height:44px;font-size:20px;padding:8px 0}
.wx-back span,.wx-counter{font-size:10px;letter-spacing:.12em;text-transform:uppercase}.wx-counter{justify-self:end;color:var(--muted)}
.wx-brand{font:400 27px 'Cormorant Garamond',serif;letter-spacing:.15em;text-decoration:none}
.wx-journey{height:350dvh;margin-top:-86px;position:relative}
.wx-stage{position:sticky;top:0;height:100dvh;overflow:clip;background:radial-gradient(ellipse at 50% 55%,#e2decd60,transparent 55%),var(--paper)}
.wx-year{position:absolute;right:6%;top:20%;font:400 clamp(180px,29vw,480px)/1 'Cormorant Garamond',serif;letter-spacing:-.09em;color:#353a2d}
.wx-watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:400 33vw/1 'Cormorant Garamond',serif;letter-spacing:-.04em;color:#d5d2bf;opacity:0;pointer-events:none}
.wx-bottle{position:absolute;left:50%;top:55%;height:73%;width:30%;z-index:3;transform:translate(-50%,-50%);will-change:transform;pointer-events:none}
.wx-bottle img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(15px 20px 13px #3d402433)}
.wx-panel{position:absolute;z-index:4;will-change:opacity;transition:visibility .1s}
.wx-opening{left:6%;top:40%;width:31%}
.wx-opening .wx-title{font-size:clamp(48px,5.8vw,94px);line-height:.98;margin:0 0 22px;text-wrap:balance}
.wx-opening .wx-tagline{font:400 clamp(21px,2vw,32px)/1.25 'Cormorant Garamond',serif;max-width:300px;color:#72745f}
.wx-scroll{display:flex;gap:35px;align-items:center;padding:14px 0!important;font-size:9px;text-transform:uppercase;letter-spacing:.15em;margin-top:48px;border-bottom:1px solid var(--line)!important;min-height:44px}.wx-scroll span{font-size:20px}
.wx-origin{left:55%;top:23%;width:34%;max-width:540px;opacity:0;visibility:hidden}
.wx-origin h2{font-size:clamp(40px,4.2vw,72px);line-height:1.04;margin:0 0 27px;text-wrap:balance}
.wx-origin>p:not(.wx-kicker){max-width:460px;color:#696e5b}
.wx-origin-facts{display:grid;grid-template-columns:1fr 1fr;gap:25px 30px;margin-top:36px}
.wx-origin-facts dt,.wx-specs dt{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#7f806c;margin-bottom:9px}.wx-origin-facts dd{font-size:12px;line-height:1.6;margin:0}
.wx-tasting{inset:0;opacity:0;visibility:hidden;pointer-events:none}.wx-taste-left{position:absolute;left:6%;top:29%;width:29%}.wx-taste-right{position:absolute;left:72%;top:50%;width:22%}
.wx-tasting h2{font-size:clamp(35px,4vw,64px);line-height:1.04;margin:0 0 25px}.wx-tasting h3{font-size:32px;line-height:1.1;margin:0 0 18px}.wx-tasting p:not(.wx-kicker){font-size:13px;color:#6c705e;max-width:340px}
.wx-serve{margin-top:28px;display:flex;flex-direction:column;gap:7px}.wx-serve span{font:400 38px 'Cormorant Garamond',serif}.wx-serve small{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.wx-chapters{position:absolute;left:6%;bottom:28px;display:flex;align-items:center;z-index:8;gap:4px}.wx-chapters button{font-size:10px;min-width:44px;min-height:44px;opacity:.4}.wx-chapters button[aria-current=step]{opacity:1;border:1px solid #a7aa8e;border-radius:50%}.wx-chapters i{width:25px;height:1px;background:var(--line)}
.wx-stage-caption{position:absolute;right:5%;bottom:46px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wx-making{padding:100px 6% 110px;position:relative;background:var(--paper)}
.wx-making>h2,.wx-next>h2{font-size:clamp(58px,8.5vw,142px);line-height:.98;max-width:1100px;margin:22px 0 65px}
.wx-landscape{height:60vh;max-height:720px;margin:0 -6.82% 100px;overflow:hidden;position:relative;background:#d6d4c5}.wx-landscape img{width:100%;height:100%;object-fit:cover;will-change:transform}.wx-landscape figcaption{position:absolute;left:6%;bottom:35px;font:400 clamp(40px,6vw,90px) 'Cormorant Garamond',serif;color:#fff9e9;text-shadow:0 2px 20px #0005}
.wx-process{display:grid;grid-template-columns:repeat(3,1fr);gap:4%}.wx-photo{height:380px;overflow:hidden;background:#e5e1d3;margin-bottom:28px}.wx-photo img{width:100%;height:100%;object-fit:cover}.wx-process article:nth-child(2){padding-top:80px}.wx-process article:nth-child(3){padding-top:160px}.wx-process-bottle{background:radial-gradient(ellipse,#d6d2bd,var(--paper))}.wx-process-bottle img{object-fit:contain;padding:35px}
.wx-process h3{font-size:36px;line-height:1.1;margin:10px 0 18px}.wx-process p:not(.wx-kicker){color:#737761;font-size:13px;max-width:330px}.wx-process .wx-kicker{margin-bottom:15px}
.wx-pour-section{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;padding:90px 8%;background:#e6e2d5}.wx-pour-section h2{font-size:clamp(45px,5vw,82px);line-height:1.03;margin:0 0 28px}.wx-pour-section p{color:#6c705d;max-width:400px}.wx-pour-section figure{margin:0}.wx-pour-section video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.wx-pour-section figcaption{display:flex;justify-content:space-between;align-items:center;font-size:9px;text-transform:uppercase;letter-spacing:.1em;padding:10px 0}.wx-pour-section button{min-height:44px;font-size:10px;border-bottom:1px solid #939580}
.wx-specs{padding:110px 8% 80px}.wx-spec-heading{display:flex;align-items:baseline;justify-content:space-between;gap:30px}.wx-spec-heading h2{font-size:clamp(40px,4vw,68px);margin:0 0 40px}.wx-specs dl{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 35px}.wx-specs dl>div{border-top:1px solid var(--line);padding-top:18px}.wx-specs dd{font-size:13px;line-height:1.6;margin:0}.wx-award{margin:50px 0 20px;padding:25px 0;border-block:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;font-size:13px}.wx-award span{color:var(--muted)}.wx-specs summary{display:flex;justify-content:space-between;font:400 29px 'Cormorant Garamond',serif;cursor:pointer;padding:20px 0}.wx-archive{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.wine-experience .wx-small{font-size:10px;line-height:1.7;color:#878774;margin-top:28px;max-width:650px}
.wx-next{padding:80px 8% 45px;background:#e7e5d9;text-align:center}.wx-next>h2{font-size:clamp(55px,7vw,110px);margin:20px auto 60px}.wx-next>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5%}.wx-next [data-open-wine]{display:flex;flex-direction:column;align-items:center;gap:10px;padding:15px;min-width:0}.wx-next img{height:320px;width:100%;object-fit:contain;filter:drop-shadow(12px 15px 8px #35402622);transition:transform .7s cubic-bezier(.2,.7,.2,1)}.wx-next button:hover img{transform:translateY(-15px) rotate(5deg)}.wx-next button span{font:400 30px 'Cormorant Garamond',serif;margin-top:15px}.wx-next button small{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.wx-return{font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin:65px auto 0;min-height:44px;padding:12px;border-bottom:1px solid #9e9f8a!important}
@media(min-width:701px) and (max-width:1100px){.wx-origin{left:53%;width:41%;top:24%}.wx-origin h2{font-size:44px}.wx-origin-facts{gap:16px;margin-top:24px}.wx-taste-left{width:30%}.wx-taste-right{left:71%;width:24%}.wx-tasting h2{font-size:40px}.wx-tasting p:not(.wx-kicker){font-size:12px}.wx-photo{height:290px}.wx-specs dl{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){
 .wx-nav{height:76px;padding:0 6%}.wx-back span{display:none}.wx-brand{font-size:23px}.wx-counter{font-size:9px}.wx-journey{height:330dvh;margin-top:-76px}
 .wx-bottle{height:57%;width:55%}.wx-year{font-size:42vw;right:7%;top:38%;color:#d3d0bc}.wx-opening{top:15%;left:7%;width:86%}.wx-opening .wx-title{font-size:clamp(40px,10vw,60px);max-width:100%;margin-bottom:12px}.wx-opening .wx-tagline{font-size:20px;max-width:none;margin:0}.wx-opening .wx-kicker{margin-bottom:12px;font-size:9px}.wx-scroll{margin-top:10px;padding:8px 0!important;font-size:8px;gap:24px}
 .wx-origin{left:49%;width:45%;top:22%}.wx-origin h2{font-size:clamp(25px,6.4vw,38px);margin-bottom:18px}.wx-origin>p:not(.wx-kicker){font-size:11px;line-height:1.7}.wx-origin .wx-kicker{font-size:8px;margin-bottom:14px}.wx-origin-facts{grid-template-columns:1fr;gap:16px;margin-top:20px}.wx-origin-facts>div:nth-child(n+3){display:none}.wx-origin-facts dt{font-size:8px}.wx-origin-facts dd{font-size:10px}
 .wx-taste-left{top:15%;left:7%;width:86%}.wx-taste-left h2{font-size:32px;max-width:85%;margin:0 0 14px}.wx-taste-left p:not(.wx-kicker){font-size:11px;line-height:1.7;max-width:none}.wx-taste-left .wx-kicker{font-size:8px;margin-bottom:10px}.wx-taste-right{left:64%;width:30%;top:60%}.wx-taste-right h3{font-size:23px}.wx-taste-right p:not(.wx-kicker){font-size:10px;line-height:1.6}.wx-taste-right .wx-kicker{font-size:8px;margin-bottom:10px}.wx-serve{margin-top:12px}.wx-serve span{font-size:26px}.wx-serve small{font-size:7px}
 .wx-chapters{left:5%;bottom:16px}.wx-stage-caption{right:6%;bottom:33px;font-size:7px;max-width:100px;text-align:right;line-height:1.5}.wx-chapters i{width:12px}.wx-chapters button{font-size:9px}.wx-watermark{font-size:45vw}
 .wx-making{padding:65px 7%}.wx-making>h2{font-size:49px;margin-bottom:35px}.wx-landscape{height:45vh;margin-bottom:50px;margin-inline:-8.14%}.wx-landscape figcaption{font-size:44px;bottom:25px}.wx-process{grid-template-columns:1fr;gap:40px}.wx-process article:nth-child(n){padding-top:0}.wx-photo{height:340px;margin-bottom:22px}.wx-process h3{font-size:32px}.wx-process p:not(.wx-kicker){max-width:none}.wx-process-bottle{height:340px}
 .wx-pour-section{grid-template-columns:1fr;padding:60px 7%;gap:28px}.wx-pour-section h2{font-size:48px}.wx-specs{padding:65px 7%}.wx-spec-heading{display:block}.wx-spec-heading h2{font-size:42px}.wx-specs dl{grid-template-columns:1fr 1fr;gap:25px 20px}.wx-specs dd{font-size:12px}.wx-specs dt{font-size:8px}.wx-award{display:block;line-height:1.8}.wx-award strong{display:block}.wx-archive{grid-template-columns:1fr;gap:0}
 .wx-next{padding:60px 5% 30px}.wx-next>h2{font-size:50px;margin-bottom:35px}.wx-next>div{gap:0}.wx-next [data-open-wine]{padding:5px}.wx-next img{height:200px}.wx-next button span{font-size:20px}.wx-next button small{font-size:7px;line-height:1.5}.wx-return{margin-top:40px}
}
@media(max-height:620px) and (min-width:701px){.wx-nav{height:65px}.wx-journey{margin-top:-65px}.wx-origin{top:20%}.wx-origin h2{font-size:35px;margin-bottom:15px}.wx-origin>p{font-size:12px}.wx-origin-facts{gap:12px;margin-top:18px}.wx-tasting h2{font-size:35px}.wx-tasting p:not(.wx-kicker){font-size:11px}.wx-opening .wx-title{font-size:50px}.wx-scroll{margin-top:22px}.wx-stage-caption{bottom:30px}.wx-chapters{bottom:10px}}
@media(prefers-reduced-motion:reduce){.wx-bottle,.wx-panel,.wx-landscape img{will-change:auto}.wx-next img{transition:none}.wx-next button:hover img{transform:none}}

@media(min-width:701px) and (max-aspect-ratio:1/1){.wx-bottle{width:40%}.wx-origin{top:28%}.wx-taste-left{top:25%}}

/* Real 3D geometry turns around its own axis while the camera follows the scroll. */
.wx-model{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;filter:drop-shadow(15px 18px 10px #43432d30)}
.wx-model-ready .wx-model{opacity:1}.wx-model-ready .wx-bottle{opacity:0}
.wx-journey{height:320dvh}
.wx-taste-left{width:28%}.wx-taste-right{left:75%;width:20%}
@media(max-width:700px){.wx-journey{height:320dvh}.wx-taste-left{width:86%}.wx-taste-right{left:64%;width:30%}}

/* No sticky paper band: the nav sits on the bottle stage and leaves with it; a small round back button takes over after. */
.wx-stage>.wx-nav{position:absolute;top:0;left:0;right:0;background:none}
.wx-journey{margin-top:0}
.wine-experience .wx-float-back{position:fixed;top:20px;left:max(16px,3.2%);z-index:30;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:19px;line-height:1;background:#f2eee4e6;border:1px solid #c9b48a;box-shadow:0 6px 18px #3a33200f;opacity:0;translate:0 -8px;pointer-events:none;transition:opacity .35s,translate .35s,background .25s}
.wine-experience.wx-past .wx-float-back{opacity:1;translate:none;pointer-events:auto}
.wine-experience .wx-float-back:hover{background:#fbf8f0}
@media(max-width:700px){.wine-experience .wx-float-back{top:14px;width:42px;height:42px}}

/* Gold frames (hero-frame.css → .gold-edge) on the landscape, the three photos and the pour film */
.wx-photo{position:relative;--gold-w:clamp(16px,1.9vw,28px)}
.wx-landscape{--gold-w:clamp(24px,3.4vw,52px)}
.wx-landscape figcaption{left:calc(6% + var(--gold-w));bottom:calc(var(--gold-w) + 22px);z-index:7}
.wx-film{position:relative;overflow:hidden;--gold-w:clamp(18px,2.2vw,32px)}
.wx-film-figure figcaption{gap:24px}
.wx-film-line{flex:1;height:1px;background:#cfc9b6;position:relative;overflow:hidden}
.wx-film-line i{position:absolute;inset:0;background:#a8874a;transform-origin:left;transform:scaleX(var(--t,0));transition:transform .3s linear}
.wx-pour-play{display:none}
@media(prefers-reduced-motion:reduce){.wx-pour-play{display:inline-flex}.wx-film-line{display:none}}
@media(max-width:700px){.wx-photo,.wx-film{--gold-w:16px}.wx-landscape{--gold-w:20px}}

/* Arriving from the presented bottle on the shelf: the story fades in over the room instead of cutting to it. */
@keyframes wxArrive{from{opacity:0}}
@media(prefers-reduced-motion:no-preference){.wine-experience[open]{animation:wxArrive .6s cubic-bezier(.2,.7,.2,1)}.wine-experience[open]::backdrop{animation:wxArrive .6s ease}}

/* The story is the section under the presented bottle, scrolled by the page itself (not a full-screen layer):
   overflow-x:clip keeps the sticky stage working against the page. */
.wine-experience{position:relative;inset:auto;height:auto;overflow:visible;overflow-x:clip;overscroll-behavior:auto;z-index:1}
.wine-experience[open]{animation:none}
