/* LIBATION shell — build width 1920; one root unit --u = 100vw/1920 keeps 1280-2560 proportional. */
:root{
  --u:calc(100vw / 1920);
  --paper:#2D071F; --ground-top:#430A24; --ground-mid:#3C0723; --nav:#3D0A23;
  --surface-1:#4A102D; --surface-card:#6B2A42; --surface-2:#641C3B;
  --bronze:#E1AA7C; --bronze-hi:#E8B286; --bronze-lo:#C88A57; --cobalt:#021A70; --cobalt-mid:#013790; --cobalt-bright:#176CFF;
  --cream:#F8E7CF; --text:#F4E9E5; --muted:#D0B8C1; --footer:#5D3548; --hairline:#8F4C69; --rose:#B9506B;
  --f-display:"Newsreader","Fraunces",Georgia,serif;
  --f-ui:"Barlow",system-ui,sans-serif;
  --f-num:"Source Sans 3","Barlow",system-ui,sans-serif;
  --f-chrome:"Barlow",system-ui,sans-serif;
  --f-brand:"Newsreader",Georgia,serif;
  /* type scale @1920 (never below 12px) */
  --fs-hero:max(12px,calc(53*var(--u))); --fs-title:max(12px,calc(48*var(--u))); --fs-section:max(12px,calc(46*var(--u)));
  --fs-num:max(12px,calc(30*var(--u))); --fs-body:max(12px,calc(16*var(--u))); --fs-label:max(12px,calc(16*var(--u))); --fs-small:max(12px,calc(14*var(--u)));
  /* page frame: 188 left / 186 right, container 1546 */
  --gut-l:calc(188*var(--u)); --gut-r:calc(186*var(--u));
  /* rule tokens: width + colour per rule kind (hairlines never < 1px) */
  --rule-card-w:max(1px,calc(2.1*var(--u))); --rule-card-c:#E7AC9A;
  --rule-rowsel-w:max(1px,calc(2.1*var(--u))); --rule-rowsel-c:#F5D5A9;
  --rule-chip-w:max(1px,calc(2*var(--u))); --rule-chip-c:#B06F86;
  --rule-panel-w:max(1px,calc(1.3*var(--u))); --rule-panel-c:rgba(201,125,163,.45);
  --rule-panelhi-w:max(1px,calc(1.8*var(--u))); --rule-panelhi-c:#C97DA3;
  --rule-inrow-w:max(1px,calc(1.3*var(--u))); --rule-inrow-c:#B66483;
  --rule-callout-w:max(1px,calc(2.2*var(--u))); --rule-callout-c:#BD876C;
  --rule-row-w:max(1px,calc(1.1*var(--u))); --rule-row-c:#8F4C69;
  --rule-nav-w:max(1px,calc(1.3*var(--u))); --rule-nav-c:rgba(237,171,151,.38);
  --rule-input-w:max(1px,calc(1.1*var(--u))); --rule-input-c:#8D4962;
  --rule-foot-w:max(1px,calc(1.1*var(--u))); --rule-foot-c:rgba(244,190,168,.45);
  /* motion: viscous, heavy liquid — no bounce */
  --ease-pour:cubic-bezier(.22,.68,.18,1); --ease-settle:cubic-bezier(.16,.84,.24,1); --d-fast:180ms; --d-mid:420ms; --d-slow:1200ms;
}
@media (max-width:1023px){
  :root{--u:calc(100vw / 820);--gut-l:16px;--gut-r:16px;
    --fs-hero:34px;--fs-title:30px;--fs-section:26px;--fs-num:24px;--fs-body:15px;--fs-label:14px;--fs-small:12px}
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
:where(button,input,select,textarea){border:0;font:inherit;color:inherit;background:none;margin:0}
:where(button){cursor:pointer}
body{margin:0;min-height:100vh;color:var(--text);font:400 var(--fs-body)/1.45 var(--f-ui);background-color:var(--paper);
  overflow-x:clip;position:relative;
  /* atmosphere: pool light + wine gradient repeat per 1080 screen, filigree on screen 1 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 560' fill='none' stroke='%23B9506B' stroke-opacity='.25' stroke-width='1.2'%3E%3Cpath d='M0 300C240 210 420 330 700 260S1180 120 1460 210 1780 330 1920 250'/%3E%3Cpath d='M0 360C260 280 460 380 760 320S1200 190 1500 270 1800 390 1920 320'/%3E%3Cpath d='M0 420C300 350 520 430 820 380S1240 270 1540 340 1840 440 1920 390'/%3E%3Cpath d='M120 120C360 170 520 60 760 110S1120 210 1400 120 1760 40 1920 90'/%3E%3C/svg%3E"),
    radial-gradient(calc(350*var(--u)) calc(210*var(--u)) at 50% calc(175*var(--u)),rgba(210,114,102,.35),rgba(210,114,102,0) 100%),
    linear-gradient(180deg,var(--ground-top) calc(130*var(--u)),var(--paper) calc(1000*var(--u)));
  background-repeat:no-repeat,repeat-y,repeat-y;
  background-size:100% calc(560*var(--u)),100% calc(1080*var(--u)),100% calc(1080*var(--u));
  background-position:0 calc(90*var(--u)),0 0,0 0;
}
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.atm-ledge{position:absolute;left:0;right:0;top:calc(850*var(--u));height:calc(200*var(--u));z-index:0;pointer-events:none;opacity:0;transition:opacity var(--d-mid) var(--ease-settle);
  background:linear-gradient(180deg,rgba(122,58,78,.55) 0,rgba(65,21,40,.7) 14%,rgba(65,21,40,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
body[data-route="home"] .atm-ledge,body[data-route="pour"] .atm-ledge{opacity:1}
a{color:inherit}

/* ---------- ONE PAGE FRAME ---------- */
.page{position:relative;z-index:1;display:block;min-height:calc(60*var(--u));padding:calc(36*var(--u)) var(--gut-r) calc(72*var(--u)) var(--gut-l);outline:0}
.bleed{margin-left:calc(-1*var(--gut-l));margin-right:calc(-1*var(--gut-r))}   /* background art plates only */
.container{width:100%}

/* ---------- NAV (chrome/nav.html, scaled) ---------- */
[data-chrome="nav"]{position:relative;z-index:20;width:100%;height:calc(104*var(--u));padding:calc(20*var(--u)) calc(24*var(--u)) 0;font-family:var(--f-chrome);color:#fff5ea;
  background:radial-gradient(circle at 52% 0,rgba(158,58,77,.34),transparent 44%),#34081f}
[data-chrome="nav"] .pill{height:calc(80*var(--u));border-radius:999px;background:linear-gradient(90deg,rgba(54,8,31,.96),rgba(98,18,55,.94));
  box-shadow:0 calc(16*var(--u)) calc(38*var(--u)) rgba(24,0,13,.34);display:flex;align-items:center;padding:0 calc(28*var(--u));gap:calc(24*var(--u))}
.brand-lock{display:flex;align-items:center;gap:calc(14*var(--u));margin-right:auto;text-decoration:none}
.brand-mark{display:block;height:calc(44*var(--u));width:auto;aspect-ratio:1974/2048;flex:none;min-height:36px}
[data-chrome="nav"] .brand{font-family:var(--f-brand);font-size:max(12px,calc(28*var(--u)));letter-spacing:.12em;color:#fff5ea}
.nav-desktop{display:flex;align-items:center;gap:calc(24*var(--u))}
[data-chrome="nav"] a{color:#f9e8df;text-decoration:none;font-size:max(12px,calc(15*var(--u)));white-space:nowrap;transition:color var(--d-fast) var(--ease-settle)}
[data-chrome="nav"] a:hover{color:#ffd4a9}
[data-chrome="nav"] a.is-active{color:#ffd4a9}
[data-chrome="nav"] .social{font-size:max(12px,calc(14*var(--u)))}
.soon{cursor:default}
.btn-bronze{font:600 max(12px,calc(15*var(--u))) var(--f-chrome);color:#431024;background:linear-gradient(180deg,var(--bronze-hi),var(--bronze-lo));border-radius:999px;
  padding:calc(14*var(--u)) calc(22*var(--u));min-height:max(36px,calc(44*var(--u)));box-shadow:0 calc(8*var(--u)) calc(20*var(--u)) rgba(0,0,0,.22);
  transition:transform var(--d-fast) var(--ease-settle),filter var(--d-fast) var(--ease-settle)}
.btn-bronze:hover{filter:brightness(1.06);transform:translateY(calc(-1*var(--u)))}
.btn-bronze:active{transform:translateY(0);filter:brightness(.96)}
.btn-bronze:focus-visible,.btn-tonal:focus-visible,[data-chrome] a:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--bronze-hi);outline-offset:2px}
.menu-btn,.nav-mobile{display:none}

/* ---------- FOOTER (chrome/footer.html) ---------- */
[data-chrome="footer"]{position:relative;z-index:1;height:calc(68*var(--u));min-height:52px;margin:0 calc(38*var(--u));padding:0 calc(18*var(--u));
  display:flex;align-items:center;justify-content:space-between;gap:calc(24*var(--u));color:#f7e9df;background:rgba(57,8,32,.82);font:max(12px,calc(15*var(--u))) var(--f-chrome);letter-spacing:.03em}
[data-chrome="footer"] a{color:inherit;text-decoration:none;margin-left:calc(28*var(--u))}
.foot-l{display:flex;align-items:center;gap:calc(12*var(--u))}
.foot-l .brand-mark{height:calc(40*var(--u));min-height:36px}
.foot-ca{color:var(--muted)}
body{padding-bottom:calc(0*var(--u))}

/* ---------- RULE CLASSES (the only place borders live) ---------- */
.rule-nav{border:var(--rule-nav-w) solid var(--rule-nav-c)}
[data-chrome="footer"]{border-top:var(--rule-foot-w) solid var(--rule-foot-c)}
.rule-card-selected{border:var(--rule-card-w) solid var(--rule-card-c);border-radius:calc(28*var(--u));box-shadow:0 0 calc(24*var(--u)) rgba(231,172,154,.28)}
.rule-row-selected{border:var(--rule-rowsel-w) solid var(--rule-rowsel-c);border-radius:calc(20*var(--u));box-shadow:inset 0 0 calc(14*var(--u)) rgba(245,213,169,.22)}
.rule-chip{border:var(--rule-chip-w) solid var(--rule-chip-c);border-radius:calc(20*var(--u))}
.rule-panel{border:var(--rule-panel-w) solid var(--rule-panel-c);border-radius:calc(28*var(--u))}
.rule-panel-hi{border:var(--rule-panelhi-w) solid var(--rule-panelhi-c);border-radius:calc(28*var(--u))}
.rule-input-row{border:var(--rule-inrow-w) solid var(--rule-inrow-c);border-radius:calc(20*var(--u))}
.rule-input-row + .rule-input-row{margin-top:calc(-1*var(--rule-inrow-w))} /* shared edge drawn once */
.rule-callout{border:var(--rule-callout-w) solid var(--rule-callout-c);border-radius:calc(20*var(--u))}
.rule-row{border-top:var(--rule-row-w) solid var(--rule-row-c)}
.rule-row-last{border-bottom:var(--rule-row-w) solid var(--rule-row-c)}
.rule-input{border:var(--rule-input-w) solid var(--rule-input-c);border-radius:999px;display:flex;align-items:center;padding:0 calc(20*var(--u));min-height:max(36px,calc(48*var(--u)));background:rgba(74,16,45,.6)}
.rule-input input{flex:1;min-width:0;width:100%;outline:0;height:100%}
.rule-input:focus-within{box-shadow:0 0 0 max(2px,calc(2*var(--u))) rgba(232,178,134,.55)}

/* ---------- SHARED COMPONENTS ---------- */
.card{background:rgba(100,28,59,.55);border-radius:calc(28*var(--u));box-shadow:inset 0 1px 0 rgba(255,220,200,.12),0 calc(12*var(--u)) calc(30*var(--u)) rgba(14,0,9,.34);padding:calc(28*var(--u))}
.btn-tonal{background:rgba(100,28,59,.7);color:var(--text);border-radius:999px;padding:calc(12*var(--u)) calc(22*var(--u));min-height:max(36px,calc(44*var(--u)));transition:background var(--d-fast) var(--ease-settle)}
.btn-tonal:hover{background:rgba(133,44,82,.8)}
.chip{display:inline-flex;align-items:center;min-height:max(32px,calc(40*var(--u)));padding:0 calc(18*var(--u));border-radius:999px;background:rgba(100,28,59,.6);transition:background var(--d-fast) var(--ease-settle),color var(--d-fast)}
.chip.is-selected,.chip[aria-pressed="true"]{background:linear-gradient(180deg,var(--bronze-hi),var(--bronze-lo));color:#431024}
.h-display{font-family:var(--f-display);font-weight:400;color:var(--cream);margin:0;line-height:1.1}
.h-hero{font-size:var(--fs-hero);letter-spacing:-.011em}
.h-title{font-size:var(--fs-title);font-weight:500;line-height:1.05;letter-spacing:.01em;text-transform:uppercase}
.h-section{font-size:var(--fs-section);font-weight:500}
.num{font-family:var(--f-num);font-weight:700;font-size:var(--fs-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.label{font:500 var(--fs-label)/1.3 var(--f-ui);color:var(--muted);letter-spacing:-.02em}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(32*var(--u))}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(24*var(--u))}
.pour-thread{height:max(2px,calc(3*var(--u)));border-radius:3px;background:linear-gradient(90deg,var(--cobalt-bright),var(--bronze-lo));box-shadow:0 0 calc(6*var(--u)) rgba(23,108,255,.45)}
.art{display:block;max-width:100%;height:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- MOTION: heavy-liquid / ceramic. Pour-line sweep on route change, meniscus rise on reveal ---------- */
.pour-line{position:fixed;left:0;top:0;height:max(2px,calc(3*var(--u)));width:100%;z-index:90;pointer-events:none;transform:scaleX(0);transform-origin:0 50%;opacity:0;
  background:linear-gradient(90deg,var(--cobalt-bright),var(--bronze-lo));box-shadow:0 0 calc(10*var(--u)) rgba(23,108,255,.5)}
.pour-line.is-run{animation:pourline 900ms var(--ease-pour) both}
@keyframes pourline{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
main.is-leaving{opacity:0;transform:translateY(calc(10*var(--u)));transition:opacity 200ms ease-in,transform 200ms ease-in}
main.is-entering{animation:settle 520ms var(--ease-settle) both}
@keyframes settle{from{opacity:0;transform:translateY(calc(14*var(--u)))}to{opacity:1;transform:none}}
[data-rise]{opacity:0;transform:translateY(calc(18*var(--u))) scale(.992);transition:opacity 700ms var(--ease-settle),transform 900ms var(--ease-pour);transition-delay:var(--rise-d,0ms)}
[data-rise].is-in{opacity:1;transform:none}
[data-fill]{transform:scaleY(.001);transform-origin:50% 100%;transition:transform var(--d-slow) var(--ease-pour);transition-delay:var(--rise-d,0ms)}
[data-fill="x"]{transform:scaleX(.001);transform-origin:0 50%}
[data-fill].is-in{transform:none}
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,226,196,.22) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 6s var(--ease-settle) infinite;pointer-events:none}
@keyframes sheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.is-ticked{animation:tick 700ms var(--ease-settle)}
@keyframes tick{0%{filter:brightness(1.35)}100%{filter:none}}
[data-loop-video]{display:block;max-width:100%;height:auto}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-rise],[data-fill]{opacity:1!important;transform:none!important}
  .pour-line{display:none}
}

/* ---------- MOBILE (<1024) ---------- */
@media (max-width:1023px){
  [data-chrome="nav"]{height:auto;padding:12px 12px 8px}
  [data-chrome="nav"] .pill{height:64px;padding:0 14px;gap:12px}
  .brand-mark{height:40px;min-height:36px}
  [data-chrome="nav"] .brand{font-size:18px}
  .nav-desktop,[data-chrome="nav"] .pill>.social{display:none}
  .pill .btn-bronze{padding:8px 12px;min-height:36px;font-size:13px}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:6px;width:40px;height:40px;padding:0 9px;border-radius:50%;background:rgba(100,28,59,.6)}
  .menu-btn span{display:block;height:2px;background:#f9e8df;border-radius:2px;transition:transform var(--d-fast) var(--ease-settle)}
  [data-chrome="nav"].is-open .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
  [data-chrome="nav"].is-open .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav-mobile{display:none;flex-direction:column;gap:4px;margin-top:8px;padding:12px;border-radius:20px;background:rgba(54,8,31,.96)}
  [data-chrome="nav"].is-open .nav-mobile{display:flex}
  .nav-mobile a{font-size:16px;padding:10px 8px}
  .drawer-soc{display:flex;gap:16px;padding-top:4px}
  [data-chrome="footer"]{margin:0 12px;height:auto;min-height:64px;padding:12px;flex-wrap:wrap}
  .foot-r a:first-child{margin-left:0}
  .grid-2{grid-template-columns:1fr}
  .page{padding-top:24px;padding-bottom:48px}
}