/* ReVerb Distilling: V5 design system (R1).
   Loads after site.css and v4.css on every page.
   - The SHELL (header .rvh, menu .rvm, footer .rvf, consent banner .rvc) applies to every page.
   - Everything else is scoped to  body.v5  so pages that have not been rebuilt yet keep their approved look. Each stage adds class "v5" to the pages it rebuilds.
   Tokens that were approved and frozen (colors, fonts, --pad, --maxw, --ease) live in site.css; this file adds the scales on top of them.
   Docs: docs/R1-DESIGN-PLAN.md */

/* ================================================================== tokens */
:root{
  --hdrh:72px;
  /* type scale (px at desktop, fluid down to a phone). Display: Cormorant Garamond. Text: Inter Tight. */
  --fs-12:12px;
  --fs-13:13px;
  --fs-16:16px;
  --fs-18:clamp(17px,.2vw + 16px,18px);
  --fs-22:clamp(19px,.5vw + 16px,22px);
  --fs-28:clamp(23px,.9vw + 18px,28px);
  --fs-36:clamp(28px,1.5vw + 22px,36px);
  --fs-52:clamp(36px,2.8vw + 22px,52px);
  --fs-76:clamp(46px,4.4vw + 16px,76px);
  --fs-112:clamp(56px,7.5vw + 12px,112px);
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:176px;
  /* the three section paddings */
  --sec-compact:clamp(64px,7vw,96px);
  --sec-standard:clamp(88px,10vw,144px);
  --sec-generous:clamp(104px,13vw,208px);
  /* motion tokens: 150 ms for a state change, 300 ms for hover and reveal, 600 ms for a panel, 2.2 s for the label lines arriving. One easing (--ease), no bounce. */
  --m-fast:150ms; --m-base:300ms; --m-slow:600ms; --m-arrive:2200ms;
  /* two rooms: the Barrel Room (ink) and the Tasting Room (cream) */
  --ink-2:#0b1a2e; --ink-3:#050b14;
  --muted-on-ink:#aab3c0; --muted-on-cream:#4a5160;
  --rule-on-cream:rgba(12,35,64,.18);
}
@media (prefers-reduced-motion:reduce){:root{--m-fast:0ms;--m-base:0ms;--m-slow:0ms}}

/* ================================================================== shared bits used by the shell and by v5 pages */
.skip{position:fixed;left:12px;top:-64px;z-index:500;padding:12px 18px;background:var(--gold-lt);color:var(--ink);font-size:var(--fs-13);font-weight:600;letter-spacing:.02em;transition:top var(--m-base) var(--ease)}
.skip:focus{top:12px}
.num{font-variant-numeric:lining-nums tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* buttons: two sizes (default 48 px, .sm 40 px), sentence case. Used by the shell on every page and by body.v5 pages. */
.rvh .btn,.rvm .btn,.rvf .btn,.rvc .btn,.v5 .btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border:1px solid var(--gold-lt);border-radius:0;
  font:500 var(--fs-16)/1 var(--sans);letter-spacing:.01em;text-transform:none;color:var(--cream);background:transparent;overflow:visible;isolation:auto;cursor:pointer;
  transition:background var(--m-base) var(--ease),color var(--m-base) var(--ease),border-color var(--m-base) var(--ease)}
.rvh .btn::before,.rvm .btn::before,.rvf .btn::before,.rvc .btn::before,.v5 .btn::before{content:none}
.rvh .btn.sm,.rvm .btn.sm,.rvf .btn.sm,.rvc .btn.sm,.v5 .btn.sm{min-height:40px;padding:0 18px;font-size:15px}
.rvh .btn:hover,.rvm .btn:hover,.rvf .btn:hover,.rvc .btn:hover,.v5 .btn:hover{background:var(--gold-lt);color:var(--ink)}
.rvh .btn.gold,.rvm .btn.gold,.rvf .btn.gold,.rvc .btn.gold,.v5 .btn.gold{background:var(--gold-lt);color:var(--ink)}
.rvh .btn.gold:hover,.rvm .btn.gold:hover,.rvf .btn.gold:hover,.rvc .btn.gold:hover,.v5 .btn.gold:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.v5 .btn.navy{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.v5 .btn.navy:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.v5 .btn.ghost-navy{border-color:var(--navy);color:var(--navy)}
.v5 .btn.ghost-navy:hover{background:var(--navy);color:var(--cream)}
.v5 .btn{min-height:52px}
/* text link: an underlined phrase, no arrow, no capitals */
.tlink{display:inline-block;padding-block:12px;margin-block:-12px;font:500 var(--fs-16)/1.3 var(--sans);letter-spacing:.01em;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:currentColor;transition:color var(--m-base) var(--ease),text-decoration-color var(--m-base) var(--ease)}
.tlink:hover{color:var(--gold-lt)}
.room-cream .tlink:hover{color:var(--gold-ink)}
.rvh a:focus-visible,.rvh button:focus-visible,.rvm a:focus-visible,.rvm button:focus-visible,.rvf a:focus-visible,.rvf button:focus-visible,.rvc button:focus-visible,.v5 a:focus-visible,.v5 button:focus-visible,.v5 input:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
.room-cream a:focus-visible,.room-cream button:focus-visible,.room-cream input:focus-visible{outline-color:var(--navy)}

/* ================================================================== SHELL: header */
.rvh{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hdrh);border-bottom:1px solid transparent;transition:background var(--m-slow) var(--ease),border-color var(--m-slow) var(--ease),backdrop-filter var(--m-slow) var(--ease)}
.rvh.solid{background:rgba(7,15,27,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(208,187,111,.18)}
.rvh-bar{display:flex;align-items:center;gap:clamp(24px,3.4vw,56px);height:100%;max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.rvh-logo{display:block;flex:none;line-height:0}
.rvh-logo img{height:36px;width:auto}
.rvh-nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px)}
.rvh-nav a,.rvh-find{position:relative;font:500 15px/1 var(--sans);letter-spacing:.01em;color:rgba(244,237,225,.88);padding:8px 0;transition:color var(--m-base) var(--ease)}
.rvh-nav a::after,.rvh-find::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--gold-lt);transform:scaleX(0);transform-origin:left;transition:transform var(--m-base) var(--ease)}
.rvh-nav a:hover,.rvh-find:hover,.rvh-nav a[aria-current="page"]{color:var(--cream)}
.rvh-nav a:hover::after,.rvh-find:hover::after,.rvh-nav a[aria-current="page"]::after{transform:scaleX(1)}
/* Barrel Room, top right: gold, with a three-bar sound-wave mark. The bars move for a few seconds the first time a visit shows the header (assets/site.js adds .play), then rest still. */
.rvh-room{position:relative;display:inline-flex;align-items:center;gap:10px;padding:8px 0;font:500 15px/1 var(--sans);letter-spacing:.01em;color:var(--gold-lt);transition:color var(--m-base) var(--ease)}
.rvh-room:hover,.rvh-room:focus-visible{color:var(--cream)}
.rvh-room::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--gold-lt);transform:scaleX(0);transform-origin:left;transition:transform var(--m-base) var(--ease)}
.rvh-room:hover::after,.rvh-room[aria-current="page"]::after{transform:scaleX(1)}
.room-eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:15px}
.room-eq i{display:block;width:2px;height:100%;background:currentColor;border-radius:1px;transform-origin:50% 100%}
.room-eq i:nth-child(1){transform:scaleY(.42)}
.room-eq i:nth-child(2){transform:scaleY(.95)}
.room-eq i:nth-child(3){transform:scaleY(.62)}
@keyframes room-eq-a{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}
@keyframes room-eq-b{0%,100%{transform:scaleY(.95)}50%{transform:scaleY(.38)}}
@keyframes room-eq-c{0%,100%{transform:scaleY(.62)}50%{transform:scaleY(1)}}
.rvh-room.play .room-eq i:nth-child(1){animation:room-eq-a 1.5s var(--ease) 4}
.rvh-room.play .room-eq i:nth-child(2){animation:room-eq-b 1.5s var(--ease) .18s 4}
.rvh-room.play .room-eq i:nth-child(3){animation:room-eq-c 1.5s var(--ease) .34s 4}
.rvh-tools{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);margin-left:auto}
.rvh-cart{position:relative;display:grid;place-items:center;width:44px;height:44px;color:var(--cream);transition:color var(--m-base) var(--ease)}
.rvh-cart:hover{color:var(--gold-lt)}
.rvh-cart svg{width:24px;height:24px;display:block}
.rvh-count{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold-lt);color:var(--ink);font:600 11px/18px var(--sans);text-align:center;font-variant-numeric:tabular-nums}
.rvh-burger{display:none;position:relative;width:44px;height:44px;border:1px solid rgba(244,237,225,.35);border-radius:50%;place-items:center;cursor:pointer;color:var(--cream)}
.rvh-burger span{display:block;width:16px;height:1px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
@media (max-width:960px){
  :root{--hdrh:64px}
  .rvh-nav,.rvh-find{display:none}
  .rvh-burger{display:grid}
  .rvh-logo img{height:30px}
  .rvh-tools{gap:6px}
}
@media (max-width:1100px){.rvh-nav{gap:clamp(16px,2vw,28px)}.rvh-bar{gap:clamp(16px,2.4vw,40px)}}
/* small phones: the bar shows only the Barrel Room mark (a 44 px target); the words stay for screen readers and in the menu */
@media (max-width:560px){
  .rvh-bar{gap:12px}
  .rvh-tools{gap:2px}
  .rvh-room{width:44px;height:44px;padding:0;justify-content:center}
  .rvh-room .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .rvh-room::after{display:none}
  .rvh .btn.sm.rvh-shop{padding:0 14px;font-size:14px}
}
@media (max-width:380px){.rvh-shop{padding:0 12px;font-size:14px}}

/* ================================================================== SHELL: full-screen menu */
.rvm{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hdrh) + 24px) var(--pad) 32px;background:var(--ink);color:var(--cream);overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity var(--m-base) var(--ease),visibility 0s linear var(--m-base)}
.rvm.open{opacity:1;visibility:visible;transition:opacity var(--m-base) var(--ease),visibility 0s}
.rvm .x{position:absolute;top:10px;right:var(--pad);width:44px;height:44px;border:1px solid rgba(244,237,225,.35);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--cream)}
.rvm .x svg{width:16px;height:16px}
.rvm-main{display:grid;gap:4px}
.rvm-main a{font:400 clamp(40px,11vw,64px)/1.1 var(--serif);letter-spacing:-.01em;color:var(--cream)}
.rvm-main a[aria-current="page"]{font-style:italic;color:var(--gold-lt)}
.rvm-main a.rvm-room{display:inline-flex;align-items:center;gap:16px;color:var(--gold-lt)}
.rvm-main a.rvm-room .room-eq{height:.62em;gap:4px}
.rvm-main a.rvm-room .room-eq i{width:3px}
.rvm-more{display:grid;gap:12px;margin-top:32px}
.rvm-more a{font:500 var(--fs-16)/1.3 var(--sans);color:var(--muted-on-ink)}
.rvm-more a:hover{color:var(--cream)}
.rvm .btn{margin-top:32px;width:100%}

/* ================================================================== SHELL: footer */
.rvf{background:var(--ink-3);color:var(--cream);border-top:1px solid rgba(208,187,111,.18);padding:var(--sec-compact) 0 28px}
.rvf-wrap{max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.rvf-top{display:grid;grid-template-columns:1.3fr .8fr .9fr 1.4fr;gap:clamp(28px,4vw,64px)}
.rvf-brand img{height:52px;width:auto;margin-bottom:18px}
.rvf-brand p{font-size:15px;line-height:1.6;color:var(--muted-on-ink);max-width:28ch}
.rvf-badge{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:var(--fs-13);line-height:1.4;color:var(--muted-on-ink)}
.rvf-badge img{height:56px;width:56px}
.rvf .rvf-top h2{font:600 var(--fs-13)/1.2 var(--sans);letter-spacing:.02em;color:var(--gold-lt);margin-bottom:16px;text-wrap:initial}
.rvf ul{list-style:none;display:grid;gap:10px;font-size:15px}
.rvf ul a,.rvf ul button{color:#c4cbd6;transition:color var(--m-base) var(--ease);text-align:left;font:inherit}
.rvf ul a:hover,.rvf ul button:hover{color:var(--cream)}
.rvf-news p{font-size:15px;line-height:1.6;color:var(--muted-on-ink);margin-bottom:12px;max-width:36ch}
.rvf-form{display:block;max-width:400px}
.rvf-row{display:flex;border-bottom:1px solid rgba(244,237,225,.4)}
.rvf-form input[type=email]{flex:1;min-width:0;background:transparent;border:0;padding:12px 0;color:var(--cream);font-size:16px;outline:none}
.rvf-form input[type=email]::placeholder{color:#7f8a9c}
.rvf-row:focus-within{border-color:var(--gold-lt)}
.rvf-form button{padding:0 4px 0 16px;font:500 15px/1 var(--sans);color:var(--gold-lt);cursor:pointer}
.rvf-form button:hover{color:var(--cream)}
.rvf-consent{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font:400 11px/1.45 var(--sans);color:#9aa5b6;max-width:48ch}
.rvf-consent input{margin-top:2px;flex:0 0 auto}.rvf-consent a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:2px}
.rvf .form-msg{min-height:22px;margin-top:8px;font:italic 400 18px/1.3 var(--serif);color:var(--gold-lt);text-align:left}
.rvf .form-msg.err{color:#f0a3a3}
.rvf-legal{margin-top:clamp(40px,6vw,72px);padding-top:24px;border-top:1px solid rgba(208,187,111,.18);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;font-size:var(--fs-13);color:#8693a6}
.rvf-legal a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.rvf-legal a:hover{color:var(--cream)}
/* on the Home page the newsletter is its own moment just above, so the footer does not repeat it */
body[data-page="home"] .rvf-news{display:none}
body[data-page="home"] .rvf-top{grid-template-columns:1.3fr .8fr .9fr}
@media (max-width:980px){.rvf-top,body[data-page="home"] .rvf-top{grid-template-columns:1fr 1fr}.rvf-news{grid-column:1/-1}}
@media (max-width:560px){.rvf-top,body[data-page="home"] .rvf-top{grid-template-columns:1fr}}

/* ================================================================== SHELL: consent banner (only built when analytics.needsBanner()) */
.rvc{position:fixed;left:var(--pad);right:var(--pad);bottom:16px;z-index:140;max-width:640px;display:grid;gap:14px;padding:20px 22px;background:var(--ink);color:var(--cream);border:1px solid rgba(208,187,111,.4)}
.rvc p{font-size:15px;line-height:1.55;color:#d5dae2}
.rvc a{text-decoration:underline;text-underline-offset:.2em}
.rvc-acts{display:flex;gap:12px;flex-wrap:wrap}
.rvc[hidden]{display:none}

/* ================================================================== body.v5: base */
.v5{background:var(--ink);color:var(--cream);font-size:var(--fs-16);line-height:1.65}
.v5 main{display:block}
.v5 main h1,.v5 main h2,.v5 main h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;text-wrap:balance}
.v5 .wrap{max-width:calc(var(--maxw) + 2*var(--pad))}
/* the two rooms */
.room-ink{background:var(--ink);color:var(--cream)}
.room-ink-2{background:var(--ink-2);color:var(--cream)}
.room-navy{background:var(--navy);color:var(--cream)}
.room-cream{background:var(--cream);color:var(--navy)}
.room-parchment{background:var(--parchment);color:var(--navy)}
.pad-compact{padding-block:var(--sec-compact)}
.pad-standard{padding-block:var(--sec-standard)}
.pad-generous{padding-block:var(--sec-generous)}
.v5 .lede{font-size:clamp(18px,.3vw + 17px,20px);line-height:1.72;max-width:52ch;color:var(--muted-on-ink)}
.room-cream .lede,.room-parchment .lede{color:var(--muted-on-cream)}
.v5 .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.v5 .sec-head h2{font-size:clamp(40px,3.2vw + 24px,64px);line-height:1}
/* underlined fields (no boxes) */
.v5 .field{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(244,237,225,.4);padding:14px 2px;color:var(--cream);font-size:var(--fs-16);outline:none;transition:border-color var(--m-base) var(--ease)}
.v5 .field:focus{border-color:var(--gold-lt)}
.v5 .field::placeholder{color:#8a95a8}
.v5 .form-msg{min-height:24px;margin-top:10px;font:italic 400 19px/1.3 var(--serif);color:var(--gold-lt);text-align:left}
.v5 .form-msg.err{color:#f0a3a3}
/* three hero patterns. 1) .hero-home: full-bleed photograph, copy over the dark wall (the Home page, below). 2) .hero-image: text beside a photograph. 3) .hero-text: type only. */
.hero-image{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:min(78svh,760px);padding-top:var(--hdrh)}
.hero-image .hi-copy{display:flex;flex-direction:column;justify-content:center;gap:var(--s5);padding:var(--sec-compact) var(--pad)}
.hero-image .hi-pic{position:relative;overflow:hidden}
.hero-image .hi-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-text{padding:calc(var(--hdrh) + var(--sec-standard)) 0 var(--sec-standard)}
.hero-text h1{font-size:var(--fs-112);line-height:.94;max-width:14ch}
@media (max-width:860px){.hero-image{grid-template-columns:1fr}.hero-image .hi-pic{aspect-ratio:4/3}}
/* cards (named .tile: #gate already owns .card) */
.v5 .tile{display:flex;flex-direction:column;background:var(--parchment);color:var(--navy)}
.v5 .tile .ph{display:block;overflow:hidden;aspect-ratio:4/5;background:#e8e3d9}
.v5 .tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--m-slow) var(--ease)}
.v5 .tile:hover .ph img{transform:scale(1.025)}
/* the label-waveform motif: the thin zig-zag divider (assets/rv-motion.js, .wv-div, styled in v4.css) is the only recurring graphic */
.v5 .wv-div{margin:-20px 0;height:40px}
.v5 .wv-div path{stroke:var(--gold-lt)}
/* one reveal per section: opacity only, and only when the page script is running */
.reveal-on [data-reveal]{transition:opacity .9s var(--ease)}
.reveal-on [data-reveal]:not(.in){opacity:0}
.reveal-on [data-reveal].in-done{opacity:1;transition:none}
@media print{.reveal-on [data-reveal]{opacity:1!important}}
@media (prefers-reduced-motion:reduce){.reveal-on [data-reveal]:not(.in){opacity:1}}

/* ================================================================== HOME 1: hero (Barrel Room, ink) */
/* The hero fits the screen. Its height is the screen's height; the photograph (the "stage", always 3:2) is as large as it can be while the headline block still fits on the dark wall above the bottles
   and a slim caption band (--cap) stays free below them. On a short window the stage gets smaller than the window and its edges fade into the ink, so nothing is ever cut off at the fold, the copy never
   touches a bottle, and every bottle is always fully visible: nothing is ever dimmed or laid over a bottle (Hector, 2026-10-26). */
.hero-home{
  --H:max(100vh,600px);
  --fs:clamp(40px,min(calc(4.4vw + 16px),8.4vh),76px);                                   /* headline size: shrinks on a short window */
  --zone:calc(240px + 1.88*var(--fs));                                                    /* height the copy needs above the bottle caps */
  --cap:clamp(64px,8.5vh,88px);                                                           /* the caption band under the lineup (a bottle's name and proof) */
  --sw:min(max(100vw,calc(1.5*(var(--H) - var(--cap)))),calc(2.85*(var(--H) - var(--zone) - var(--cap))));   /* stage width (the bottle caps sit 47% down the stage) */
  --gap:max(0px,calc((100vw - var(--sw))/2));
  --gapy:max(0px,calc(var(--H) - var(--cap) - var(--sw)/1.5));
  position:relative;height:var(--H);background:var(--ink);overflow:hidden;isolation:isolate}
@supports (height:100svh){.hero-home{--H:max(100svh,600px)}}
.hero-home .view{position:absolute;inset:0;overflow:hidden}
/* the stage is the photograph at a fixed 3:2 shape, standing on the caption band. Hotspots, outlines, the waveform and the label lines are positioned in % of the stage, so they stay on the bottles at every size.
   The fade at the edges is on the pictures (not the stage), so a bottle's caption can sit below the stage in the band. */
.hero-home .stage{--fx:clamp(0px,calc(var(--gap)*3),14%);--fy:clamp(0px,calc(var(--gapy)*3),22%);
  position:absolute;bottom:var(--cap);left:50%;width:var(--sw);aspect-ratio:3/2;transform:translateX(-50%)}
.hero-home .stage picture{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fx),#000 calc(100% - var(--fx)),transparent 100%),linear-gradient(180deg,transparent 0,#000 var(--fy),#000 98.2%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fx),#000 calc(100% - var(--fx)),transparent 100%),linear-gradient(180deg,transparent 0,#000 var(--fy),#000 98.2%,transparent 100%);mask-composite:intersect}
.hero-home .stage picture,.hero-home .stage .photo{display:block;width:100%;height:100%}
/* the hero's one visual moment (assets/home.js): a thin white heart-monitor line on a canvas that spans the whole hero at the height of the label waves (placed by
   the script); it is only on screen while it plays */
.hero-home .trace{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.85)) drop-shadow(0 0 7px rgba(255,255,255,.4))}
.hero-home .lineup{position:absolute;inset:0;z-index:3}
.hs{position:absolute;left:var(--x);width:var(--w);top:45%;height:53%;display:block;outline:none}
/* hover or keyboard focus: a soft gold outline that follows the bottle's own shape (the four bottles share one mould), and the name and proof below the lineup. Nothing else changes. */
.hs .hs-ol{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);filter:drop-shadow(0 0 6px rgba(208,187,111,.55))}
.hs .hs-ol path{fill:none;stroke:rgba(226,204,126,.8);stroke-width:1.25px;vector-effect:non-scaling-stroke}
.hs:is(:hover,:focus-visible) .hs-ol{opacity:1}
.hs:focus-visible .hs-ol path{stroke:var(--gold-lt);stroke-width:2px}
.hs .hs-tag{position:absolute;left:50%;top:calc(100% + 2.4% + clamp(10px,1.6vh,16px));display:grid;justify-items:center;gap:4px;white-space:nowrap;
  transform:translate(-50%,6px);opacity:0;pointer-events:none;transition:opacity var(--m-base) var(--ease),transform var(--m-base) var(--ease)}
.hs .hs-tag b{font:400 clamp(20px,1.5vw + 4px,26px)/1 var(--serif);color:var(--cream)}
.hs .hs-tag i{font:500 var(--fs-12)/1.2 var(--sans);font-style:normal;letter-spacing:.06em;color:var(--gold-lt);font-variant-numeric:lining-nums tabular-nums}
.hs:is(:hover,:focus-visible) .hs-tag{opacity:1;transform:translate(-50%,0)}
.hs:is(.bourbon,.rye) .hs-tag{left:51.5%}.hs.gin .hs-tag{left:47%}                      /* centred under each bottle as it stands in the photograph */
@media (hover:none){.hs .hs-tag{opacity:1;transform:translate(-50%,0)}.hs .hs-tag b{font-size:18px}.hs .hs-tag i{font-size:11px;letter-spacing:.04em}}
@media (prefers-reduced-motion:reduce){.hs .hs-ol,.hs .hs-tag{transition:none}}
.hero-home .copy{position:absolute;z-index:4;left:0;right:0;top:calc(var(--hdrh) + clamp(20px,4.5vh,52px));padding:0 var(--pad);max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;pointer-events:none}
.hero-home .copy>*{pointer-events:auto;max-width:min(640px,62vw)}
.hero-home h1{font-size:var(--fs);line-height:.94;letter-spacing:-.018em}
.hero-home h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero-home h1 .ln>span{display:inline-block}
.hero-home h1 .it{font-style:italic}
.hero-home .sub{margin-top:var(--s4);font:400 var(--fs-22)/1.35 var(--sans);color:rgba(244,237,225,.9)}
.hero-home .cta{display:flex;align-items:center;gap:var(--s5) var(--s6);flex-wrap:wrap;margin-top:var(--s5)}
.reveal-on .hero-home:not(.go) h1 .ln>span{opacity:0}                                   /* the copy only fades in: the waveform is the hero's one moment */
.reveal-on .hero-home h1 .ln>span{transition:opacity 1.2s var(--ease)}
.reveal-on .hero-home h1 .ln:nth-child(2)>span{transition-delay:.15s}
.reveal-on .hero-home:not(.go) :is(.sub,.cta){opacity:0}
.reveal-on .hero-home :is(.sub,.cta){transition:opacity 1s var(--ease) .5s}
/* stacked layout: phones and any portrait screen. Copy first, then a cropped view of the same photograph. */
@media (max-width:760px),(max-aspect-ratio:5/6){
  .hero-home{--fs:var(--fs-76);--cap:58px;height:auto;min-height:0;display:flex;flex-direction:column}
  .hero-home .copy{position:relative;top:auto;padding:calc(var(--hdrh) + 28px) var(--pad) 28px}
  .hero-home .copy>*{max-width:none}
  .hero-home .view{position:relative;inset:auto;height:calc(84vw + var(--cap));min-height:300px}
  .hero-home .stage{width:187vw;left:50%;transform:translateX(-50.8%)}
  .hero-home .stage picture{-webkit-mask-image:linear-gradient(180deg,#000 98.2%,transparent 100%);mask-image:linear-gradient(180deg,#000 98.2%,transparent 100%)}
}
@media (max-aspect-ratio:5/6) and (min-width:761px){.hero-home .view{height:calc(min(84vw,720px) + var(--cap))}.hero-home .stage{width:min(187vw,1560px)}}

/* ================================================================== HOME 2: the four spirits (Tasting Room, cream) */
.sp-lead{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);background:var(--parchment);color:var(--navy);border-top:3px solid var(--acc,var(--bourbon))}
.sp-lead .ph{display:block;position:relative;aspect-ratio:1/1.3;overflow:hidden;background:#e8e3d9}
.sp-lead .ph img,.sp-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transition:transform var(--m-slow) var(--ease)}
.sp-lead:hover .ph img,.sp-card:hover .ph img{transform:scale(1.025)}
.sp-lead .tx{display:flex;flex-direction:column;justify-content:center;gap:var(--s5);padding:clamp(32px,6vw,104px)}
.sp-lead .flag{font:600 var(--fs-13)/1.2 var(--sans);letter-spacing:.02em;color:var(--gold-ink)}
.sp-lead h3{font-size:clamp(52px,4.6vw + 20px,96px);line-height:.92}
.sp-lead .spec,.sp-card .spec{font:500 var(--fs-16)/1.3 var(--sans);color:var(--navy)}
.sp-lead .desc{font-size:clamp(18px,.3vw + 17px,20px);line-height:1.65;color:var(--muted-on-cream);max-width:34ch}
.sp-lead .acts{margin-top:var(--s3)}
/* the whole card is one link: the visible text link stretches over the card (no second, hidden link for the picture) */
.sp-lead .acts a.btn{position:static}
.sp-lead .acts a::after,.sp-card .tlink::after{content:"";position:absolute;inset:0}
.sp-lead:has(:focus-visible),.sp-card:has(:focus-visible){outline:2px solid var(--navy);outline-offset:3px}
@supports selector(:has(*)){.sp-lead a:focus-visible,.sp-card a:focus-visible{outline:none}}
.sp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(16px,2.4vw,32px)}
.sp-card{position:relative;display:flex;flex-direction:column;background:var(--parchment);color:var(--navy);border-top:3px solid var(--acc)}
.sp-card .ph{display:block;position:relative;aspect-ratio:1/1.25;overflow:hidden;background:#e8e3d9}
.sp-card .tx{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) var(--s5) var(--s6);flex:1}
.sp-card h3{font-size:clamp(30px,1.4vw + 22px,42px);line-height:1}
.sp-card .desc{font-size:15px;line-height:1.6;color:var(--muted-on-cream)}
.sp-card .tlink{margin-top:auto;align-self:flex-start;color:var(--navy)}
.sp-card .tlink:hover{color:var(--gold-ink)}
@media (max-width:900px){.sp-lead{grid-template-columns:1fr}.sp-row{grid-template-columns:1fr}.sp-card{flex-direction:row}.sp-card .ph{flex:0 0 38%;aspect-ratio:auto;min-height:220px}}

/* ================================================================== HOME 3: Sound Aging (Barrel Room, ink) */
.sound{overflow:hidden;--bleed:calc((100vw - min(100vw, calc(var(--maxw) + 2*var(--pad))))/2 + var(--pad))}
.sound-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:stretch}
.sound-grid>div:last-child{align-self:center}
/* the photograph runs to the screen edge and is as tall as the text beside it */
.sound-pic{position:relative;min-height:clamp(520px,56vw,820px);margin-left:calc(-1*var(--bleed));overflow:hidden;background:#1a1410}
.sound-pic::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 62%,rgba(7,15,27,.55) 100%)}
.sound-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.sound h2{font-size:clamp(46px,4.6vw + 14px,84px);line-height:.96;letter-spacing:-.018em}
.sound h2 span{display:block}
.sound h2 .it{font-style:italic}
.sound .lede{margin-top:var(--s6);color:#cdd3dd;max-width:50ch}
.sound .note{margin-top:var(--s5);font-size:var(--fs-16);color:var(--muted-on-ink);max-width:46ch}
.sound .acts{display:flex;align-items:center;gap:var(--s5) var(--s6);flex-wrap:wrap;margin-top:var(--s6)}
@media (max-width:860px){.sound-grid{grid-template-columns:1fr}.sound-pic{margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));min-height:0;aspect-ratio:4/4.4}.sound-pic::after{background:linear-gradient(180deg,transparent 60%,rgba(7,15,27,.6) 100%)}}

/* "Next Sound Aging Session" (assets/sound-aging-next.js). Used on the Home page and on the Sound Aging page, so it is not scoped to body.v5. Hidden until the script has drawn it. */
.ss-next{margin-top:var(--s7);padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,44px) clamp(24px,2.8vw,36px);max-width:560px;border:1px solid rgba(208,187,111,.4);background:linear-gradient(180deg,rgba(208,187,111,.09),rgba(208,187,111,.02));color:var(--cream)}
.ss-next[hidden]{display:none}
.ss-next-t{font:500 var(--fs-16)/1.2 var(--sans);letter-spacing:.01em;color:var(--gold-lt)}
.ss-clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s5)}
.ss-clock>div{display:grid;gap:6px;padding:0 clamp(8px,1.5vw,20px);border-left:1px solid rgba(208,187,111,.28)}
.ss-clock>div:first-child{padding-left:0;border-left:0}
.ss-clock b{font:300 clamp(40px,3.6vw + 8px,66px)/.95 var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;min-width:2ch;color:var(--cream)}
.ss-clock span{font:500 var(--fs-13)/1.2 var(--sans);color:var(--muted-on-ink)}
.ss-live{display:none;margin-top:var(--s4);font:300 clamp(34px,2.8vw + 12px,52px)/1.05 var(--serif);color:var(--cream)}
.ss-next[data-state="live"] .ss-clock{display:none}
.ss-next[data-state="live"] .ss-live{display:block}
.ss-next-when{margin-top:var(--s5);font-size:var(--fs-16);line-height:1.5;color:#c9cfd9}
.ss-next-when:empty{display:none}
@media (max-width:860px){.ss-next{max-width:none}}

/* ================================================================== HOME 4: Barrel Room teaser (ink, real playlist data only) */
.brt-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.brt h2{font-size:clamp(40px,3.2vw + 24px,64px);line-height:1;letter-spacing:-.014em}
.brt .lede{margin-top:var(--s5)}
.brt .acts{display:flex;align-items:center;gap:var(--s5) var(--s6);flex-wrap:wrap;margin-top:var(--s6)}
.brt-list-hd{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid rgba(208,187,111,.4);font:500 var(--fs-13)/1.4 var(--sans);color:var(--gold-lt)}
.brt-list{list-style:none;counter-reset:none}
.brt-list li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--s4);padding:20px 0;border-bottom:1px solid rgba(244,237,225,.12)}
.brt-list .pos{font:400 var(--fs-28)/1 var(--serif);color:var(--gold-lt);font-variant-numeric:lining-nums tabular-nums}
.brt-list .song{display:grid;gap:2px;min-width:0}
.brt-list .song b{font:500 clamp(18px,.4vw + 16px,21px)/1.25 var(--sans);color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brt-list .song span{font-size:15px;color:var(--muted-on-ink)}
.brt-list .st{display:grid;justify-items:end;gap:2px;font:500 var(--fs-13)/1.3 var(--sans);color:#c3cad6;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.brt-note{margin-top:14px;font-size:14px;line-height:1.55;color:#9aa5b6;max-width:62ch}
.brt-pl{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:var(--s4);font-size:15px}
@media (max-width:900px){.brt-grid{grid-template-columns:1fr}}
@media (max-width:520px){.brt-list li{grid-template-columns:32px minmax(0,1fr)}.brt-list .st{grid-column:2;justify-items:start;grid-auto-flow:column;gap:12px}}

/* ================================================================== HOME 5: seasonal cocktails (Tasting Room, cream) */
.sg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.sg-card{display:flex;flex-direction:column;gap:var(--s4);color:var(--navy)}
.sg-card .im{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:#e4dccb}
.sg-card .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--m-slow) var(--ease)}
.sg-card:hover .im img{transform:scale(1.03)}
.sg-card .tx{display:grid;gap:4px}
.sg-card .sp{font:600 var(--fs-13)/1.2 var(--sans);color:var(--gold-ink);letter-spacing:.01em}
.sg-card .nm{font:400 clamp(25px,1vw + 18px,32px)/1.05 var(--serif);color:var(--navy)}
.sg-card .ds{font-size:15px;line-height:1.5;color:var(--muted-on-cream)}
.sg-card .mt{font:500 var(--fs-13)/1.3 var(--sans);color:var(--muted-on-cream);font-variant-numeric:lining-nums tabular-nums}
@media (max-width:980px){.sg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.sg{gap:12px 10px}.sg-card .nm{font-size:23px}.sg-card .ds{display:none}}

/* ================================================================== HOME 6: Born in Austin. Built in Texas. (navy) */
.austin-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0;align-items:stretch}
.austin-pic{position:relative;min-height:clamp(360px,46vw,640px);overflow:hidden;background:#1a1410}
.austin-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.austin-tx{display:flex;flex-direction:column;justify-content:center;gap:var(--s5);padding:clamp(32px,6vw,96px)}
.austin h2{font-size:clamp(46px,4.6vw + 14px,84px);line-height:.98;letter-spacing:-.018em}
.austin h2 span{display:block}
.austin p{font-size:clamp(18px,.3vw + 17px,20px);line-height:1.7;color:#d3d9e2;max-width:46ch}
.austin .vet{display:flex;align-items:center;gap:14px;font-size:var(--fs-13);line-height:1.4;color:var(--muted-on-ink)}
.austin .vet img{height:48px;width:48px}
@media (max-width:860px){.austin-grid{grid-template-columns:1fr}.austin-pic{min-height:0;aspect-ratio:4/3.2}.austin-pic img{object-position:50% 30%}}

/* ================================================================== HOME 7: Find ReVerb + newsletter (ink) */
.find-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
.findband h2{font-size:clamp(40px,3.2vw + 24px,64px);line-height:1}
.findband .lede{margin-top:var(--s5);max-width:44ch}
.findband .acts{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;margin-top:var(--s6)}
.findband h3{font-size:var(--fs-36);line-height:1.05}
.nl p{margin-top:var(--s3);font-size:var(--fs-16);color:var(--muted-on-ink);max-width:44ch}
.nl form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:end;margin-top:var(--s5);max-width:520px}
.nl .fine{margin-top:12px;font-size:var(--fs-13);color:var(--muted-on-ink)}
@media (max-width:860px){.find-grid{grid-template-columns:1fr}}
@media (max-width:480px){.nl form{grid-template-columns:1fr}.nl form .btn{width:100%}}

/* ================================================================== accessibility, print */
@media (prefers-reduced-motion:reduce){
  .v5 *,.rvh *,.rvm *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal-on .hero-home:not(.go) h1 .ln>span{opacity:1}
  .reveal-on .hero-home:not(.go) :is(.sub,.cta){opacity:1}
}
@media print{.rvh,.rvm,.rvf,.rvc{display:none!important}}