/* Perdeberg wine experience. Colours from the brand guide: charcoal #3b3c43, red #cc0935, gold #c09b57, greys #b1b2b4 / #e9eae8 */
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#0c0c0f; --char:#3b3c43; --char2:#1b1b20; --red:#cc0935; --gold:#c09b57; --gold-hi:#e6cf9c;
  --grey:#b1b2b4; --paper:#e9eae8;
  --serif:"Bodoni Moda","Bodoni MT",Didot,"Times New Roman",serif;
  --sans:"Jost","Avenir Next",Avenir,"Century Gothic",system-ui,sans-serif;
  --u:calc(var(--h,100vh)/100);            /* 1% of the app height: everything scales to fit one screen */
  --pad:clamp(18px,6vw,30px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#050506;color:var(--paper);font-family:var(--sans);font-weight:300;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.stage{position:fixed;inset:0;display:grid;place-items:center}
.app{position:relative;width:100%;height:100%;overflow:hidden;background:var(--ink);container-type:size}
@media (min-width:700px) and (pointer:fine){
  .app{width:min(430px,100vw);height:min(100vh,900px);border-radius:26px;box-shadow:0 0 0 1px rgba(192,155,87,.25),0 40px 120px rgba(0,0,0,.8)}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:520px){
  .stage::after{content:"Please turn your phone upright";position:fixed;inset:0;display:grid;place-items:center;background:var(--ink);font-family:var(--serif);font-size:20px;letter-spacing:.04em;z-index:99}
}

/* screens */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s .55s,transform .55s cubic-bezier(.2,.7,.2,1);
  padding:calc(env(safe-area-inset-top) + 2.2cqh) var(--pad) calc(env(safe-area-inset-bottom) + 3cqh);
  background:radial-gradient(120% 70% at 50% 38%,#2a2a31 0%,#17171b 45%,var(--ink) 100%)}
.screen.on{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s,transform .55s cubic-bezier(.2,.7,.2,1)}
.panel{transform:translateY(3cqh)} .panel.on{transform:none}
.frame{position:absolute;inset:calc(env(safe-area-inset-top) + 9px) 9px calc(env(safe-area-inset-bottom) + 9px);border:1px solid rgba(192,155,87,.32);pointer-events:none}
.frame::before,.frame::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--gold);transform:rotate(45deg);background:var(--ink)}
.frame::before{top:-5px;left:calc(50% - 5px)} .frame::after{bottom:-5px;left:calc(50% - 5px)}
.rule{width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:2.4cqh auto}

/* buttons */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:clamp(46px,6.6cqh,56px);padding:0 22px;
  font-family:var(--sans);font-weight:400;font-size:clamp(12px,1.75cqh,14px);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;transition:transform .15s,background .25s,color .25s;overflow:hidden}
.btn:active{transform:scale(.975)}
.btn svg{width:20px;height:20px;flex:none}
.btn-gold{color:#17140d;background:linear-gradient(100deg,#a8854a 0%,var(--gold) 30%,var(--gold-hi) 50%,var(--gold) 70%,#a8854a 100%);background-size:220% 100%;background-position:50% 0;box-shadow:0 10px 30px -12px rgba(192,155,87,.55)}
.btn-gold::after{content:"";position:absolute;inset:3px;border:1px solid rgba(23,20,13,.35);pointer-events:none}
.btn-gold:active{background-position:0 0}
.btn-line{border:1px solid rgba(192,155,87,.6);color:var(--gold-hi)}
.btn-line:active{background:rgba(192,155,87,.14)}
svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.play path{fill:currentColor;stroke:none}
.ico{width:44px;height:44px;display:grid;place-items:center;color:var(--gold);border-radius:50%;flex:none}
.ico svg{width:23px;height:23px} .ico:active{background:rgba(192,155,87,.15)} .ghost{visibility:hidden}
.s-off{display:none} .muted .s-on{display:none} .muted .s-off{display:block}
.link{font-size:clamp(11px,1.6cqh,13px);letter-spacing:.22em;text-transform:uppercase;color:var(--paper);padding:14px 4px;font-weight:400;position:relative}
.link::after{content:"";position:absolute;left:4px;right:calc(4px + .22em);bottom:9px;height:1px;background:var(--gold);transform:scaleX(.0);transition:transform .3s}
.link:active{color:var(--gold-hi)} .link:active::after{transform:scaleX(1)}

/* gate */
#gate{justify-content:center}
.gate-in{width:100%;max-width:300px;text-align:center;display:flex;flex-direction:column;align-items:center}
.gate-logo{width:min(58%,26cqh);height:auto}
.gate-q{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.6cqh,21px);margin-bottom:3.4cqh;color:var(--paper)}
.fine{margin-top:3cqh;font-size:11px;line-height:1.7;letter-spacing:.08em;color:var(--grey)}

/* intro */
#intro{background:#000;padding:0} #introVid{width:100%;height:100%;object-fit:cover}
.skip{position:absolute;right:20px;bottom:calc(env(safe-area-inset-bottom) + 22px);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,234,232,.55);padding:12px}

/* home */
.top{width:100%;display:flex;align-items:center;justify-content:space-between;flex:none;margin-top:.6cqh}
.crest{height:clamp(40px,7.4cqh,62px);width:auto}
.range{height:clamp(22px,4.3cqh,36px);width:auto;margin-top:1.3cqh;flex:none}
.bottle-wrap{position:relative;flex:1 1 0;min-height:0;width:100%;display:flex;justify-content:center;margin:1.6cqh 0 1cqh}
.bottle{position:relative;height:100%;aspect-ratio:408/1400;z-index:1;filter:drop-shadow(0 18px 22px rgba(0,0,0,.55));animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
.bottle img{height:100%;width:100%}
.sheen{position:absolute;inset:0;-webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat;
  background:linear-gradient(100deg,transparent 42%,rgba(255,238,200,.0) 44%,rgba(255,238,200,.42) 50%,rgba(255,238,200,0) 56%,transparent 58%);background-size:400% 100%;background-position:var(--sx,120%) 0;mix-blend-mode:screen;pointer-events:none}
.sheen.idle{animation:sheen 7s ease-in-out 1.6s infinite}
@keyframes sheen{0%,55%{background-position:120% 0}85%,100%{background-position:-20% 0}}
@keyframes rise{from{opacity:0;transform:translateY(2.5cqh)}to{opacity:1;transform:none}}
.glow{position:absolute;left:50%;top:46%;width:130%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(192,155,87,.20),rgba(192,155,87,.07) 45%,transparent 70%);pointer-events:none}
.floor{position:absolute;left:50%;bottom:-1.2cqh;width:46%;height:3.2cqh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(3px)}
.title{text-align:center;flex:none}
h1{font-family:var(--serif);font-weight:400;font-size:min(clamp(25px,4.6cqh,38px),7.6cqw);letter-spacing:.24em;margin-right:-.24em;white-space:nowrap;text-transform:uppercase;line-height:1.15;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-hi) 50%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-family:var(--serif);font-style:italic;font-size:clamp(14px,2.2cqh,18px);letter-spacing:.03em;margin-top:.7cqh;color:var(--paper)}
.menu{width:100%;max-width:340px;flex:none;margin-top:2.4cqh}
.menu-row{display:flex;align-items:center;justify-content:space-between;margin-top:1.2cqh;padding:0 2px}
.menu-row i{width:3px;height:3px;background:var(--gold);transform:rotate(45deg);flex:none}

/* panels */
.ptop{width:100%;display:flex;align-items:center;justify-content:space-between;flex:none;margin-top:.6cqh}
.ptitle{text-align:center;display:flex;flex-direction:column;gap:3px}
.ptitle small{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.ptitle b{font-family:var(--serif);font-weight:400;font-size:clamp(20px,3.2cqh,26px);letter-spacing:.2em;margin-right:-.2em;text-transform:uppercase}
.tabs{display:flex;width:100%;justify-content:space-between;margin-top:2.2cqh;border-bottom:1px solid rgba(192,155,87,.25);flex:none}
.tab{flex:1 1 auto;padding:12px 0 11px;font-size:clamp(9.5px,2.75cqw,11.5px);letter-spacing:.12em;text-transform:uppercase;color:var(--grey);position:relative;font-weight:400;white-space:nowrap}
.tab.on{color:var(--gold-hi)} .tab.on::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:1px;background:var(--gold-hi)}
.pbody{flex:1 1 0;min-height:0;width:100%;overflow:hidden auto;scrollbar-width:none;padding:2.6cqh 4px 1cqh;display:flex;flex-direction:column;justify-content:center}
.pbody::-webkit-scrollbar{display:none}
.pane{animation:fade .45s ease both} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pane h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(19px,3cqh,24px);text-align:center;margin-bottom:2.2cqh;color:var(--paper)}
.pane p{font-size:clamp(13.5px,2.05cqh,16px);line-height:1.62;color:#d6d7d6;margin-bottom:1.5cqh;text-align:center;text-wrap:pretty}
.rows{width:100%}
.row{display:flex;justify-content:space-between;gap:18px;padding:clamp(7px,1.35cqh,12px) 0;border-bottom:1px solid rgba(233,234,232,.09);font-size:clamp(13px,1.95cqh,15.5px);line-height:1.45}
.row:last-child{border-bottom:0}
.row dt{font-size:.74em;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);flex:0 0 34%;padding-top:.28em;font-weight:400}
.row dd{flex:1;text-align:right;color:var(--paper)}
.rows.long .row{flex-direction:column;gap:5px;text-align:center;align-items:center} .rows.long dd{text-align:center} .rows.long dt{flex:none}
.big .row{flex-direction:column;align-items:center;gap:4px;border:0;padding:1.5cqh 0} .big dd{font-family:var(--serif);font-size:clamp(24px,4cqh,32px);text-align:center} .big dt{flex:none}
.pfoot{width:100%;max-width:340px;display:flex;gap:10px;flex:none;margin-top:1.2cqh}
.pfoot .btn{letter-spacing:.16em;padding:0 10px;font-size:clamp(10.5px,1.5cqh,12px)} .pfoot .btn svg{width:17px;height:17px}

/* about */
.about-in{align-items:center;text-align:center}
.about-logo{width:min(46%,21cqh)}
.lead{font-family:var(--serif);font-style:italic;font-size:clamp(21px,3.4cqh,27px);color:var(--gold-hi);margin-bottom:1.8cqh}
.about-in p:not(.lead){font-size:clamp(13.5px,2.05cqh,16px);line-height:1.65;color:#d6d7d6;margin-bottom:1.4cqh;max-width:31ch;text-wrap:balance}
.facts{display:flex;justify-content:center;gap:0;margin-top:2cqh;width:100%}
.facts div{flex:1;padding:0 8px;border-left:1px solid rgba(192,155,87,.3)} .facts div:first-child{border:0}
.facts b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(18px,2.9cqh,23px)} .facts small{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

/* contact */
.contact-in{align-items:center;text-align:center;gap:0}
.c-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:clamp(8px,1.5cqh,13px) 0;width:100%;border-bottom:1px solid rgba(233,234,232,.09)}
.c-item small{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.c-item span,.c-item a{font-size:clamp(14px,2.15cqh,17px);line-height:1.5;color:var(--paper)}
.c-item a.big{font-family:var(--serif);font-size:clamp(19px,3cqh,24px);letter-spacing:.04em}
.social{display:flex;gap:18px;justify-content:center;padding-top:2.2cqh}
.social a{width:52px;height:52px;border:1px solid rgba(192,155,87,.6);border-radius:50%;display:grid;place-items:center;color:var(--gold-hi)}
.social svg{width:22px;height:22px} .social a:active{background:rgba(192,155,87,.15)}

/* winemaker scene */
#winemaker{padding:0;background:#0b0b0e} #sceneCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.chip{background:rgba(12,12,15,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(192,155,87,.4);color:var(--gold-hi);z-index:3}
.chip.off{color:rgba(233,234,232,.4);border-color:rgba(233,234,232,.2)}
.close{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:14px;z-index:5}
.scene-bar{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 2.6cqh);display:flex;justify-content:center;gap:14px;z-index:3}
.scene-cap{position:absolute;left:7%;right:7%;bottom:calc(env(safe-area-inset-bottom) + 2.6cqh + 62px);text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.7cqh,22px);line-height:1.35;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 22px rgba(0,0,0,.9);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:none;z-index:2;text-wrap:balance}
.scene-cap.show{opacity:1;transform:none}
.scene-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--ink);z-index:2;transition:opacity .6s,visibility 0s .6s}
.scene-load.gone{opacity:0;visibility:hidden} .scene-load img{height:64px;width:auto;animation:pulse 1.8s ease-in-out infinite}
.scene-load small{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)} @keyframes pulse{50%{opacity:.45}}
.scene-hint{position:absolute;top:calc(env(safe-area-inset-top) + 20px);left:0;right:0;display:flex;justify-content:center;pointer-events:none;z-index:2;transition:opacity .6s}
.scene-hint span{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);background:rgba(12,12,15,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:9px 16px;border:1px solid rgba(192,155,87,.35)}
.scene-hint.gone{opacity:0}
.scene-end{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,8,10,.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s;z-index:4;padding:var(--pad)}
.scene-end.show{opacity:1;visibility:visible;transition:opacity .6s}
.end-card{width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.end-card img{height:clamp(46px,8cqh,64px);width:auto;margin-bottom:6px}
.end-card small{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.end-card b{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3.6cqh,28px);letter-spacing:.22em;margin-right:-.22em;text-transform:uppercase}
.end-card i{font-family:var(--serif);font-size:clamp(14px,2.1cqh,17px)} .end-card .rule{margin:1.4cqh auto}

.toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 11cqh);transform:translate(-50%,10px);background:rgba(233,234,232,.95);color:#17171b;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;opacity:0;transition:.3s;pointer-events:none;z-index:9;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.sheen.idle,.bottle{animation:none}}