/* Immersive product and blend experiences. Native WebGL / Canvas, no libraries. */
.hero {
  grid-template-columns: .95fr 1.08fr;
  min-height: 780px;
  max-height: 1060px;
}
.hero h1 {font-size: clamp(54px, 4.7vw, 76px);}
.hero-copy {padding-bottom: 45px;}
.hero-art {height: min(82svh, 820px); min-height: 690px; margin-left: -4%;}
.hero-aside {display: none;}
.hero-art::before {inset: -5% -25% -3%; background: radial-gradient(ellipse at 50% 50%, #e6c29e52, #edd3b522 35%, transparent 66%);}
.hero-art::after {content: ''; position: absolute; inset: 0 -10% 8%; background: radial-gradient(ellipse at 48% 58%, #e9ac7e22, transparent 60%); animation: hero-glow 12s ease-in-out infinite; pointer-events: none; z-index: -1;}
.hero-art .orbit-one {width: 88%; height: 85%; top: 48%; border-color: #bda17c45;}
.hero-art .orbit-two {width: 75%; height: 91%; top: 47%; border-color: #bda17c2e;}
.hero-art .edition-seal {right: 2%; top: 15%; z-index: 4; background: #fbf9f5bb;}
.hero-art .bottle-shadow {bottom: 7%; width: 270px; background: radial-gradient(ellipse, #a77a4550, transparent 70%);}
.hero-bottle-canvas, .object-bottle-canvas {position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; touch-action: pan-y; cursor: grab; transition: opacity .7s;}
.hero-bottle-canvas {height: 96%; z-index: 2;}
.hero-art.digital-ready .hero-bottle-canvas, .object-lab.digital-ready .object-bottle-canvas {opacity: 1;}
.hero-art.digital-ready .bottle-float {opacity: 0;}
.hero-art .bottle-float {transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s;}
.object-lab .object-bottle {transition: opacity .7s;}
.hero-art:not(.digital-ready) .hero-spin, .object-lab:not(.digital-ready) .object-spin {display: none;}
.hero-art:not(.digital-ready) .bottle-float {animation: photograph-float 9s ease-in-out infinite;}
.hero-spin {position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: 12px; font-size: 10px; min-height: 44px; z-index: 5; color: #70573c; padding: 8px 12px;}
.hero-spin>span {font-size: 24px; line-height: 1;}
.hero-spin:hover {color: var(--ink);}
.dragging {cursor: grabbing!important;}
.object-bottle-canvas {z-index: 1;}
.object-lab.digital-ready .object-camera {transform: none!important; opacity: 1!important; z-index: 2;}
.object-lab.digital-ready .object-scene {transform: none!important;}
.object-lab.digital-ready .object-bottle {opacity: 0;}
.object-lab .detail-inset {z-index: 3;}
.object-lab .verso-card {z-index: 4;}
.object-lab .object-annotation {display: none;}
.object-lab.digital-ready .verso-card {left: auto; right: 16px; bottom: 20px; width: 174px; padding: 17px;}
.object-lab.digital-ready .verso-card>p {font-size: 25px;}
.object-lab.digital-ready .verso-card .text-link {font-size: 10px; gap: 8px;}
.object-lab .object-rings {animation: bottle-orbit 28s ease-in-out infinite;}
.object-spin {display: flex; gap: 25px; align-items: center; justify-content: center; width: 100%; min-height: 45px; font-size: 10px; color: #735b3e;}
.object-spin>span {font-size: 23px; line-height: 1;}
.object-spin:hover {background: #fbf9f54d;}
.object-lab .object-hint {font-size: 8px; padding: 0 15px 17px;}
.object-lab .hotspot::before {content: ''; position: absolute; inset: -7px; border-radius: 50%;}
.wine-playground {min-width: 0; position: relative; text-align: center;}
.wine-playground .tasting-visual {width: 100%; max-width: 510px; aspect-ratio: 1; position: relative;}
#wine-canvas {display: block; width: 100%; height: 100%; position: absolute; inset: 0; touch-action: pan-y;}
.wine-center {position: absolute; inset: 28% 24%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; color: #fff1d4; text-shadow: 0 2px 24px #6d392735;}
.wine-center>span {font-size: 8px; letter-spacing: .28em; line-height: 1.7;}
.wine-center>strong {font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(70px, 8vw, 120px); line-height: 1.15; letter-spacing: -.05em; margin: 2px 0 10px;}
.wine-center>span:last-child {font-size: 6px; letter-spacing: .15em; white-space: nowrap;}
.grape-orbit {position: absolute; inset: 0; pointer-events: none;}
.grape-orbit button {position: absolute; transform: translate(-50%, -50%); width: clamp(84px, 9vw, 118px); min-height: 45px; font-size: 10px; line-height: 1.45; color: #c5b39a; padding: 10px 5px; background: #121110ed; border: 1px solid transparent; transition: color .3s, background .3s, border-color .3s; pointer-events: auto; border-radius: 2px;}
.grape-orbit button:nth-child(1) {left: 50%; top: 8%;}
.grape-orbit button:nth-child(2) {left: 89%; top: 38%;}
.grape-orbit button:nth-child(3) {left: 74%; top: 86%;}
.grape-orbit button:nth-child(4) {left: 26%; top: 86%;}
.grape-orbit button:nth-child(5) {left: 11%; top: 38%;}
.grape-dot {display: block; width: 5px; height: 5px; border-radius: 50%; background: #c5a880; box-shadow: 0 0 12px #c5a88050; margin: 0 auto 8px; transition: background .3s, box-shadow .3s;}
.grape-orbit button:hover, .grape-orbit button[aria-pressed=true] {color: #f8e4c3; border-color: #c5a8807a; background: #292019ed;}
.grape-orbit button[aria-pressed=true] .grape-dot {background: var(--grape-color); box-shadow: 0 0 14px var(--grape-color);}
.wine-playground-caption {display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #ffffff24; margin-top: 6px; padding-top: 18px;}
.wine-playground-caption>p {font-family: var(--serif); font-size: 20px; line-height: 1.4; color: #e2c8a6; text-align: left;}
#wine-reset {font-size: 9px; color: #c5b39a; min-height: 44px; white-space: nowrap; padding: 8px 0 8px 10px;}
#wine-reset>span {margin-left: 9px; font-size: 19px;}
.wine-playground-hint {font-size: 9px; color: #9f9380; text-align: left; margin-top: 10px;}
#wine-pause {display: block; margin-top: 15px; font-size: 9px; color: #b39b7a; padding: 7px 0; min-height: 36px;}
.blend li {transition: color .4s, transform .4s;}
.blend li.highlighted {color: #efbb9b; transform: translateY(-4px);}
.story-experience {max-width: 380px; width: 100%; position: relative; margin-top: 24px;}
#story-canvas {display: block; width: 100%; height: 390px; touch-action: pan-y; cursor: crosshair;}
.story-stages {display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); padding-top: 9px;}
.story-stages button {position: relative; font-size: 10px; color: var(--muted); min-height: 42px; padding: 8px 12px;}
.story-stages button[aria-pressed=true] {color: #8f6b40;}
.story-stages button[aria-pressed=true]::before {content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 2px; background: var(--gold);}
#story-caption {font-family: var(--serif); font-size: 19px; color: #8f6b40; line-height: 1.5; margin: 10px 35px 0 0; min-height: 29px;}
#story-pause {position: absolute; right: 0; bottom: -3px; width: 34px; height: 34px; border: 1px solid #c5a88070; border-radius: 50%; font-size: 13px; color: #8f6b40; display: grid; place-items: center;}
@media(max-width:800px){#story-canvas{height:330px}.story-stages button{font-size:9px;padding:8px}.story-stages{gap:6px}#story-caption{font-size:17px;min-height:52px}#story-pause{bottom:16px}}
@media(max-width:600px){.story-title{display:block}.story-title h2{font-size:48px}.story-experience{max-width:370px;margin:15px auto 0}#story-canvas{height:360px}.story-stages button{font-size:11px;padding:8px 12px}.story-stages{gap:15px}#story-caption{font-size:20px;min-height:30px}#story-pause{bottom:-2px}}
@media(max-width:360px){.story-title h2{font-size:41px}#story-canvas{height:325px}.story-stages button{font-size:10px}#story-caption{font-size:18px}}
@media(max-width:600px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
  .hero-copy{display:contents}
  .hero-copy>.eyebrow{grid-row:1;margin-bottom:20px}
  .hero-copy>h1{grid-row:2;position:relative;z-index:3}
  .hero-art{grid-row:3;justify-self:center;width:115%;height:535px;margin-top:6px}
  .hero-copy>.hero-description{grid-row:4;margin-top:8px;max-width:340px}
  .hero-copy>.button{grid-row:5;justify-self:start;width:max-content}
  .hero-copy>.hero-story{grid-row:6;margin-left:0;margin-top:10px}
  .hero-bottom{grid-row:7;margin-top:20px}
}
@media(max-width:360px){.hero-art{height:500px}.hero-copy>.eyebrow{margin-bottom:17px}}
@keyframes hero-glow {0%,100%{opacity:.45; transform:scale(.94)}50%{opacity:1; transform:scale(1.06)}}
@keyframes photograph-float {0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-12px) rotate(.6deg)}}
@keyframes bottle-orbit {0%,100%{transform:rotate(20deg)}50%{transform:rotate(34deg)}}
@media(min-width:1600px){.hero h1{font-size:85px}.hero-art{transform:none}.hero-copy{padding-left:3%}.hero-art .edition-seal{right:7%;top:18%}}
@media(max-width:1199px){.hero{min-height:760px;grid-template-columns:1fr 1fr}.hero h1{font-size:clamp(49px,5.5vw,65px)}.hero-art{height:700px;min-height:650px}.hero-art .edition-seal{right:-2%;top:12%}.hero-spin{font-size:9px}.wine-playground-caption>p{font-size:18px}}
@media(max-width:800px){.hero{min-height:690px}.hero h1{font-size:48px}.hero-art{height:600px;min-height:600px}.hero-art .edition-seal{right:-5%;top:11%}.hero-spin{font-size:8px;gap:8px}.hero-art .bottle-shadow{bottom:8%;width:210px}.grape-orbit button{font-size:8px;width:85px;padding:8px 3px}.wine-center>strong{font-size:78px}.wine-center>span{font-size:6px}.wine-center>span:last-child{font-size:5px;letter-spacing:.05em}.wine-playground-caption{align-items:start}.wine-playground-caption>p{font-size:16px;max-width:170px}#wine-reset{font-size:8px}#wine-reset>span{margin-left:3px}.object-lab.digital-ready .verso-card{width:145px;right:10px;padding:13px}.object-lab.digital-ready .verso-card>p{font-size:22px}}
@media(max-width:600px){.hero{display:flex;min-height:0;height:auto;padding-top:32px}.hero h1{font-size:clamp(43px,9.8vw,59px)}.hero-copy{padding-bottom:0}.hero-description{font-size:12px}.hero-art{height:620px;min-height:0;margin:0;width:115%;max-width:none;flex:none;align-self:center}.hero-art .edition-seal{right:6%;top:18%;width:84px;height:84px}.hero-art .orbit-one{width:86%;height:80%;top:47%}.hero-art .orbit-two{width:74%;height:83%;top:47%}.hero-art .bottle-shadow{bottom:7%;width:225px}.hero-spin{font-size:9px;bottom:1%;gap:10px}.hero-bottom{padding-top:15px}.wine-playground{margin-bottom:30px}.wine-playground .tasting-visual{max-width:390px;width:100%}.grape-orbit button{width:95px;font-size:9px}.wine-center>strong{font-size:91px}.wine-center>span{font-size:7px}.wine-center>span:last-child{font-size:5px}.wine-playground-caption>p{font-size:20px;max-width:none}.wine-playground-caption{align-items:center}#wine-reset{font-size:9px}.wine-playground-hint{font-size:9px}.object-lab.digital-ready .verso-card{width:155px;bottom:15px}.object-lab.digital-ready .verso-card>p{font-size:23px}.object-lab .object-hint{font-size:7px}}
@media(max-width:360px){.hero h1{font-size:40px}.hero-art{height:570px;width:117%;margin-top:0}.hero-art .edition-seal{width:74px;height:74px;right:4%}.hero-spin{font-size:8px}.grape-orbit button{width:82px;font-size:8px}.wine-center>strong{font-size:77px}.wine-center>span:last-child{font-size:4px}.wine-playground-caption>p{font-size:18px}.wine-playground-caption{gap:10px}#wine-reset{font-size:8px}.object-lab.digital-ready .verso-card{width:130px;bottom:12px;padding:12px}.object-lab.digital-ready .verso-card>p{font-size:21px}.object-lab .object-hint{font-size:6px}}
@media(prefers-reduced-motion:reduce){.hero-art::after,.object-lab .object-rings,.hero-art:not(.digital-ready) .bottle-float{animation:none}.hero-bottle-canvas,.object-bottle-canvas,.blend li{transition:none}.blend li.highlighted{transform:none}}
@media print{.hero-spin,.object-spin,.grape-orbit,#wine-pause,.wine-playground,.hero-bottle-canvas,.object-bottle-canvas{display:none}.object-lab.digital-ready .object-bottle{opacity:1}}
/* Keep the bottle between the headline and supporting copy on small screens. */
@media(max-width:600px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;max-height:none}
  .hero-copy{display:contents}
  .hero-copy>.eyebrow{grid-row:1;margin-bottom:20px}
  .hero-copy>h1{grid-row:2;position:relative;z-index:3}
  .hero-art{grid-row:3;justify-self:center;width:115%;height:535px;min-height:0;margin-top:6px}
  .hero-copy>.hero-description{grid-row:4;margin-top:8px;max-width:340px}
  .hero-copy>.button{grid-row:5;justify-self:start;width:max-content}
  .hero-copy>.hero-story{grid-row:6;margin-left:0;margin-top:10px}
  .hero-bottom{grid-row:7;margin-top:20px}
}
@media(max-width:360px){.hero-art{height:500px}.hero-copy>.eyebrow{margin-bottom:17px}}
/* Four readable steps: the column appears first, then matter, form and feeling. */
.story-experience{--story-h:390px}
#story-canvas{height:var(--story-h)}
.story-stages{gap:4px}
.story-stages button{font-size:10px;padding:8px 10px;flex:1}
.story-copy{min-height:154px;padding-top:14px}
#story-caption{font-size:19px;line-height:1.4;margin:0 43px 0 0;min-height:54px}
#story-explanation{margin-top:6px;font-size:11px;line-height:1.85;color:var(--muted);max-width:360px}
#story-pause{top:calc(var(--story-h) + 67px);bottom:auto}
@media(max-width:800px){.story-experience{--story-h:330px}.story-stages button{font-size:8px;padding:8px 4px}.story-copy{min-height:180px}#story-caption{font-size:17px;min-height:48px}#story-explanation{font-size:11px}}
@media(max-width:600px){.story-experience{--story-h:360px}.story-stages button{font-size:10px;padding:8px 5px}.story-copy{min-height:175px}#story-caption{font-size:21px;min-height:58px}#story-explanation{font-size:12px}}
@media(max-width:360px){.story-experience{--story-h:325px}.story-stages button{font-size:9px}.story-copy{min-height:195px}#story-caption{font-size:19px;min-height:54px}#story-explanation{font-size:12px}}
#story-caption{min-height:0}
#story-explanation{font-size:12px;margin-top:10px}
/* A frame is either the complete photo fallback or the complete digital bottle. */
.hero-art.digital-ready .bottle-float{display:none}
.object-lab.digital-ready .object-bottle{visibility:hidden}
.hero-art.digital-ready .hero-bottle-canvas,.object-lab.digital-ready .object-bottle-canvas{opacity:1;transition:none}