/* Open BTL Wine & Spirits, v2: the house menu.
   One idea: every section is a printed supper-club menu card laid over a photograph of the place.
   Day = the rooftop (cream paper, ink, brand red). Night = the lounge (black lacquer, cream ink).
   The logo carries the system: thin condensed caps set the type, its double-line oval sets the frames
   (tier cards, label tiles, the Wine Club oval), its asterisk is the only sparkle in the line art.

   Theme: every colour is a custom property. Default follows prefers-color-scheme; [data-theme] on <html>
   (set by the header toggle, stored in localStorage) overrides it. SQUARESPACE-MAP-v2.md has the port.

   Tokens (brand red #A81E23 and oxblood #540a0c fixed; the rest derived with ~/.claude/bin/oklch.py):
     token        day       night     text pair, APCA Lc / WCAG
     --paper      #fcf6ee   #110d0d   --ink on it: 99.8 / 16.77   night 96.6 / 16.68
     --paper-2    #f7ecde   #191514   --ink: 94.3 / 15.44          night 96.0 / 15.65
     --card       #fffcf8   #221d1c   --ink: 103.2 / 17.61         night 95.0 / 14.38
     --ink        #1c1513   #f6ede2
     --ink-2      #544b46   #d5cdc4   on paper-2 78.8 / 7.29, card 87.7 / 8.31; night on card 75.1 / 10.60, paper 76.6 / 12.29
     --accent     #A81E23   #f6ede2   red text on paper 78.8 / 6.80, paper-2 73.3 / 6.26, card 82.1 / 7.14
     --num        #A81E23   #dab570   night gold on card 63.4 / 8.59, paper-2 64.4 / 9.34
     --btn        #A81E23   #A81E23   label #fffcf8 on it 86.9 / 7.14; hover #771216 (red ramp 800) 96.5 / 10.91
     --oxblood    #540a0c   #540a0c   --on-ox #f6ede2 92.5 / 12.72; --on-ox-2 #e3cec6 75.0 / 9.76
     --star       #a18551   #dab570   non-text, 3.01:1 on paper-2; night 9.96:1 on paper
     --line       #918783   #6f6761   field borders, 3.00:1 on paper-2 / 3.01:1 on card (non-text)
     illustration ink #1c1513 + red #A81E23 by day; #f6ede2 + #d82a30 (3.01:1 on #110d0d and on oxblood) by night */
:root{
  --paper:#fcf6ee;--paper-2:#f7ecde;--card:#fffcf8;
  --ink:#1c1513;--ink-2:#544b46;--accent:#A81E23;--num:#A81E23;
  --btn:#A81E23;--btn-ink:#fffcf8;--btn-hover:#771216;
  --oxblood:#540a0c;--on-ox:#f6ede2;--on-ox-2:#e3cec6;
  --star:#a18551;--line:#918783;--field:#fffcf8;--focus:#A81E23;--sep:#A81E23;
  --shadow:28 21 19;--shadow-a:1;
  --night:#110d0d;
  color-scheme:light;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --text:"Barlow","Helvetica Neue",Arial,sans-serif;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;
  --pad:clamp(20px,4vw,48px);
  --max:1280px;
  --edge:calc((100vw - min(100vw,var(--max))) / 2 + var(--pad));
  --bar:76px;
  --r:4px;--r-card:24px;
  --wave:22px;
  --lift:clamp(56px,6vw,76px);--inset:clamp(12px,1.6vw,20px);
  --ease:cubic-bezier(0.23,1,0.32,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#110d0d;--paper-2:#191514;--card:#221d1c;
    --ink:#f6ede2;--ink-2:#d5cdc4;--accent:#f6ede2;--num:#dab570;
    --star:#dab570;--line:#6f6761;--field:#191514;--focus:#dab570;--sep:#dab570;
    --shadow:0 0 0;--shadow-a:1.6;
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) .day-only{display:none!important}
  :root:not([data-theme="light"]) .night-only{display:block}
}
:root[data-theme="dark"]{
  --paper:#110d0d;--paper-2:#191514;--card:#221d1c;
  --ink:#f6ede2;--ink-2:#d5cdc4;--accent:#f6ede2;--num:#dab570;
  --star:#dab570;--line:#6f6761;--field:#191514;--focus:#dab570;--sep:#dab570;
  --shadow:0 0 0;--shadow-a:1.6;
  color-scheme:dark;
}
.night-only{display:none}
:root[data-theme="dark"] .day-only{display:none!important}
:root[data-theme="dark"] .night-only{display:block}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + var(--sp-4));background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--text);font-weight:400;font-size:1.0625rem;line-height:1.7;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--sp-4);top:-100px;z-index:100;min-height:44px;display:inline-flex;align-items:center;background:var(--ink);color:var(--paper);padding:var(--sp-3) var(--sp-4);border-radius:var(--r);font:500 1rem/1.2 var(--display);letter-spacing:.08em}
.skip:focus{top:var(--sp-4)}
main:focus{outline:none}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
[hidden]{display:none!important}

/* ---------- bands: paper, paper-2, oxblood; each meets the one above on a hand-drawn wave ---------- */
.band{--bg:var(--paper);position:relative;background:var(--bg);color:var(--ink-2);overflow-x:clip}
.band-2{--bg:var(--paper-2)}
.band-ox{--bg:var(--oxblood);--ink:var(--on-ox);--ink-2:var(--on-ox-2);--accent:var(--on-ox);--num:var(--on-ox);--line:var(--on-ox-2);--focus:var(--on-ox);--sep:var(--on-ox);--btn:var(--on-ox);--btn-ink:var(--oxblood);--btn-hover:#fffcf8;color-scheme:dark}
.band-ox .day-only{display:none!important}
.band-ox .night-only{display:block}
.wave::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--wave));height:var(--wave);z-index:2;pointer-events:none;background:var(--bg);-webkit-mask:var(--m-wave-a) 0 0/100% 100% no-repeat;mask:var(--m-wave-a) 0 0/100% 100% no-repeat}
.wave-b::before{-webkit-mask-image:var(--m-wave-b);mask-image:var(--m-wave-b)}
.sec{padding-block:clamp(80px,9vw,136px)}
.sec-tight{padding-block:clamp(56px,6vw,88px)}

/* ---------- type: the logo's thin condensed caps; headings typed in caps ---------- */
.h1,.h2,.h3,.h4{font-family:var(--display);text-transform:uppercase;margin:0;color:var(--ink);text-wrap:balance}
.h1{font-weight:300;font-size:clamp(3.25rem,7vw,7rem);line-height:.92;letter-spacing:.02em}
.h2{font-weight:300;font-size:clamp(2.25rem,4.8vw,4.5rem);line-height:.95;letter-spacing:.02em}
.h3{font-weight:400;font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1.05;letter-spacing:.04em}
.h4{font-weight:500;font-size:1rem;line-height:1.3;letter-spacing:.1em}
.p1,.lede{font-size:clamp(1.1875rem,1.5vw,1.375rem);line-height:1.55;text-wrap:pretty}
.p1{color:var(--ink)}
.lede{margin-top:var(--sp-6);max-width:58ch}
.small{font-size:.9375rem;line-height:1.5}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- buttons: red pills (Primary), ink outline pills (Tertiary); labels typed in caps ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:0 var(--sp-6);border:1.5px solid var(--btn);border-radius:999px;background:var(--btn);color:var(--btn-ink);font:500 1.0625rem/1.2 var(--display);letter-spacing:.08em;text-decoration:none;text-align:center;cursor:pointer}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-sm{min-height:44px;padding:0 var(--sp-4);font-size:1rem}
.btn-lg{min-height:56px;padding:0 var(--sp-8);font-size:1.125rem}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-text{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0;background:none;border:0;cursor:pointer;font:500 1rem/1.2 var(--display);letter-spacing:.08em;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.btn-text svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:var(--sp-8)}
.center .ctas{justify-content:center}

/* ---------- header: a paper strip with a torn lower edge; red caps nav by day ---------- */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--sp-4);min-height:var(--bar);padding:0 var(--pad);padding-top:env(safe-area-inset-top,0px);background:var(--paper)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:calc(1px - 12px);height:12px;pointer-events:none;background:var(--paper);-webkit-mask:var(--m-wave-b) 0 0/100% 100% no-repeat;mask:var(--m-wave-b) 0 0/100% 100% no-repeat;transform:scaleY(-1)}
.brand{display:flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none;flex:none}
.brand-logo{height:50px;width:auto}
.nav{margin-left:auto}
.nav ul{display:flex;gap:var(--sp-1)}
.nav a:not(.btn){display:flex;align-items:center;min-height:44px;padding:0 var(--sp-3);font:500 1rem/1 var(--display);letter-spacing:.09em;color:var(--accent);text-decoration:none;border-radius:var(--r)}
.nav-cta{display:none}
.bar-actions{display:flex;align-items:center;gap:var(--sp-2)}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;color:var(--ink);border:0;border-radius:999px;cursor:pointer}
.icon-btn svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.js .cart-btn[hidden],.js .theme-btn[hidden]{display:inline-flex!important}
.theme-btn .i-sun{display:none}
.theme-btn[aria-pressed="true"] .i-sun{display:block}
.theme-btn[aria-pressed="true"] .i-moon{display:none}
.cart-count{position:absolute;top:2px;right:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font:500 .8125rem/1 var(--display);font-variant-numeric:tabular-nums}
.menu-btn{display:none;min-height:44px;min-width:44px;padding:0;justify-content:center;align-items:center;background:transparent;color:var(--ink);border:0;border-radius:var(--r);cursor:pointer}
.menu-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:1079px){
  .js .menu-btn{display:inline-flex}
  .js .nav{position:absolute;top:100%;left:0;right:0;margin:0;background:var(--paper);padding:var(--sp-4) var(--pad) var(--sp-8);display:none;box-shadow:0 24px 32px -24px rgb(var(--shadow) / calc(.35 * var(--shadow-a)))}
  .js .site-header.menu-open .nav{display:block}
  .js .nav ul{flex-direction:column}
  .js .nav a:not(.btn){min-height:52px;font-size:1.375rem;padding:0}
  .js .bar-actions{margin-left:auto}
  html:not(.js) .site-header{flex-wrap:wrap;padding-bottom:var(--sp-2)}
  html:not(.js) .nav{order:3;width:100%;margin:0}
  html:not(.js) .nav ul{flex-wrap:wrap}
}
@media (max-width:479px){
  .brand-logo{height:38px}
  .bar-cta{display:none}
  .js .nav-cta{display:block;margin-top:var(--sp-4)}
}

/* ---------- photos: torn-paper edges (CSS mask), lifted off the page by a shadow on the wrapper ---------- */
.paper{position:relative;filter:drop-shadow(0 2px 3px rgb(var(--shadow) / calc(.16 * var(--shadow-a)))) drop-shadow(0 18px 26px rgb(var(--shadow) / calc(.2 * var(--shadow-a))))}
.pm{display:block;overflow:clip;background:var(--paper-2);-webkit-mask:var(--m-torn-a) center/100% 100% no-repeat;mask:var(--m-torn-a) center/100% 100% no-repeat}
.pm > img{width:100%;height:auto}
.how .pm > img{aspect-ratio:5/4;object-fit:cover;object-position:50% 55%}  /* real-photos version: the retail-wall photo is portrait */
.torn-b > .pm{-webkit-mask-image:var(--m-torn-b);mask-image:var(--m-torn-b)}
.torn-c > .pm{-webkit-mask-image:var(--m-torn-c);mask-image:var(--m-torn-c)}
.bleed-left{margin-left:calc(-1 * var(--edge))}
.bleed-right{margin-right:calc(-1 * var(--edge))}
@media (max-width:899px){.bleed-left,.bleed-right{margin-inline:calc(-1 * var(--pad))}}

/* ---------- the menu card over the photo (the Cork2Glass layering): inset from the photo's edge, rising over its bottom ---------- */
.lay{position:relative;isolation:isolate}
.card{position:relative;z-index:1;background:var(--card);color:var(--ink-2);border-radius:var(--r);padding:clamp(24px,2.6vw,36px);box-shadow:0 2px 4px rgb(var(--shadow) / calc(.08 * var(--shadow-a))),0 22px 44px -18px rgb(var(--shadow) / calc(.3 * var(--shadow-a)))}
.lay > .card{margin-top:calc(-1 * var(--lift));margin-left:var(--inset);width:min(var(--card-w,420px),calc(100% - 2 * var(--inset)))}
.lay.card-right > .card{margin-left:auto;margin-right:var(--inset)}
.card .h3 + p,.card .h3 + .card-meta{margin-top:var(--sp-3)}
.card .ctas{margin-top:var(--sp-6)}
.card-meta{font:400 1.125rem/1.35 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--num)}

/* ---------- illustrations: day ink and night ink are separate files; the theme picks one ---------- */
.ill{pointer-events:none;user-select:none}
.ill img{width:100%;height:auto}

/* ---------- hero: full-screen rooftop, copy over a directional scrim ---------- */
.hero{--copy-w:min(580px,46vw);--ink:#f6ede2;--ink-2:#d5cdc4;position:relative;isolation:isolate;display:flex;align-items:center;min-height:calc(100svh - var(--bar));padding-block:clamp(56px,7vw,104px) clamp(88px,9vw,136px);overflow:hidden;background:var(--night);color:var(--ink-2)}
.hero > .wrap{width:100%}
.hero-copy{max-width:var(--copy-w)}
.hero-bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:rgb(17 13 13 / .25);pointer-events:none}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(17 13 13 / .92) 0,rgb(17 13 13 / .86) calc(var(--edge) + var(--copy-w)),rgb(17 13 13 / 0) calc(var(--edge) + var(--copy-w) + 14vw))}
.hero .lede{max-width:56ch}
.hero .btn-ghost{border-color:#f6ede2;color:#f6ede2}
.hero-meta{margin-top:var(--sp-8);font-size:1rem;line-height:1.6}
@media (max-width:767px){.hero{--copy-w:100%;align-items:flex-start}.hero::before{background:rgb(17 13 13 / .64)}}

/* ---------- 2. drink it here: photo off the left edge, the owner's quote as the card over it ---------- */
.how{display:grid;gap:var(--sp-16)}
@media (min-width:900px){.how{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}.how .lay{order:-1}}
.how .lay{--card-w:440px}
.quote p{font-size:clamp(1.1875rem,1.6vw,1.4375rem);line-height:1.5;color:var(--ink)}
.quote footer{margin-top:var(--sp-3);font-size:.9375rem;line-height:1.5}
.stat{margin-top:var(--sp-12);font:300 clamp(2rem,3.6vw,3.25rem)/1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--num)}
.rows{display:grid;gap:var(--sp-6);margin-top:var(--sp-8)}
.row{display:grid;gap:var(--sp-1)}
.row dt{font-size:clamp(1.1875rem,1.5vw,1.375rem);line-height:1.4;color:var(--ink)}
.row dd{max-width:52ch}
.how-copy{display:flex;flex-direction:column}
.how-ill{width:clamp(130px,13vw,180px);margin:var(--sp-8) 0 0 auto}
@media (max-width:899px){.how-ill{order:-1;width:104px;margin:0 0 var(--sp-4) auto}}

/* ---------- 3. the shop strip: an oxblood bar with outlined label tiles ---------- */
.shop-head{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:760px){.shop-head{grid-template-columns:auto minmax(0,1fr)}}
.shop-ill{width:clamp(120px,12vw,168px)}
.shop-head p{margin-top:var(--sp-4);max-width:60ch}
.shop-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-8)}
.shop-tiles li:last-child{grid-column:1 / -1}
@media (min-width:560px){.shop-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}.shop-tiles li{grid-column:span 2}.shop-tiles li:nth-child(n+4){grid-column:span 3}}
@media (min-width:1024px){.shop-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}.shop-tiles li,.shop-tiles li:nth-child(n+4){grid-column:auto}}
/* a tile is a label with the logo's double rule */
.tile{display:flex;align-items:center;justify-content:center;height:100%;min-height:88px;padding:.75em 1em;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 5px var(--bg),inset 0 0 0 6px var(--ink);font:400 1.375rem/1.15 var(--display);letter-spacing:.07em;color:var(--ink);text-align:center;text-decoration:none}

/* ---------- 4. rooftop: string lights across the top, two photos and a card layered ---------- */
.lights{width:100%;overflow:clip;margin-top:calc(-1 * clamp(24px,3vw,40px))}
.lights img{width:max(100%,1100px);max-width:none;margin-left:50%;transform:translateX(-50%)}
.roof{display:grid;gap:var(--sp-12);margin-top:clamp(88px,10vw,136px)}
.roof .lay{--card-w:400px}
@media (min-width:900px){.roof .lay{margin-left:16%}}
.roof-detail{position:absolute;z-index:2;top:calc(-1 * clamp(32px,4vw,56px));left:calc(-1 * clamp(0px,14%,200px));width:clamp(140px,26%,320px)}
.roof-detail img{aspect-ratio:1/1;object-fit:cover;object-position:28% 50%}
@media (max-width:899px){.roof-detail{left:auto;right:var(--pad);top:auto;bottom:calc(100% - 40px);width:34%}.roof .lay{margin-top:clamp(72px,18vw,120px)}}
.card p + p{margin-top:var(--sp-3)}

/* ---------- 5. three menu cards over three photos, staggered (the cards share one height) ---------- */
.trio{display:grid;gap:clamp(56px,7vw,72px) clamp(20px,2.4vw,36px);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.trio{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.trio > :nth-child(2){margin-top:clamp(48px,6vw,88px)}.trio > :nth-child(3){margin-top:clamp(24px,3vw,44px)}}
.trio .lay{display:grid;grid-template-rows:auto 1fr;height:100%}
.trio .lay > .card{--card-w:100%;width:calc(100% - 2 * var(--inset));display:flex;flex-direction:column}
.trio .card .ctas{margin-top:auto;padding-top:var(--sp-6)}
.trio .paper img{aspect-ratio:4/5;object-fit:cover}
.trio .ph-flight img{object-position:58% 50%}
.trio .ph-board img{object-position:30% 50%}
.trio .ph-toast img{object-position:52% 40%}
@media (max-width:899px){.trio .paper img{aspect-ratio:4/3}}
.trio-grid-rows{display:contents}

/* ---------- 6. events: the jazz photo, a dashed ticket over it, line drawings flanking ---------- */
.ev-media img{aspect-ratio:21/9;object-fit:cover;object-position:50% 62%}
@media (max-width:899px){.ev-media img{aspect-ratio:3/2}}
.ticket{position:relative;z-index:1;margin:calc(-1 * clamp(64px,9vw,140px)) auto 0;max-width:1080px;padding:clamp(48px,5vw,72px) clamp(40px,5vw,72px);background:var(--card);border-radius:var(--r);display:grid;gap:var(--sp-8);grid-template-columns:minmax(0,1fr)}
.ticket::before{content:"";position:absolute;inset:10px;pointer-events:none;background:var(--ink);
  -webkit-mask:var(--m-dash-h) left top/40px 14px repeat-x,var(--m-dash-h) left bottom/40px 14px repeat-x,var(--m-dash-v) left top/14px 40px repeat-y,var(--m-dash-v) right top/14px 40px repeat-y;
  mask:var(--m-dash-h) left top/40px 14px repeat-x,var(--m-dash-h) left bottom/40px 14px repeat-x,var(--m-dash-v) left top/14px 40px repeat-y,var(--m-dash-v) right top/14px 40px repeat-y}
@media (min-width:1000px){.ticket{grid-template-columns:180px minmax(0,1fr) 180px;align-items:center}}
.ticket-ill{width:clamp(200px,18vw,250px);position:relative;z-index:1}  /* above the ticket's dashed frame (.ticket::before) */
/* the drawings reach out over the frame (Jamie's hands do the same): a third of each sits outside the ticket */
.ticket-ill{--reach:24px}
@media (min-width:1280px){.ticket-ill{--reach:110px}}
.ticket-ill.left{justify-self:start;margin-left:calc(-1 * clamp(64px,6vw,72px) - var(--reach))}
.ticket-ill.right{justify-self:end;margin-right:calc(-1 * clamp(64px,6vw,72px) - var(--reach))}
@media (max-width:999px){.ticket-ill.left{display:none}.ticket-ill.right{width:120px;justify-self:center;margin:0;order:-1}}
.events{display:grid;gap:var(--sp-6) var(--sp-8);margin-top:var(--sp-8);text-align:left}
@media (min-width:640px){.events{grid-template-columns:repeat(2,minmax(0,1fr))}}
.events .p1{font-size:1.25rem}
.events p:not(.p1){margin-top:var(--sp-1);font-size:1rem;line-height:1.55}
.social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:var(--ink)}
.social svg{width:24px;height:24px}

/* ---------- 7. Wine Club: the logo oval, two menu cards with its double rule ---------- */
.club-head{display:grid;gap:var(--sp-12)}
@media (min-width:900px){.club-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-16);align-items:center}}
.includes{display:grid;gap:var(--sp-8);margin-top:var(--sp-12);align-items:end}
@media (min-width:640px){.includes{grid-template-columns:minmax(0,1fr) clamp(130px,14vw,190px)}}
@media (max-width:639px){.club-ill{width:120px}}
.ticks{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.ticks li{position:relative;padding-left:var(--sp-8)}
.oval{position:relative;isolation:isolate;width:calc(100% - 40px);max-width:480px;margin:18px auto var(--sp-6)}
.oval img{border-radius:999px;aspect-ratio:3/4;object-fit:cover;object-position:55% 50%}
.oval::before,.oval::after{content:"";position:absolute;pointer-events:none;border:1px solid var(--ink);border-radius:999px}
.oval::before{inset:-12px;z-index:-1}
.oval::after{inset:-18px;z-index:-1}
.tiers{display:grid;gap:var(--sp-8);margin-top:clamp(56px,7vw,96px)}
@media (min-width:760px){.tiers{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.tier,.gift,.form-card{background:var(--card);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--ink),0 22px 44px -22px rgb(var(--shadow) / calc(.3 * var(--shadow-a)))}
.tier{display:flex;flex-direction:column;gap:var(--sp-6);padding:clamp(32px,3.6vw,52px)}
.tier .btn{margin-top:auto;align-self:flex-start}
.tier-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-3);margin:0}
.tier-num{font:300 clamp(3rem,5.4vw,4.75rem)/.95 var(--display);letter-spacing:.01em;color:var(--num)}
.tier-per{font-size:1.0625rem}
.tier-rows{display:grid;gap:var(--sp-4)}
.tier-rows div{display:grid;gap:var(--sp-1)}
@media (min-width:1100px){.tier-rows div{grid-template-columns:8.5rem minmax(0,1fr);gap:var(--sp-4);align-items:baseline}}
.tier-rows dt{font-size:.9375rem}
.tier-rows dd{font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.45;color:var(--ink)}
.tier .ticks{margin:0}
.club-more{display:grid;gap:var(--sp-6);margin-top:clamp(48px,6vw,80px)}
@media (min-width:760px){.club-more{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.gift{display:grid;grid-template-rows:auto 1fr auto;gap:var(--sp-3);justify-items:start;padding:clamp(28px,3vw,40px)}
.gift-btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-6)}
.member-row{margin-top:var(--sp-8);text-align:center}

/* ---------- 8. reviews: one auto-scrolling strip, gold stars, a pause button ---------- */
.rev-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-6)}
.stars{display:flex;gap:6px;margin-top:var(--sp-4)}
.stars svg{width:26px;height:26px;fill:var(--star)}
/* the moving row is clipped by paint containment (the clip is the point of a marquee) */
.marquee{margin-top:clamp(32px,4vw,56px);contain:paint;padding-block:var(--sp-4)}
.marquee:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.mq-inner{display:flex;width:max-content}
.mq-list{display:flex;align-items:flex-start;gap:clamp(32px,4vw,56px);padding-right:clamp(32px,4vw,56px)}
.mq-item{flex:0 0 auto;width:clamp(260px,30vw,420px)}
.mq-item p{font-size:clamp(1.1875rem,1.5vw,1.375rem);line-height:1.5;color:var(--ink)}
.mq-item footer{margin-top:var(--sp-3);font-size:.9375rem}
html:not(.js) .marquee{overflow-x:auto;padding-inline:var(--pad)}
html:not(.js) .mq-dup{display:none}

/* the logo asterisk as a mark (list markers, separators, required fields) */
:root{--asterisk:url("data:image/svg+xml,%3Csvg fill=%22%23000%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 696 696%22%3E%3Cg transform=%22translate%280.000000,696.000000%29 scale%280.100000,-0.100000%29%22%3E%3Cpath d=%22M3318 5990 c-206 -26 -316 -117 -359 -295 -8 -35 -12 -234 -13 -680 -1 -700 1 -681 -68 -752 -73 -75 -169 -80 -328 -18 -52 20 -214 79 -360 130 -146 51 -323 114 -395 140 -428 154 -583 108 -736 -219 -109 -234 -105 -428 13 -544 75 -75 155 -104 498 -182 52 -12 183 -50 290 -86 107 -35 261 -79 342 -98 425 -102 456 -209 164 -579 -66 -83 -219 -282 -340 -442 -121 -159 -253 -330 -294 -380 -239 -294 -204 -477 143 -738 328 -247 459 -212 723 190 48 73 174 262 281 420 107 159 230 346 273 418 229 375 356 369 605 -25 51 -80 136 -209 190 -286 54 -78 175 -253 268 -389 365 -532 504 -590 815 -339 376 304 393 454 94 809 -69 83 -194 240 -278 350 -84 110 -217 283 -297 385 -195 252 -225 313 -199 410 27 102 93 139 362 204 101 25 253 66 338 91 85 26 259 73 385 105 555 140 625 271 395 745 -157 323 -282 348 -776 152 -104 -42 -256 -96 -339 -122 -82 -25 -220 -74 -305 -108 -254 -101 -371 -88 -440 49 -25 50 -37 780 -20 1279 8 237 -54 342 -231 391 -65 18 -307 26 -401 14z%22/%3E%3C/g%3E%3C/svg%3E")}
.ast{display:inline-block;width:20px;height:20px;background:var(--sep);-webkit-mask:var(--asterisk) center/contain no-repeat;mask:var(--asterisk) center/contain no-repeat;flex:none}
.ticks li > *:first-child::before{content:"";position:absolute;left:2px;top:.45em;width:.8em;height:.8em;background:var(--sep);-webkit-mask:var(--asterisk) center/contain no-repeat;mask:var(--asterisk) center/contain no-repeat}

/* ---------- 9. contact: the booth lamp, a form on a menu card ---------- */
.book{display:grid;gap:clamp(40px,6vw,96px)}
@media (min-width:1000px){.book{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.book-ill{width:clamp(140px,15vw,200px);margin-bottom:var(--sp-6)}
.form-card{padding:clamp(28px,3.6vw,52px)}
.form{display:grid;gap:var(--sp-6)}
.row-2{display:grid;gap:var(--sp-6)}
@media (min-width:640px){.row-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.field{display:grid;gap:var(--sp-2);min-width:0}
fieldset.field{border:0;margin:0;padding:0}
.field > label,.field legend{font-size:1.0625rem;line-height:1.4;color:var(--ink);padding:0}
.field label.sub{font-size:.9375rem;color:var(--ink-2)}
.req-note{font-size:.9375rem}
.input{width:100%;min-height:52px;padding:var(--sp-3) var(--sp-4);background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);font:400 1.0625rem/1.4 var(--text)}
textarea.input{min-height:160px;resize:vertical}
.input::placeholder{color:var(--ink-2);opacity:.9}
.input:focus{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:2px}
.input[aria-invalid="true"],[aria-invalid="true"] .input{border:2px solid var(--accent)}
.opts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.opt{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;max-width:100%;min-height:44px;padding:.5em 1.1em;background:var(--field);border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:1rem;line-height:1.25;color:var(--ink);text-align:center}
.opt input{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);margin:0;opacity:0;cursor:pointer}
.opt:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
fieldset[aria-invalid="true"] .opt{border:2px solid var(--accent)}
.err{color:var(--accent);font-size:1rem}
.err:empty{display:none}
.req{color:var(--sep);margin-left:2px}
.req-note .req{margin:0 2px 0 0}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
.confirm h3:focus{outline:none}
.confirm > p{margin-top:var(--sp-4)}

/* ---------- 10. visit: the photo off the right edge, the card overlapping its left side ---------- */
.visit{display:grid}
@media (min-width:900px){.visit{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;padding-bottom:var(--lift)}.visit .card{grid-column:1;grid-row:1;align-self:end;margin:0 -22% calc(-1 * var(--lift)) 0;z-index:2}.visit .paper{grid-column:2;grid-row:1}}
@media (max-width:899px){.visit .card{margin:calc(-1 * var(--lift)) var(--inset) 0;order:2}}
.visit .paper img{aspect-ratio:4/3;object-fit:cover;object-position:50% 60%}
.addr{margin-top:var(--sp-6);font:400 clamp(1.5rem,2.4vw,2.125rem)/1.05 var(--display);letter-spacing:.04em;font-style:normal;text-transform:uppercase;color:var(--ink)}
.visit .card .btn{margin-top:var(--sp-6)}
.hours-title{margin-top:var(--sp-8)}
.hours{margin-top:var(--sp-3)}
.hours div{display:flex;justify-content:space-between;gap:var(--sp-4);max-width:22rem}
.hours dt{color:var(--ink)}

/* ---------- footer: the oxblood bar, newsletter included ---------- */
.site-footer{padding-block:clamp(64px,7vw,104px) var(--sp-8)}
.foot{display:grid;gap:var(--sp-8)}
@media (min-width:760px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.foot{grid-template-columns:auto repeat(3,minmax(0,1fr)) minmax(0,1.4fr);gap:var(--sp-12)}}
.foot-logo{height:136px;width:auto}
.foot-h{margin-bottom:var(--sp-2)}
.foot-col p{font-size:.9375rem}
.foot-col .social{margin-left:-10px}
.foot-links{display:grid}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;text-decoration:none}
.news-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2);margin-top:var(--sp-3)}
.news-form .err{grid-column:1 / -1}
.band-ox .input{background:transparent;border-color:var(--on-ox-2);color:var(--on-ox)}
.band-ox .input::placeholder{color:var(--on-ox-2)}
.news-confirm{color:var(--ink);margin-top:var(--sp-3)}
.news-confirm:focus{outline:none}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-8);margin-top:var(--sp-12)}
.copy{display:flex;align-items:center;gap:var(--sp-2);font-size:.875rem}
.copy .ast{width:14px;height:14px}
.legal{display:flex;flex-wrap:wrap;gap:0 var(--sp-6)}
.legal a{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;text-decoration:underline;text-underline-offset:4px}
.copy-note{font-size:.875rem;width:100%}

/* =====================================================================================
   SHOP PREVIEW (shop.html, product.html, checkout.html, the cart drawer): the VinesOS storefront redesign.
   ===================================================================================== */
.sec-top{padding-block:clamp(56px,6vw,96px)}
.shop-banner{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:760px){.shop-banner{grid-template-columns:minmax(0,1fr) auto}}
.banner-ill{width:clamp(120px,13vw,176px)}
.sample-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6);font-size:.9375rem;color:var(--ink)}
.chip-sample{display:inline-flex;align-items:center;padding:.45em .85em;border:1px solid var(--ink);border-radius:999px;font:500 .8125rem/1.2 var(--display);letter-spacing:.1em;color:var(--ink);white-space:nowrap;vertical-align:middle}
.empty-state,.not-found,.pay-placeholder{display:grid;justify-items:start;gap:var(--sp-4);padding:clamp(32px,5vw,56px);background:var(--card);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--ink)}
.empty-state .ast,.pay-placeholder .ast{width:28px;height:28px}

/* label tile: the typographic stand-in for a bottle photo, printed like a wine label with the logo's double rule */
.label-tile{position:relative;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);aspect-ratio:4/5;padding:var(--sp-6) var(--sp-4);border-radius:var(--r);text-align:center;--t-bg:var(--card);--t-ink:var(--ink);--t-ink-2:var(--ink-2);background:var(--t-bg);color:var(--t-ink-2);box-shadow:inset 0 0 0 1px var(--t-ink),inset 0 0 0 6px var(--t-bg),inset 0 0 0 7px var(--t-ink)}
.label-tile.is-dark{--t-bg:var(--oxblood);--t-ink:var(--on-ox);--t-ink-2:var(--on-ox-2)}
.label-tile .ast{width:22px;height:22px;background:var(--t-ink)}
.label-tile.is-light .ast{background:var(--sep)}
.tile-title{font:400 clamp(.9375rem,11cqi,1.75rem)/1.05 var(--display);letter-spacing:.05em;color:var(--t-ink);text-wrap:balance}
.tile-sub{font-size:1rem}
.tile-line{font:500 .875rem/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase}
.label-tile.is-big .tile-title{font-size:clamp(1.5rem,10cqi,3.25rem)}
.label-tile.is-big .ast{width:32px;height:32px}
@container (max-width:190px){
  .label-tile{gap:6px;padding:12px 10px}
  .label-tile .ast{width:16px;height:16px}
  .tile-sub{font-size:.8125rem;line-height:1.3}
  .tile-line{font-size:.6875rem;letter-spacing:.08em}
}

/* catalogue */
.catalog{padding-block:clamp(40px,5vw,72px) clamp(80px,9vw,136px)}
.catalog-grid{display:grid;gap:var(--sp-8)}
@media (min-width:900px){.catalog-grid{grid-template-columns:260px minmax(0,1fr);gap:var(--sp-12);align-items:start}}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.result-count{display:inline-block;min-width:11ch;font:500 1rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.toolbar-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.sort{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:.9375rem}
.sort select{min-height:44px;padding:0 var(--sp-8) 0 var(--sp-4);background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:999px;font:400 1rem/1.2 var(--text)}
.filter-count{display:inline-block;min-width:1.2ch}
.active-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-4)}
.active-filters{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.active-row:not(:has(:not([hidden]))){display:none}
.chip-filter{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:.45em .9em;background:transparent;border:1px solid var(--ink);border-radius:999px;color:var(--ink);font:400 1rem/1.2 var(--text);cursor:pointer}
.chip-filter svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8) var(--sp-4);margin-top:var(--sp-8)}
@media (min-width:640px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-12) var(--sp-6)}}
@media (min-width:900px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
.product-card{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.card-link{display:grid;gap:var(--sp-3);color:inherit;text-decoration:none}
.card-name{font-size:1.0625rem;line-height:1.35;color:var(--ink)}
.card-meta-line{font-size:.875rem;line-height:1.45}
.card-foot{display:grid;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-2)}
.card-price{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.price-num{color:var(--num);font-variant-numeric:tabular-nums}
.add-btn{width:100%}
.related{margin-top:var(--sp-8)}

/* filter panel: a sidebar on desktop, a full-screen drawer on phones */
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-2)}
.facet{padding-block:var(--sp-2)}
.facet summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;font:500 1rem/1.2 var(--display);letter-spacing:.1em;color:var(--ink);list-style:none}
.facet summary::-webkit-details-marker{display:none}
.facet summary::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.facet[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.facet fieldset{border:0;margin:0;padding:0}
.facet-list{display:grid;gap:0;margin-top:var(--sp-1)}
.facet-list.is-long{max-height:300px;overflow-y:auto;padding-right:var(--sp-2)}
.check{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;cursor:pointer;font-size:1rem;line-height:1.3;color:var(--ink)}
.check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--btn)}
.check-lg input{width:24px;height:24px}
.panel-foot{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
@media (min-width:900px){
  .filter-panel{position:sticky;top:calc(var(--bar) + var(--sp-6))}
  .filter-open,.panel-close,.panel-done{display:none!important}
}
@media (max-width:899px){
  .filter-panel{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;padding:calc(var(--sp-4) + env(safe-area-inset-top,0px)) var(--pad) calc(var(--sp-6) + env(safe-area-inset-bottom,0px));background:var(--paper);overflow-y:auto;visibility:hidden;transform:translateX(-100%)}
  .filter-panel.is-open{visibility:visible;transform:none}
  .filter-panel .filters{flex:1}
  .panel-foot{position:sticky;bottom:0;padding-block:var(--sp-4);background:var(--paper)}
  html.filters-open{overflow:hidden}
}

/* product detail */
.crumbs{margin-bottom:var(--sp-8)}
.pd{display:grid;gap:var(--sp-12)}
@media (min-width:900px){.pd{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-16);align-items:start}}
.pd-media{max-width:520px;width:100%}
.pd-chips{margin-bottom:var(--sp-4)}
.pd-price{display:flex;align-items:baseline;gap:var(--sp-3);margin-top:var(--sp-6)}
.pd-price .price-num{font:300 clamp(2.5rem,4.5vw,3.5rem)/1 var(--display);letter-spacing:.01em}
.pd-price-note{font-size:.9375rem}
.pd-rows{display:grid;gap:var(--sp-2);margin-top:var(--sp-6)}
.pd-rows div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:var(--sp-4)}
.pd-rows dt{font:500 .9375rem/1.6 var(--display);letter-spacing:.08em;text-transform:uppercase}
.pd-rows dd{color:var(--ink)}
.pd-buy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:var(--sp-8)}
.pd-facts{margin-top:var(--sp-8)}
.pd-notes{display:grid;gap:var(--sp-6);margin-top:var(--sp-8)}
@media (min-width:640px){.pd-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pd-notes p{margin-top:var(--sp-2)}

/* quantity stepper */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--field)}
.step{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:999px;color:var(--ink);cursor:pointer}
.step svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.step-qty{width:3.2ch;min-height:44px;padding:0;background:transparent;border:0;color:var(--ink);font:400 1.0625rem/1 var(--text);text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.step-qty::-webkit-outer-spin-button,.step-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper-lg .step{width:52px;height:52px}
.stepper-lg .step-qty{min-height:52px}

/* cart drawer */
html.cart-open{overflow:hidden}
.cart-scrim{position:fixed;inset:0;z-index:99;background:rgb(17 13 13 / .6);opacity:0}
.cart-scrim.is-open{opacity:1}
.cart{position:fixed;top:0;right:0;bottom:0;z-index:100;display:flex;flex-direction:column;width:min(440px,100vw);background:var(--paper);color:var(--ink-2);transform:translateX(100%);box-shadow:-24px 0 64px -24px rgb(17 13 13 / .6)}
.cart.is-open{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:calc(var(--sp-4) + env(safe-area-inset-top,0px)) var(--sp-6) var(--sp-4);min-height:var(--bar)}
.cart-body{flex:1;overflow-y:auto;padding:0 var(--sp-6) var(--sp-6)}
.cart-lines{display:grid;gap:var(--sp-6)}
.cart-line{display:grid;gap:var(--sp-3)}
.cart-line-main{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3)}
.cart-line-name{flex:1 1 60%;color:var(--ink);font-size:1.0625rem;line-height:1.35}
.cart-line-unit{flex-basis:100%;font-size:.875rem}
.cart-line-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4)}
.cart-line-total{margin-left:auto;min-width:9ch;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.cart-empty{padding-block:var(--sp-6)}
.cart-foot{display:grid;gap:var(--sp-3);padding:var(--sp-6);background:var(--paper-2)}
.cart-nudge{color:var(--accent);font-size:1rem}
.cart-sub{display:flex;justify-content:space-between;gap:var(--sp-4);font:500 1.125rem/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.cart-sub-num{min-width:10ch;text-align:right;font-variant-numeric:tabular-nums}
.cart-note{font-size:.875rem}
.cart-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2)}
.cart-actions .btn[hidden]+.btn{grid-column:1 / -1}

/* checkout */
.co{margin-top:var(--sp-8)}
.co-progress{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);margin:0 0 var(--sp-8);padding:0;list-style:none}
.co-progress li{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:36px;font:500 .9375rem/1.2 var(--display);letter-spacing:.1em;color:var(--ink-2)}
.co-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--line);border-radius:999px;font-variant-numeric:tabular-nums}
.co-progress li[aria-current="step"]{color:var(--ink)}
.co-progress li[aria-current="step"] .co-num{border-color:var(--ink)}
.co-progress li.is-done{color:var(--ink)}
.co-progress li.is-done .co-num{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.co-grid{display:grid;gap:var(--sp-12)}
@media (min-width:900px){.co-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-16);align-items:start}}
.co[data-step="6"] .co-summary{display:none}
.co[data-step="6"] .co-grid{grid-template-columns:minmax(0,1fr)}
.co-step{display:grid;gap:var(--sp-6);max-width:640px}
.co-step h2:focus{outline:none}
.co-nav{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.co-plain{color:var(--ink)}
.co-id{font:500 1.125rem/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.co-summary{padding:clamp(28px,3vw,40px);background:var(--card);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--ink)}
.co-summary .h4{margin-bottom:var(--sp-4)}
.co-lines{display:grid;gap:var(--sp-3)}
.co-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-4)}
.co-line-name{color:var(--ink)}
.co-line-qty{grid-column:1;font-size:.875rem;font-variant-numeric:tabular-nums}
.co-line-total{grid-column:2;grid-row:1;min-width:9ch;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.co-sub{display:flex;justify-content:space-between;margin-top:var(--sp-6);font:500 1.125rem/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.co-sub span:last-child{min-width:10ch;text-align:right;font-variant-numeric:tabular-nums}
.co-tax{margin-top:var(--sp-1);font-size:.9375rem}
.pay-placeholder .p1{color:var(--ink)}

/* =====================================================================================
   MOTION: colour fades on hover, drawers slide, the reviews strip loops, photos drift with scroll.
   Nothing moves under reduced motion; the strip has a pause button (WCAG 2.2.2).
   ===================================================================================== */
.btn,.opt,.tile,.icon-btn,.nav a{transition:background-color 200ms var(--ease),color 200ms var(--ease),border-color 200ms var(--ease),box-shadow 200ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
  .btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .hero .btn-ghost:hover{background:#f6ede2;color:#110d0d}
  .band-ox .btn-ghost:hover{color:var(--oxblood)}
  .tile:hover{background:var(--ink);color:var(--bg);box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 5px var(--ink),inset 0 0 0 6px var(--bg)}
  .opt:not(:has(input:checked)):hover{border-color:var(--ink)}
  .nav a:not(.btn):hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
  .foot-links a:hover{text-decoration:underline;text-underline-offset:4px}
  .social:hover,.icon-btn:hover{background:var(--paper-2)}
  .band-ox .social:hover{background:rgb(246 237 226 / .12)}
  .card-link:hover .card-name{text-decoration:underline;text-underline-offset:4px}
  .chip-filter:hover,.step:hover{background:var(--paper-2)}
}
@media (prefers-reduced-motion:no-preference){
  .cart,.filter-panel{transition:transform 280ms var(--ease),visibility 280ms var(--ease)}
  .cart-scrim{transition:opacity 280ms var(--ease)}
  .card-link .label-tile{transition:transform 200ms var(--ease)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card-link:hover .label-tile{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){.btn,.opt,.tile,.icon-btn,.nav a{transition:none}}

/* scroll-linked drift on the wide photos: a few percent of translateY, tied to scroll position */
@keyframes drift{from{transform:translateY(-3%) scale(1.08)}to{transform:translateY(3%) scale(1.08)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .drift > img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
/* the reviews strip: a seamless constant-speed loop (linear is correct for a marquee); hover and keyboard focus pause it (WCAG 2.2.2) */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){
  .js .mq-inner{animation:marquee 120s linear infinite}
  .js .marquee:hover .mq-inner,.js .marquee:focus-within .mq-inner{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;padding-inline:var(--pad)}
  .mq-dup{display:none}
}

/* 4.9 of 5: the fifth star is filled to 90% over a faint outline of itself */
.star-part{position:relative;display:inline-block;width:26px;height:26px}
.star-part svg{position:absolute;inset:0}
.stars .star-bg{fill:none;stroke:var(--star);stroke-width:1.25}
.star-fg{clip-path:inset(0 10% 0 0)}

/* =====================================================================================
   STOREFRONT PAGES (login, club signup, gift a club, gift cards, balance, legal): the VinesOS redesign.
   Same tokens, bands, frames, and flow as checkout.html; nothing here submits anywhere.
   ===================================================================================== */
.page-banner{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:760px){.page-banner{grid-template-columns:minmax(0,1fr) auto}}
.page-banner .lede{margin-top:var(--sp-4)}
.page-banner .ctas{margin-top:var(--sp-6)}

/* split: photo off one edge, the card overlapping it (the Visit layout) */
.split{display:grid;gap:0}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
  .split > .paper{grid-column:1;grid-row:1}
  .split > .split-card{grid-column:2;grid-row:1;margin-left:-18%;z-index:2}
  .split.flip > .paper{grid-column:2}
  .split.flip > .split-card{grid-column:1;margin:0 -18% 0 0}
}
@media (max-width:959px){.split > .split-card{margin:calc(-1 * var(--lift)) var(--inset) 0;position:relative;z-index:2}}
.split .paper img{aspect-ratio:4/5;object-fit:cover}
@media (max-width:959px){.split .paper img{aspect-ratio:3/2}}
.split-card .h1,.split-card .h2{margin-bottom:var(--sp-4)}

/* the login card's views */
.lg-view + .lg-view{margin-top:0}
.lg-alt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-6);margin-top:var(--sp-6)}
.lg-or{display:flex;align-items:center;gap:var(--sp-4);margin-block:var(--sp-6);font:500 .9375rem/1 var(--display);letter-spacing:.1em;color:var(--ink-2)}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:var(--line)}
.check-row{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;cursor:pointer;color:var(--ink)}
.check-row input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--btn)}
.preview-note{padding:var(--sp-4) var(--sp-6);background:var(--paper-2);border-radius:var(--r);color:var(--ink)}
.preview-note:focus{outline:none}

/* choice cards: a membership, a profile, a card type */
.choices{display:grid;gap:var(--sp-3)}
@media (min-width:640px){.choices.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.choice{position:relative;display:grid;gap:var(--sp-1);padding:var(--sp-4) var(--sp-6);background:var(--field);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;color:var(--ink-2)}
.choice input{position:absolute;top:var(--sp-4);right:var(--sp-4);width:24px;height:24px;margin:0;accent-color:var(--btn)}
.choice-name{padding-right:var(--sp-8);font:400 1.375rem/1.15 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.choice-line{font-size:1rem;line-height:1.45}
.choice-price{font:400 1.125rem/1.3 var(--display);letter-spacing:.04em;color:var(--num)}
.choice:has(input:checked){box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 5px var(--field),inset 0 0 0 6px var(--ink)}
.choice:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.choice .input{margin-top:var(--sp-2)}
.group-title{margin-top:var(--sp-8)}
.group-title:first-child{margin-top:0}
.tier-pick{display:grid;gap:var(--sp-3)}
.tier-pick .opts{margin-top:0}
.tier-desc{font-size:1.0625rem;line-height:1.55;color:var(--ink)}
.tier-ideal{font-size:.9375rem}

/* forms in a flow */
.fl{margin-top:var(--sp-8)}
.fl-grid{display:grid;gap:var(--sp-12)}
@media (min-width:1000px){.fl-grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--sp-16);align-items:start}}
.fl-step{display:grid;gap:var(--sp-6)}
.fl-step h2:focus{outline:none}
@media (min-width:1000px){.fl-aside{position:sticky;top:calc(var(--bar) + var(--sp-6))}}
@media (max-width:999px){.gc-aside{order:-1}.gc-aside .gc-face{max-width:340px}}
.tier .tier-pick{margin-top:auto}
.tier .tier-pick + .btn{margin-top:0}
.fl-aside .ill{width:clamp(140px,14vw,190px);margin-bottom:var(--sp-6)}
.row-3{display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr)}
select.input{padding-right:var(--sp-8)}
.fl .err{margin-top:var(--sp-1)}
.hint{font-size:.9375rem;line-height:1.5}
.counter{display:inline-block;min-width:3ch;text-align:right}
.terms-box{max-height:240px;overflow:auto;padding:var(--sp-4) var(--sp-6);background:var(--field);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.terms-box:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sub-fields{display:grid;gap:var(--sp-6)}

/* the gift card face: an oxblood label with the logo's double rule; the amount follows the field */
.gc-face{--t-bg:var(--oxblood);position:relative;display:grid;align-content:space-between;gap:var(--sp-6);aspect-ratio:1.586/1;width:100%;max-width:420px;padding:clamp(24px,3vw,32px);border-radius:16px;background:var(--oxblood);color:var(--on-ox);box-shadow:inset 0 0 0 1px var(--on-ox),inset 0 0 0 6px var(--oxblood),inset 0 0 0 7px var(--on-ox),0 22px 44px -18px rgb(17 13 13 / .45)}
.gc-face img{width:min(58%,200px);height:auto}
.gc-face-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4)}
.gc-face-label{font:500 .9375rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ox-2)}
.gc-amount{font:300 clamp(2.5rem,5vw,3.5rem)/1 var(--display);letter-spacing:.02em;text-align:right;color:var(--on-ox)}
.amount-field{display:flex;align-items:center;gap:var(--sp-2)}
.amount-field .input{max-width:10rem}
.amount-prefix{font:400 1.375rem/1 var(--display);color:var(--ink)}

/* legal and text pages: one readable column on a menu card, the three pages listed beside it */
.doc-wrap{display:grid;gap:var(--sp-8)}
@media (min-width:1000px){.doc-wrap{grid-template-columns:240px minmax(0,1fr);gap:var(--sp-16);align-items:start}}
.doc-nav{display:grid;gap:var(--sp-1)}
@media (min-width:1000px){.doc-nav{position:sticky;top:calc(var(--bar) + var(--sp-8))}}
.doc-nav a{display:flex;align-items:center;min-height:44px;font:500 1rem/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.doc-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.doc{max-width:760px;padding:clamp(32px,5vw,64px);background:var(--card);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--ink)}
.doc > * + *{margin-top:var(--sp-4)}
.doc .h3{margin-top:var(--sp-12)}
.doc .h3:first-child{margin-top:0}
.doc h3:not(.h3){margin:var(--sp-8) 0 0;font:500 1.125rem/1.4 var(--text);color:var(--ink)}
.tiers.flush{margin-top:0}
.doc p{max-width:68ch;font-size:1.125rem;line-height:1.75;text-wrap:pretty}
.doc a{color:var(--accent);text-underline-offset:3px}
.doc-meta{margin-top:var(--sp-8);font-size:.9375rem}
.choice:not(:has(input:checked)) select{display:none}