:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}[hidden]{display:none!important}img{max-width:100%}

/* Layout: midnight speakeasy. A living canvas of rising bubbles behind frosted glass panels; champagne-gold accents; glassware that pours itself when a recipe opens. */
:root{
  --bg:#0a0a0e; --bg2:#121219; --glass:rgba(20,20,28,.62); --glass-b:rgba(255,255,255,.08); --fg:#f4efe6; --muted:#9a948a; --line:rgba(255,255,255,.1);
  --gold:#d4af5a; --gold2:#f1d48a; --gold-fg:#15110a; --ok:#9fe0b0; --warn:#f0c66a;
  --display:"Italiana",Georgia,serif; --body:"Jost",system-ui,sans-serif;
  --rim:rgba(244,239,230,.85); --ice:#ffffff; --bubble:212,175,90; --shadow:0 30px 60px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:300;font-size:15.5px;line-height:1.6;margin:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 70px;overflow-x:hidden;transition:background .5s,color .5s}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1}
.eyebrow{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:500}

/* nav */
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px 10px}
.logo{display:flex;align-items:center;gap:12px;min-width:0;font-family:var(--display);font-size:1.5rem;letter-spacing:.08em;white-space:nowrap;overflow:hidden}
.logo svg{flex:none}
@media (max-width:380px){.logo{font-size:1.22rem;gap:9px;letter-spacing:.06em}}
.logo svg{width:34px;height:34px}

/* hero */
.hero{padding-block:46px 34px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;align-items:end}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr);padding-block:30px 24px}}
.hero h1{font-size:clamp(3.4rem,8.5vw,6.4rem);letter-spacing:.02em;line-height:.95}
.hero h1 em{font-style:normal;color:transparent;background:linear-gradient(100deg,var(--gold2),var(--gold) 50%,var(--gold2));-webkit-background-clip:text;background-clip:text;background-size:200% 100%;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:200% 0}}
.hero>div>p{color:var(--muted);max-width:44ch;font-size:1.05rem;margin:14px 0 0}
.stat{justify-self:end;text-align:right}
.stat b{display:block;font-family:var(--body);font-size:clamp(3rem,6vw,4.6rem);font-weight:300;letter-spacing:-.02em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:820px){.stat{justify-self:start;text-align:left}}
.reveal{opacity:0;transform:translateY(16px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.reveal.d1{animation-delay:.1s}.reveal.d2{animation-delay:.25s}.reveal.d3{animation-delay:.4s}
@keyframes up{to{opacity:1;transform:none}}

/* panels */
main{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.panel{background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-radius:22px;padding:24px;min-width:0;box-shadow:var(--shadow);transition:background .5s}
.panel h2{font-size:2.1rem;margin-top:6px}
.count{color:var(--muted);font-size:.9rem;margin:4px 0 0}

.group{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.group:first-of-type{border-top:0;padding-top:0;margin-top:14px}
.ghead{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.ghead svg{width:17px;height:17px;color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:transparent;cursor:pointer;font-size:.9rem;user-select:none;transition:border-color .2s,background .3s,transform .2s}
@media (hover:hover){.chip:hover{border-color:var(--gold)}}
.chip input{appearance:none;margin:0;width:12px;height:12px;border:1.5px solid var(--muted);border-radius:50%;flex:none;transition:all .25s}
.chip input:checked{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 25%,transparent)}
.chip:has(input:checked){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent);animation:pop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{50%{transform:scale(1.06)}}
.chip:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:1px}

button{font:inherit;font-weight:500;cursor:pointer;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);padding:9px 18px;transition:border-color .2s,background .3s,transform .2s,color .2s}
@media (hover:hover){button:hover{border-color:var(--gold);transform:translateY(-1px)}}
button.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--gold-fg);border-color:transparent;box-shadow:0 10px 24px -12px var(--gold)}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button[aria-pressed="true"]{background:var(--gold);color:var(--gold-fg);border-color:var(--gold)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 18px}
.tabs button{padding:7px 15px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}

.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px;perspective:1200px}
.drink{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--bg2) 55%,transparent);cursor:pointer;text-align:left;width:100%;font-weight:300;position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease-out,border-color .25s,box-shadow .25s;opacity:0;animation:up .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*60ms)}
.drink::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--gold) 22%,transparent),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
@media (hover:hover){.drink:hover{border-color:color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:0 20px 40px -24px rgba(0,0,0,.7)}.drink:hover::before{opacity:1}}
.drink .glass{width:72px;height:86px;transform:translateZ(20px);filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))}
.drink b{overflow-wrap:anywhere;font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1;display:block;letter-spacing:.01em}
.drink small{display:block;color:var(--muted);font-size:.8rem;margin-top:5px;line-height:1.35}
.missing{display:block;color:var(--warn);font-size:.8rem;margin-top:5px;font-weight:500}
.drink.short{border-style:dashed;background:transparent}
.drink.short .glass{opacity:.45;filter:grayscale(.6)}
.drink .photo{width:96px;height:120px;border-radius:12px;transform:translateZ(20px);box-shadow:0 12px 22px -12px rgba(0,0,0,.7)}
.drink .photo img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.drink:hover .photo img{transform:scale(1.09)}}
.drink.short .photo{opacity:.5;filter:grayscale(.75)}
@media (hover:hover){.drink.short:hover .photo{opacity:.75}}
.photo .pv{position:absolute;inset:0;overflow:hidden;transform:scaleX(var(--fx,1)) scale(var(--s,1))}
.photo .pv img{object-position:var(--ox,50%) var(--oy,50%)}
@media (max-width:420px){.drink{grid-template-columns:84px minmax(0,1fr)}.drink .photo{width:84px;height:105px}}
.drink small .mi{color:var(--warn);font-weight:600;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.tag{display:inline-block;margin-bottom:7px;font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;border-radius:4px}
.tag.c{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold2)}
.tag.m{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.tag.p{background:color-mix(in srgb,var(--fg) 9%,transparent);color:var(--muted)}
/* no photo matches the glass, base and colour: a drawn glass in the drink's own colour instead of a wrong photo */
.photo.icon{display:grid;place-items:center;background:radial-gradient(110% 80% at 50% 100%,color-mix(in srgb,var(--tint) 34%,transparent),transparent 72%),var(--bg2)}
.photo.icon .glass{width:74%;height:auto;max-height:88%;transform:none;opacity:1;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.photo.icon .liq{transform:none}
.drink.short .photo.icon .glass{opacity:1;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.meta .units button{padding:6px 11px;font-size:.75rem;letter-spacing:.06em;white-space:nowrap}
.snote{margin:4px 0 0;color:var(--muted);font-size:.9rem}
/* one thing to buy */
.buy1{padding:16px 18px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 9%,transparent),transparent 70%),var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.buy1 p{margin:6px 0 12px;font-size:1.08rem}
.buy1 p b{color:var(--gold2);font-weight:600}
.buy1 .chips{display:flex;gap:8px;flex-wrap:wrap}
.buy1 .chips button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 16px}
.buy1 .chips small{color:var(--gold);font-weight:600}
/* share my menu, next to the count */
.stat .smw{margin-top:10px}
.shareMenu{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 14px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.shareMenu svg{width:15px;height:15px;color:var(--gold)}
.nameform{display:flex;gap:8px;margin-top:16px}
.nameform input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--fg)}
/* hands-wet mode: one step at a time, thumb-sized buttons at the bottom */
/* the recipe's one large button, right under the photo (a link to the steps on the server-drawn recipe page) */
.hwGo{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:560px;min-height:60px;padding:10px 24px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--gold-fg);font-size:1.19rem;font-weight:500;line-height:1.2;text-decoration:none;box-shadow:0 12px 28px -12px var(--gold)}
.hwGo svg{width:20px;height:20px;flex:none}
.hw{position:fixed;inset:0;z-index:47;background:var(--bg);display:flex;flex-direction:column;gap:18px;padding:max(18px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));-webkit-user-select:none;user-select:none}
.hw>*{width:100%;max-width:760px;margin-inline:auto}
.hw-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hw-name{font-family:var(--display);font-size:1.7rem;line-height:1.1;overflow-wrap:anywhere}
.hw-x{min-width:48px;min-height:48px;padding:0;font-size:1.2rem;flex:none}
.hw-prog{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.hw-prog i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.hw-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;min-height:0;overflow:auto}
.hw-count{color:var(--gold);font-size:.85rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.hw-text{margin:0;font-size:clamp(26px,7vw,42px);line-height:1.35;font-weight:300;color:var(--fg)}
.hw-text b{font-weight:600;color:var(--gold2)}
.hw-enjoy{margin:0;font-family:var(--display);font-size:clamp(2rem,8vw,3rem);color:var(--gold2)}
.hw-nav{display:grid;grid-template-columns:1fr 2fr;gap:12px}
.hw-nav button{min-height:68px;font-size:1.15rem;border-radius:20px}
.hw-nav button:disabled{opacity:.35;cursor:default;transform:none}
.empty{color:var(--muted);padding:30px 14px;text-align:center;grid-column:1/-1;border:1px dashed var(--line);border-radius:18px}
.section-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:34px;margin-bottom:12px}
.section-h h3{font-size:1.7rem}

/* recipe */
.recipe{display:grid;gap:22px}
.rhead{display:grid;grid-template-columns:180px minmax(0,1fr);gap:26px;align-items:center}
@media (max-width:520px){.rhead{grid-template-columns:120px minmax(0,1fr);gap:16px}}
.rhead .glass{width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.5))}
.recipe h2{font-size:clamp(2.4rem,6vw,3.8rem)}
.meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.88rem;margin-top:10px}
.meta span{display:inline-flex;align-items:center;gap:6px}
.meta svg{width:15px;height:15px;color:var(--gold)}
.need{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.need span{padding:6px 13px;border-radius:999px;border:1px solid var(--line);font-size:.88rem;background:color-mix(in srgb,var(--bg2) 50%,transparent)}
.need span.o{color:var(--muted);border-style:dashed}
.steps{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:16px;counter-reset:s}
.steps li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;font-size:1.05rem;opacity:0;transform:translateX(-10px);animation:slide .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.25s + var(--i)*140ms)}
@keyframes slide{to{opacity:1;transform:none}}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--body);font-weight:300;font-size:1.45rem;letter-spacing:.04em;color:var(--gold);line-height:1;padding-top:2px;font-variant-numeric:lining-nums tabular-nums}
.back{align-self:start}
.recipe .back{display:inline-flex;align-items:center;justify-self:start;min-height:44px;margin-left:-6px;padding:0 6px;border:0;border-radius:10px;background:none;color:var(--fg);font-size:1rem;font-weight:400;text-decoration:none}
@media (hover:hover){.recipe .back:hover{color:var(--gold2);transform:none}}
/* pour animation */
.liq{transform:translateY(90px);transform-box:fill-box}
.pour .liq{transform:translateY(0);transition:transform 1.4s cubic-bezier(.3,.8,.3,1)}
.bub{animation:rise 2.2s ease-in infinite;transform-box:fill-box;transform-origin:center}
@keyframes rise{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(-50px);opacity:0}}

/* bartender */
.bar{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.bar h3{font-size:1.7rem;display:flex;align-items:center;gap:10px}
.bar h3 svg{width:22px;height:22px;color:var(--gold)}
.bar textarea{width:100%;min-height:72px;font:inherit;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--bg2) 60%,transparent);color:var(--fg);resize:vertical;margin-top:12px}
.bar textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.answer{white-space:pre-wrap;margin-top:14px;padding:16px 18px;border-left:2px solid var(--gold);background:color-mix(in srgb,var(--bg2) 55%,transparent);border-radius:0 14px 14px 0;min-width:0}
.note{color:var(--muted);font-size:.88rem;margin:4px 0 0}
/* search + paging + collapsible shelf */
.search{position:relative;margin-top:14px}
.search svg{position:absolute;left:14px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input{width:100%;font:inherit;font-weight:400;padding:11px 14px 11px 40px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 60%,transparent);color:var(--fg);transition:border-color .2s,box-shadow .2s}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent)}
details.group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;margin-bottom:0;padding:2px 0}
details.group>summary::-webkit-details-marker{display:none}
details.group>summary svg{width:17px;height:17px;color:var(--gold)}
details.group>summary .n{margin-left:auto;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
details.group>summary .n b{color:var(--gold);font-weight:600}
details.group>summary .chev{width:14px;height:14px;color:var(--muted);transition:transform .3s}
details.group[open]>summary .chev{transform:rotate(180deg)}
details.group[open]>summary{margin-bottom:10px}
details.group .chips{animation:up .4s cubic-bezier(.2,.7,.2,1)}
.chip.hide{display:none}
.more{display:flex;justify-content:center;margin-top:16px}
.libnote{color:var(--muted);font-size:.85rem;margin:8px 0 0}
.libnote b{color:var(--gold);font-weight:600}
.enjoy{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px;padding:18px 10px;border-top:1px solid var(--line);font-family:var(--display);font-size:clamp(1.6rem,4vw,2.1rem);color:var(--gold2);opacity:0;animation:up .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.35s + var(--i)*140ms)}
.enjoy svg{width:44px;height:22px;color:var(--gold)}
.steps li:last-child span::before{content:"Final step · ";font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-right:2px;vertical-align:2px}

/* opening */
#intro{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .2s ease,visibility .2s}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#intro svg{width:min(30vw,140px);height:auto;overflow:visible;color:var(--gold)}
#intro .draw{stroke-dasharray:100;stroke-dashoffset:100;animation:draw .55s cubic-bezier(.4,0,.2,1) forwards}
#intro .fill{opacity:0;animation:fadein .3s .35s forwards}
#intro .dot{opacity:0;animation:fadein .2s .45s forwards}
#intro .word{margin-top:24px;font-family:var(--display);font-size:clamp(1.3rem,5.6vw,2.4rem);letter-spacing:.24em;padding-left:.24em;text-align:center;color:var(--gold);opacity:0;transform:translateY(8px);animation:up .45s cubic-bezier(.2,.7,.2,1) .15s forwards}
#intro .sub{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;text-align:center;color:var(--muted);margin-top:12px;opacity:0;animation:fadein .3s .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
html.intro-on .reveal{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){#intro{display:none}}

/* stamp */
.side{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:16px}
@media (max-width:820px){.side{justify-self:stretch;flex-direction:row;align-items:center;justify-content:space-between}}
.stamp{width:112px;height:112px;color:var(--gold);flex:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.12)) drop-shadow(0 -1px 0 rgba(0,0,0,.4))}
.stamp svg{width:100%;height:100%;overflow:visible}
.stamp .rot{transform-origin:60px 60px;animation:spin 48s linear infinite}
.stamp .ring{font-family:var(--body);font-size:13px;font-weight:500;fill:currentColor}   /* 13 of 120 units at 112px = 12.1px on screen */
@keyframes spin{to{transform:rotate(360deg)}}

/* compact shelf + picker */
.shelf{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;min-height:40px;align-content:flex-start}
.shelf .have{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 13px;border-radius:999px;background:color-mix(in srgb,var(--gold) 16%,transparent);border:1px solid var(--gold);font-size:.9rem;animation:pop .35s cubic-bezier(.3,1.5,.5,1)}
.shelf .have button{border:0;padding:2px 7px;color:var(--gold);font-size:1rem;line-height:1;background:transparent;border-radius:50%}
.shelf .have button:hover{background:color-mix(in srgb,var(--gold) 25%,transparent);transform:none}
.shelf .bare{color:var(--muted);font-style:italic;padding:6px 0}
.picker{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .35s,transform .4s cubic-bezier(.2,.7,.2,1),visibility .35s}
.picker.open{opacity:1;visibility:visible;transform:none}
.pk-head{flex:none;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px))}
.pk-head .row{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:900px;margin:0 auto}
.pk-head h2{font-size:1.7rem}
.pk-head .search{max-width:900px;margin:12px auto 0}
.pk-body{overflow:auto;overscroll-behavior:contain;flex:1;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(110px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.pk-body>div{max-width:900px;margin:0 auto}
.pk-foot{position:absolute;left:0;right:0;bottom:0;padding:30px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,var(--bg) 45%);display:flex;justify-content:center;pointer-events:none}
.pk-foot button{pointer-events:auto;padding:12px 28px;font-size:1rem}
body.locked{overflow:hidden}

/* tonight's pick */
.pick{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;margin:16px 0 4px;padding:18px 20px;border-radius:18px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 14%,transparent),transparent 60%);position:relative;overflow:hidden;cursor:pointer;text-align:left;width:100%;color:var(--fg);font:inherit;font-weight:300;transition:transform .25s,border-color .25s}
@media (hover:hover){.pick:hover{transform:translateY(-2px);border-color:var(--gold)}}
.pick::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.06) 50%,transparent 65%);background-size:250% 100%;animation:shimmer 6s linear infinite;pointer-events:none}
.pick .glass{width:120px;height:144px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.5))}
.pick b{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1;display:block;margin:6px 0 8px}
.pick p{margin:0;color:var(--muted)}
.pick .cta{margin-top:12px;display:inline-block;padding:8px 16px;border-radius:999px;background:var(--gold);color:var(--gold-fg);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:520px){.pick{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:14px}.pick .glass{width:84px;height:100px}}

/* sheets (shopping list, share card) */
.sheet{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.sheet-box{position:relative;width:min(560px,100%);max-height:88vh;max-height:88dvh;overflow:auto;overscroll-behavior:contain;background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow);animation:up .4s cubic-bezier(.2,.7,.2,1)}
.sheet-box h3{font-size:1.9rem;margin:4px 0 4px}
.sheet .x{position:absolute;top:12px;right:12px;border:0;background:transparent;color:var(--muted);font-size:1.2rem;padding:6px 10px}
.shop{list-style:none;padding:0;margin:14px 0}
.shop li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-weight:400}
.shop li span:last-child{color:var(--muted);font-size:.85rem;white-space:nowrap}
.shop li b{color:var(--gold);font-weight:600}
.cardimg{width:auto;max-width:100%;max-height:64vh;border-radius:14px;border:1px solid var(--line);display:block;margin:12px auto 0}
.rtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.units{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.units button{border:0;border-radius:0;padding:6px 14px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.units button:hover{transform:none}
.units button[aria-pressed="true"]{background:var(--gold);color:var(--gold-fg)}
.section-h .sm{margin-left:auto;padding:6px 14px;font-size:.8rem}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(10px);z-index:60;background:var(--gold);color:var(--gold-fg);padding:10px 18px;border-radius:999px;font-weight:600;font-size:.9rem;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;width:max-content;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}

/* photography */
.hero{position:relative}
.hero-bg{position:absolute;left:50%;top:-120px;width:100vw;height:calc(100% + 190px);transform:translateX(-50%);z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 40%,transparent 96%);mask-image:linear-gradient(#000 40%,transparent 96%)}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:0;transform:scale(1.12);transition:opacity 1.6s ease;will-change:transform;animation:kb 36s ease-in-out infinite alternate}
.hero-bg img.in{opacity:.85}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 45%,color-mix(in srgb,var(--bg) 20%,transparent) 100%),linear-gradient(color-mix(in srgb,var(--bg) 70%,transparent),transparent 35%,var(--bg) 100%)}
@keyframes kb{from{transform:scale(1.12) translate(0,0)}to{transform:scale(1.02) translate(1.5%,-1.5%)}}
.photo{position:relative;overflow:hidden;border-radius:18px;background:var(--bg2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent),inset 0 -60px 60px -40px rgba(0,0,0,.55);border-radius:inherit;pointer-events:none}
.rhead .photo{width:100%;aspect-ratio:4/5;clip-path:inset(0 100% 0 0 round 18px);animation:wipe 1.1s cubic-bezier(.7,0,.2,1) .1s forwards;box-shadow:var(--shadow)}
.rhead .photo img{transform:scale(1.12);animation:settle 1.6s cubic-bezier(.2,.7,.2,1) .1s forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0 round 18px)}}
@keyframes settle{to{transform:scale(1)}}
.rhead .mini{position:absolute;left:10px;bottom:10px;width:46px;height:56px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));z-index:1}
.pick .photo{width:120px;height:144px;border-radius:14px}
.pick .photo img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.pick:hover .photo img{transform:scale(1.08)}}
@media (max-width:520px){.pick .photo{width:84px;height:100px}}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none;transform:none}.rhead .photo{clip-path:none;animation:none}.rhead .photo img{animation:none;transform:none}}

/* age screen */
#gate{position:fixed;inset:0;z-index:49;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(ellipse 120% 60% at 50% 0%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 60%),var(--bg);transition:opacity .5s,visibility .5s}
#gate.done{opacity:0;visibility:hidden;pointer-events:none}
/* one question, two answers (pm-age): the footer keeps "Please drink responsibly" */
#gate .box{width:100%;max-width:400px;padding:0 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px}
#gate svg{width:64px;height:64px;color:var(--gold)}
#gate h2{font-size:36px;line-height:1.15;letter-spacing:.01em}
#gate .acts{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:8px}
#gate .acts button{min-height:56px;padding:0 18px;font-size:18px}
#gate .acts button:not(.primary){border-color:rgba(255,255,255,.16)}
#intro{cursor:pointer}
.sig .fine{max-width:56ch;line-height:1.55;margin-top:6px;font-size:.78rem}
.sig .modeNote{display:none;margin-top:12px}
html.mock .sig .modeNote{display:inline-flex}
html.mock .tabs button[data-f="cocktail"],html.mock .tabs button[data-f="mocktail"],html.mock .preset[data-alc]{display:none}
html.mock #groups details.group[data-alc],html.mock #groups .chip[data-alc]{display:none}
.sheet-box .list{margin-top:16px}
.eggnote{margin:10px 0 0;padding:10px 14px;border-left:2px solid var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:0 10px 10px 0;font-size:.88rem;color:var(--fg)}
/* status-bar safety on installed iPhone app + name under each recipe */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:35;background:var(--bg);pointer-events:none}
#recipeView{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 74px)}   /* clear of the pinned Home row (60px) */
.enjoy{flex-direction:column;gap:8px}
.enjoy-row{display:flex;align-items:center;justify-content:center;gap:14px}
.enjoy-by{font-family:var(--body);font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:center}
.enjoy-by b,.enjoy-by a{color:var(--gold);font-weight:600;white-space:nowrap}
.enjoy-by a{display:inline-block;padding:13px 2px;margin:-13px 0;text-underline-offset:3px}   /* a thumb-sized tap, same line height */
/* share, icon only */
.navR{display:flex;align-items:center;gap:8px}
.shareTop{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:40px;padding:8px 11px;font-size:.82rem}
.shareTop svg{width:17px;height:17px;color:var(--gold)}
.shareFoot{display:inline-flex;align-items:center;gap:9px;margin:18px 0 6px;padding:12px 22px;font-size:.95rem}
.shareFoot svg{width:17px;height:17px}
a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:500;border-radius:999px;border:1px solid var(--line);padding:9px 18px;text-decoration:none;color:var(--fg)}
a.btn.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--gold-fg);border-color:transparent}
.linkbox{margin-top:12px;padding:10px 14px;border:1px dashed var(--line);border-radius:12px;font-weight:500;user-select:all;-webkit-user-select:all;color:var(--gold)}

/* community recipes, form, ratings */
.tag.u{background:color-mix(in srgb,var(--fg) 9%,transparent);color:var(--fg);margin-left:6px}
.drink .by{display:block;font-size:.78rem;color:var(--gold2);margin-top:5px;font-weight:500;overflow-wrap:anywhere}
.drink .rtc{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:600;color:var(--gold2);margin-top:5px}
.rtc svg,.meta .rt svg{width:13px;height:13px}
.meta .rt{color:var(--gold2);font-weight:600}
.tabs .addTab{border-color:var(--gold);color:var(--gold2)}
.credit{display:flex;gap:14px;align-items:center;margin:-6px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--gold) 8%,transparent);max-width:440px}
.credit .av{width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--gold-fg);display:grid;place-items:center;font-family:var(--display);font-size:1.35rem;flex:none}
.credit small{display:block;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.credit b{font-weight:600;overflow-wrap:anywhere}
.credit .cl{font-size:.86rem;color:var(--muted);overflow-wrap:anywhere}
.credit a{color:var(--gold2);font-weight:500;text-decoration:none}
.need span.x{border-style:dashed}
.addPanel{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.addPanel h2{font-size:2.1rem;margin-top:6px}
.addPanel .note{max-width:54ch}
.addPanel .primary{padding:12px 24px;font-size:.98rem}
.af fieldset{border:0;padding:0;margin:0 0 30px;min-width:0}
.af legend{font-family:var(--display);font-size:1.7rem;margin-bottom:6px;padding:0}
.af .fld{display:block;margin-top:14px}
.af .fld>span{display:block;font-size:.8rem;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.af .fld i{font-style:normal;opacity:.75}
.af .in{width:100%;font:inherit;font-weight:400;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 60%,transparent);color:var(--fg);font-size:16px}
.af .in:focus{outline:2px solid var(--gold);outline-offset:1px}
.af textarea.in{min-height:180px;resize:vertical;line-height:1.55}
.af select.in{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.af .seg{display:flex;gap:8px;flex-wrap:wrap}
.af .seg label{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:.92rem}
.af .seg label:has(input:checked){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.af .seg input{accent-color:var(--gold);margin:0}
.af .shelf{margin-top:6px}
.af .search{margin:12px 0 10px}
.af .hint{font-size:.78rem;color:var(--muted);margin:0 0 8px}
.af .consent{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.5;cursor:pointer;padding:14px;border:1px solid var(--line);border-radius:16px}
.af .consent input{width:20px;height:20px;accent-color:var(--gold);flex:none;margin:2px 0 0}
.af .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.af .bad{border-color:var(--warn)!important;outline-color:var(--warn)!important}
.aferr{color:var(--warn);font-weight:500;margin:16px 0 0}
.afDone{text-align:center;padding:48px 10px;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:520px;margin:0 auto}
.afDone svg{width:66px;height:66px;color:var(--gold)}
.afDone h2{font-size:2.2rem}
.afDone p{color:var(--muted);margin:0}
.rate{margin-top:18px;padding:20px 16px;border:1px solid var(--line);border-radius:18px;text-align:center;background:color-mix(in srgb,var(--bg2) 45%,transparent)}
.rate .stars{display:inline-flex;gap:4px;margin-top:8px}
.rate .stars button{border:0;padding:6px;background:transparent;color:var(--line);line-height:0;border-radius:50%}
.rate .stars button svg{width:34px;height:34px;stroke:var(--muted);stroke-width:1.2}
.rate .stars button.on{color:var(--gold)}
.rate .stars button.on svg{stroke:var(--gold)}
@media (hover:hover){.rate .stars button:hover{transform:scale(1.12)}}
.rate p{margin:6px 0 0;color:var(--muted);font-size:.88rem}
.rate .rsign{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:14px}
.rate .rsign p{color:var(--fg)}
.rate .gbtn{min-height:44px;display:flex;justify-content:center;color-scheme:light}  /* Google's button frame is light: a dark page would make Chrome paint it on a white box */
.rate small{color:var(--muted);font-size:.78rem;line-height:1.5}
.rate small a{color:var(--gold);display:inline-block;padding:10px 4px;margin:-10px 0}
.rate .rwho{font-size:.8rem}
.rate .rwho button{border:0;background:transparent;color:var(--gold);font:inherit;text-decoration:underline;min-height:42px;padding:0 8px}
/* maker credit */
.hero p.maker{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500}
.hero p.maker b{color:var(--gold);font-weight:600;white-space:nowrap}
.mline{width:34px;height:1px;background:var(--gold);flex:none}
.sig{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;margin-top:64px;padding-top:36px;position:relative}
.sig::before{content:"";position:absolute;top:0;left:50%;width:min(420px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.sig svg{width:30px;height:30px;margin-bottom:6px}
.sig b{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:.03em;line-height:1.1}
.sig small{color:var(--muted);font-size:.8rem;margin-top:10px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.drink,.steps li,.enjoy{opacity:1;transform:none}.stamp .rot{animation:none}.liq{transform:none}}

/* ---------- site footer: Your Next Drink ---------- */
@view-transition{navigation:auto}
.yfoot{position:relative;z-index:1;max-width:1180px;margin:56px auto 0;padding:32px 0 calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.yfoot .mark{display:flex;align-items:center;gap:12px;margin-bottom:4px;font-family:var(--display);font-size:1.35rem;letter-spacing:.14em;color:var(--fg)}
.yfoot .mark svg{width:30px;height:30px;flex:none}
.yfoot small{color:var(--muted);font-size:.8rem}
.yfoot small b{color:var(--gold);font-weight:500}
.yfoot .about{margin:8px 0 2px;max-width:24em;padding:0 16px;font-family:"Cormorant",Georgia,serif;font-style:italic;font-weight:500;font-size:1.25rem;line-height:1.35;color:var(--fg);text-wrap:balance}

/* ---------- the home screen (Oct 2026): first visit, the menu and its rows, cards that press, pour and burst ----------
   Which screen shows is set on <html> before the first paint (the script under #intro reads pm-have) and kept by shelfView():
   html.v-first  the shelf is empty: the logo, "What's at home?", the quick-start cards and "I'll pick myself", nothing else
   html.v-menu   a sticky header (Home, count, Edit shelf, search), the filter tabs, the cards, the rows under them
   html.rec      a recipe is open (or its address was opened): the logo row and the recipe; Back clears it (hideRecipe) */
.first,.mhead{display:none}
html.v-first:not(.rec) .first{display:flex}
html.v-menu:not(.rec) .mhead{display:flex}
html.v-menu:not(.rec) nav{display:none}
html.v-first:not(.rec) .wrap>:not(nav):not(.first),html.v-first:not(.rec) body>footer,html.v-first:not(.rec) .navR{display:none}
html.rec .icta,html.rec #listView{display:none}
html.v-menu main[aria-busy="true"]{min-height:100vh}   /* the footer stays below the screen until the cards are in */
nav{padding-block:18px 0}
.logo{gap:10px;min-height:44px;font-size:19px;letter-spacing:.14em}   /* a small logo row */
.logo svg{width:26px;height:26px}
/* Home: the logo is a link home on every screen; on a recipe the logo row stays pinned at the top with a Home button */
a.logo{color:inherit;text-decoration:none}
.homeBtn{display:none}
html.rec nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;min-height:60px;padding-block:8px;
  margin:0 calc(-1*max(16px,env(safe-area-inset-right,0px))) 0 calc(-1*max(16px,env(safe-area-inset-left,0px)));
  padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px));border-bottom:1px solid rgba(255,255,255,.08);background:rgba(10,10,14,.92)}
html.rec .homeBtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border:1px solid var(--line);border-radius:999px;color:var(--fg);font-size:16px;text-decoration:none}
html.rec .homeBtn svg{width:20px;height:20px;color:var(--gold)}
html.rec .logo{flex:1;justify-content:center}
html.rec .logo .lw{display:none}
@media (max-width:380px){.logo{font-size:19px;gap:10px;letter-spacing:.14em}}
@media (hover:hover){.edit:hover,.self:hover,.xbtn:hover,.clearAll:hover{transform:none}}

/* first visit: the five quick-start shelves as big cards (PRESETS); a tap pours one (pour()) and the menu rises in */
.first{flex-direction:column;gap:22px;max-width:560px;margin:0 auto;padding:22px 4px 24px}
.first h1{margin-top:4px;font-size:46px;line-height:1.05}
.fcards{display:flex;flex-direction:column;gap:12px}
.fcard{display:flex;align-items:center;gap:12px;width:100%;min-height:88px;padding:14px 18px;border-radius:18px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:color-mix(in srgb,var(--gold) 9%,transparent);color:var(--fg);text-align:left;font-weight:400}
.fcard .ft{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fcard b{font-size:21px;font-weight:500;line-height:1.2}
.fcard small{font-size:15px;line-height:1.35;color:#b3ac9f}
.fcard .pi{position:relative;flex:none;width:26px;height:26px}
.fcard .pi svg{position:absolute;inset:0;width:26px;height:26px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pchev{stroke:var(--gold);stroke-width:2}
.ptick{stroke:#fff3cf;stroke-width:2.6;opacity:0}
html.mock .fcard[data-alc]{display:none}
.self{align-self:center;min-height:44px;padding:0 12px;border:0;border-radius:6px;background:none;color:var(--gold2);font-size:16px;font-weight:400;text-decoration:underline;text-underline-offset:4px}
/* press: the card sinks and its edge glows gold within 80ms, then springs back (quick-start cards and drink cards) */
.yc{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform .42s cubic-bezier(.3,1.6,.5,1),border-color .2s,box-shadow .2s}
.yc:active{transform:scale(.975);border-color:var(--gold2)!important;box-shadow:0 0 0 1px rgba(241,212,138,.45),0 10px 30px -12px rgba(212,175,90,.7);transition-duration:.08s}
/* pour: gold fills the tapped card from the bottom, a tick draws itself, the rest slide away */
.yc .pfill{position:absolute;inset:0;transform:translateY(101%);background:linear-gradient(180deg,rgba(241,212,138,.4),rgba(212,175,90,.2));pointer-events:none}
.yc .pfill::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,240,200,.9);box-shadow:0 0 14px 2px rgba(241,212,138,.8)}
.yc.pour{border-color:var(--gold2)!important;box-shadow:0 12px 34px -14px rgba(212,175,90,.8)}
.yc.pour .pfill{animation:fillup .6s cubic-bezier(.25,.7,.2,1) forwards}
.yc.pour .ptick{opacity:1}
.yc.pour .ptick path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .32s ease-out .45s forwards}
.yc.pour .pchev{opacity:0}
.yc.away{animation:away .32s ease-in forwards}
.fadeT{animation:fadeT .3s ease-in .45s forwards}
.leaveOut{animation:leave .2s ease-in forwards}
.menuIn{animation:riseIn .45s cubic-bezier(.2,.8,.2,1) both}
html.pouring .first{pointer-events:none}
@keyframes fillup{to{transform:translateY(0)}}
@keyframes away{to{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes fadeT{to{opacity:0;transform:translateY(-8px)}}
@keyframes leave{to{opacity:0;transform:translateY(-14px)}}
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* the menu's header: one sticky line; the magnifier swaps it for the search box and an X (openSearch / closeSearch) */
.mhead{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;align-items:center;gap:10px;min-height:64px;
  margin:0 calc(-1*max(16px,env(safe-area-inset-right,0px))) 0 calc(-1*max(16px,env(safe-area-inset-left,0px)));
  padding:10px max(12px,env(safe-area-inset-right,0px)) 10px max(12px,env(safe-area-inset-left,0px));border-bottom:1px solid rgba(255,255,255,.08);background:rgba(10,10,14,.92)}
.hhome{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;height:44px;padding:0 13px 0 10px;border:1px solid var(--line);border-radius:999px;color:var(--fg);font-size:15px;text-decoration:none}   /* Home, as on a recipe */
.hhome svg{width:20px;height:20px;color:var(--gold)}
.mhead.open .hhome{width:44px;padding:0}.mhead.open .hlab{display:none}   /* searching: just the house, the box gets the room */
.hline{flex:1;min-width:0;margin:0;font-size:16px;line-height:1.3;font-weight:400}
.hline b{display:inline-block;font-weight:500;color:var(--gold2);font-variant-numeric:tabular-nums}   /* as wide as its new number while it rolls (countTo) */
.hline .h0,.hline.none .hn{display:none}
.hline.none .h0{display:inline}
.hdot{color:var(--muted)}
@media (max-width:380px){.mhead{gap:8px}.hline{font-size:15px}}   /* two short lines beside Home on a 360px phone, same header height */
.edit{position:relative;padding:0;border:0;border-radius:0;background:none;color:var(--gold2);font-size:inherit;font-weight:400;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.edit::after{content:"";position:absolute;inset:-12px -6px}   /* a thumb-sized target in a line of text */
html:not(.ready) .hline{visibility:hidden}   /* the count arrives with the recipes */
.mhead .hsearch{flex:1;min-width:0;margin:0;max-width:none}
.mhead:not(.open) .hsearch,.mhead.open .hline{display:none}
.mhead .search{margin:0}
.mhead .search input{height:44px;padding:0 16px;border-color:color-mix(in srgb,var(--gold) 60%,transparent);background:rgba(18,18,25,.8)}
.sbtn{flex:none;width:44px;height:44px;padding:0;display:grid;place-items:center;border-color:rgba(255,255,255,.12)}
.sbtn svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mhead.open .sbtn .i-s,.mhead:not(.open) .sbtn .i-x{display:none}
.mhead .ldline{position:absolute;left:0;right:0;bottom:-1px;margin:0;max-width:none}
.icta{display:flex;justify-content:center}
#results{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 72px)}
html:not(.rec) #results{padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#listView .tabs{gap:8px;margin:0 -16px;padding:14px 18px 12px}
.tabs button{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;border-color:rgba(255,255,255,.14)}
.tabs button[aria-pressed="true"]{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--gold-fg);border-color:transparent;font-weight:500}
#listView .tabs .fc{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--gold);color:var(--gold-fg);font-size:12px;font-weight:600}
#listView .tabs button[aria-pressed="true"] .fc{background:rgba(0,0,0,.18)}
.lhead{margin:2px 0 16px}

/* drink cards: the wrapper rises in (so the card itself is free to press), heart and share on the right */
#listView .list,.sheet-box .list{gap:10px}
.dw{opacity:0;animation:up .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*60ms)}
.drink{opacity:1;animation:none;grid-template-columns:84px minmax(0,1fr);gap:14px;padding:10px 12px}
.drink .photo{width:84px;height:105px;border-radius:12px}
.drink .dt{min-width:0;padding-right:34px}
.drink b{font-family:var(--body);font-weight:500;font-size:19px;line-height:1.2;letter-spacing:0}
.drink small{font-size:14px}
.drink .tag{font-size:10px;line-height:1.4;margin-bottom:6px}
.drink.pick1{border-color:color-mix(in srgb,var(--gold) 55%,transparent)}   /* tonight's pick, first in the list */
.drink.pick1 .tag.m,.drink.pick1 .tag.p{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold2)}
@media (max-width:380px){.drink.pick1 .tag{letter-spacing:.08em}}   /* "Tonight's pick · cocktail" on one line at 360px */
.dw .fav,.dw .cshare{position:absolute;z-index:2;top:6px;right:6px;left:auto;width:42px;height:42px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--muted);opacity:1;animation:none}
.dw .cshare{top:50px}
.dw .fav::before{display:none}
.dw .fav svg{width:21px;height:21px}
.cshare svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dw .fav[aria-pressed="true"]{background:transparent;color:var(--gold)}
/* heart: on save it pops and six gold bubbles burst (heartPop); the Favourites count bumps */
.hz{display:flex}
.hz.pop{animation:hpop .45s cubic-bezier(.3,1.6,.5,1)}
.burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--gold2);opacity:0;animation:fly .6s cubic-bezier(.2,.7,.3,1) forwards}
.burst i:nth-child(even){left:-2px;top:-2px;width:4px;height:4px;background:#fff3cf}
.burst i:nth-child(1){--dx:0px;--dy:-24px}
.burst i:nth-child(2){--dx:20px;--dy:-12px}
.burst i:nth-child(3){--dx:20px;--dy:12px}
.burst i:nth-child(4){--dx:0px;--dy:24px}
.burst i:nth-child(5){--dx:-20px;--dy:12px}
.burst i:nth-child(6){--dx:-20px;--dy:-12px}
.bump{animation:bump .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes hpop{0%{transform:scale(.6)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
@keyframes bump{50%{transform:scale(1.35)}}

/* below the list: one tappable row each, closed until tapped (Just this bottle, Almost there...) */
.rows{margin-top:18px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--bg2) 55%,transparent)}
.rows:not(:has(>.xrow:not([hidden]))){display:none}
.xrow:not([hidden])~.xrow{border-top:1px solid rgba(255,255,255,.08)}
.xbtn{width:100%;min-height:56px;display:flex;align-items:center;gap:10px;padding:0 16px;border:0;border-radius:18px;background:transparent;color:var(--fg);font-size:17px;font-weight:400;text-align:left}
.xbtn .xl{flex:1;min-width:0}
.xbtn .xb{min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gold2);font-size:15px}
.xbtn svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.xbtn[aria-expanded="true"] svg{transform:rotate(90deg)}
.xbody{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px}
.xbody>p{margin:0;font-size:15px;color:#c9c2b6}
.xbody>p b{color:var(--gold2);font-weight:600}
.xbody .chips{gap:8px}
.xbody .chips button{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;font-size:15px;font-weight:400;border-color:rgba(255,255,255,.14)}
.xbody .chips small{color:var(--gold2);font-size:15px;font-weight:500}
.xbody>.primary,.xbody>div>.sm{align-self:flex-start}
.xbody>.primary{min-height:44px;padding:0 20px}
.xbody .more{margin-top:6px}

/* the picker: the 12 most-used items and your shelf first, Show all opens the six groups, the search looks in all of them */
.pk-lrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.pk-lrow .qlabel{margin:0}
.clearAll{min-height:42px;padding:0 6px;border:0;border-radius:6px;background:none;color:var(--gold2);font-size:14px;font-weight:400;text-decoration:underline;text-underline-offset:3px}
#shelfList{display:contents}
#picker .chip{min-height:42px;padding:0 14px 0 10px;gap:8px;font-size:15px}
#picker .chip input{width:16px;height:16px}
.showAll{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin-top:16px;font-size:16px;font-weight:400;border-color:rgba(255,255,255,.14)}
.showAll svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s}
.showAll[aria-expanded="true"] svg{transform:rotate(180deg)}
.picker.q #pkTop{display:none}
#groups{margin-top:8px}
.pk-quick{margin-top:22px}
#presets{display:flex;flex-wrap:wrap;gap:8px}
#presets .preset{display:inline-flex;flex-direction:row;align-items:center;width:auto;min-height:42px;padding:0 14px;border-radius:999px;border-color:rgba(255,255,255,.14);background:transparent}
#presets .preset b{font-size:14px;font-weight:400}
#presets .preset small,html.mock #presets .preset[data-alc]{display:none}
#presets .preset[aria-pressed="true"]{border-color:color-mix(in srgb,var(--gold) 70%,transparent);background:color-mix(in srgb,var(--gold) 18%,transparent)}
/* the credit badge, in the footer above Share with friends */
.sig .stamp{margin:0 auto 12px}
.sig .stamp svg{width:100%;height:100%;margin:0}
@media (prefers-reduced-motion:reduce){.dw{opacity:1;transform:none}}

/* ---------- hero search, quick-start shelf, favourites, nice-to-have ---------- */
.hero-bg{max-height:720px}
.hsearch{position:relative;z-index:6;margin-top:18px;max-width:560px}   /* above the shelf card, which is its own layer (blur) */
.hsearch .search{margin-top:0}
.hsearch .search input{padding-block:13px;font-size:16px;background:color-mix(in srgb,var(--bg2) 78%,transparent)}
/* on the site the recipes arrive after the page paints (/data/recipes.json): a thin gold line under the search box until then;
   it takes no room (negative bottom margin), so nothing moves when it goes */
.ldline{max-width:520px;height:2px;margin:10px 0 -12px 20px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold2),transparent) no-repeat;background-size:35% 100%;animation:ld 1.1s ease-in-out infinite}
@keyframes ld{from{background-position:-40% 0}to{background-position:140% 0}}
main[aria-busy="true"]{visibility:hidden}
/* a recipe page's recipe, taken over by the app once the recipes are here: shown at once, without the entry animations again */
#recipeView.calm .rhead .photo{clip-path:none;animation:none}#recipeView.calm .rhead .photo img{transform:none;animation:none}
#recipeView.calm .steps li,#recipeView.calm .enjoy{opacity:1;transform:none;animation:none}
.sdrop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:var(--bg2);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;padding:4px}
.sdrop button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;border-radius:12px;padding:10px 12px;text-align:left;font-weight:400}
.sdrop button:focus-visible{background:color-mix(in srgb,var(--gold) 12%,transparent);transform:none}
@media (hover:hover){.sdrop button:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);transform:none}}
.sdrop .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdrop .st{flex:none;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:3px 9px;border-radius:999px}
.sdrop .st.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.sdrop .st.no{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.sdrop .all{color:var(--gold2);font-weight:500;justify-content:center;border-top:1px solid var(--line);border-radius:0 0 12px 12px}
.sdrop .none{padding:12px;color:var(--muted);font-size:.9rem;margin:0}
/* say a drink: a mic that floats at the bottom right of the menu, in reach of a thumb (the header's one line has no room
   for it). It shows its words until it is first used (.mini after that), keeps clear of the Add to Home Screen banner,
   pulses while it listens, and hides while the search box is open: the keyboard has its own mic then */
.sayFab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:29;display:flex;align-items:center;justify-content:center;gap:8px;min-width:56px;height:56px;padding:0 20px 0 17px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--gold-fg);font-size:16px;font-weight:600;box-shadow:0 12px 28px -10px rgba(0,0,0,.75)}
.sayFab svg{width:22px;height:22px;flex:none}
.sayFab[hidden],html:not(.v-menu) .sayFab,html.rec .sayFab,.mhead.open~.sayFab:not(.listen){display:none}
.sayFab.mini{width:56px;padding:0}
.sayFab.mini span{display:none}
body:has(#installTip:not([hidden])) .sayFab{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
@media (hover:hover){.sayFab:hover{transform:translateY(-2px)}}
.sayFab.listen{animation:micPulse 1.4s ease-out infinite}   /* .mini, .listen, .nudge: never on the first paint (not critical CSS) */
.sayFab.nudge{animation:micPulse 1.4s ease-out 4}
@keyframes micPulse{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 60%,transparent)}to{box-shadow:0 0 0 16px transparent}}
@media (prefers-reduced-motion:reduce){.sayFab.listen,.sayFab.nudge{animation:none}}
html.v-menu:not(.rec) body>footer{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}   /* the last line clears the mic */
/* no internet: a quiet pill under the menu's header (green: nothing is wrong); a tap says what still works. Only the
   script shows it, so it is not in the critical CSS */
.offPill{display:inline-flex;align-items:center;gap:8px;min-height:42px;margin-top:10px;padding:6px 16px;font-size:.88rem;font-weight:500;color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.offPill[hidden]{display:none}
.offPill i{width:7px;height:7px;border-radius:50%;background:currentColor}
/* and the hint under the search box that points at the keyboard's own mic */
.vhint{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:21;margin:0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:16px;background:var(--bg2);box-shadow:var(--shadow);color:var(--fg);font-size:.95rem;font-weight:400;line-height:1.45}
.vhint .vk{display:inline-grid;place-items:center;width:26px;height:26px;margin:0 2px;vertical-align:middle;border-radius:50%;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold2)}
.vhint .vk svg{width:15px;height:15px}
.hero #pantry{margin-top:22px;max-width:560px}
.qlabel{display:block;margin:16px 0 8px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}  /* 2 across even on 360px phones */
.preset{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:9px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:color-mix(in srgb,var(--gold) 9%,transparent);text-align:left;line-height:1.2}
.preset b{font-weight:600;font-size:.9rem;color:var(--fg)}
.preset small{font-size:.72rem;color:var(--muted);font-weight:400}
.preset[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--fg);border-color:var(--gold)}
.preset[aria-pressed="true"] b::after{content:" \2713";color:var(--gold2)}
#pantry .toolbar{margin-top:16px}
#pantry .shelf,#quickChips{display:contents}
.dw{position:relative;min-width:0}
.fav{position:absolute;z-index:2;top:20px;left:20px;width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(10,10,14,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f4efe6;opacity:0;animation:up .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*60ms)}
.fav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
@media (hover:hover){.fav:hover{transform:scale(1.08);border-color:var(--gold)}}
.fav[aria-pressed="true"],.favBtn[aria-pressed="true"]{background:rgba(10,10,14,.72);color:var(--gold2);border-color:var(--gold)}
.fav[aria-pressed="true"] svg,.favBtn[aria-pressed="true"] svg{fill:currentColor}
.favBtn{display:inline-flex;align-items:center;gap:7px}
.favBtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.tabs .fc{display:inline-block;min-width:1.5em;margin-left:6px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--gold) 24%,transparent);font-size:.75rem;letter-spacing:0;text-align:center}
.tabs button[aria-pressed="true"] .fc{background:rgba(0,0,0,.18)}
.drink.pop .missing{color:var(--muted);font-weight:400}
.need span.ok::before{content:"\2713\00a0";color:var(--ok);font-weight:600}
.need span.mi{border-color:var(--warn);color:var(--warn)}
/* recipe: what's missing, in the column beside the photo, and a small text link that puts it on the shopping list */
.rmiss{display:flex;flex-direction:column;align-items:flex-start;flex-basis:100%;color:var(--fg)}
.rmiss p{margin:0;font-weight:400;overflow-wrap:anywhere}
.rmiss b{color:var(--gold2);font-weight:500}
.rlink{min-height:42px;padding:0 2px;border:0;border-radius:6px;background:none;color:var(--gold2);font-size:.94rem;font-weight:400;line-height:1.3;text-align:left;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.rlink:hover{color:var(--gold);transform:none}}
.recipe .nice{margin-top:16px}
.shoph{font-family:var(--display);font-weight:400;font-size:1.45rem;margin:22px 0 0}
.dw>.drink{height:100%}
.shop li .acts{display:flex;gap:6px;flex:none}
.shop li .acts button{padding:4px 12px;font-size:.78rem}
/* phones (most visitors): small labels stay readable, search boxes are 16px so iPhone Safari doesn't zoom in on tap,
   and every control is at least ~42px tall to hit with a thumb */
.eyebrow,.qlabel,.preset small,.tag{font-size:.75rem}
.pick .eyebrow{letter-spacing:.12em}  /* "This afternoon's pick" on one line beside the photo */
.search input{font-size:16px}
@media (pointer:coarse){
  .chip{padding:9px 14px}
  .tabs button,.sm,.shop li .acts button{min-height:42px}
  .shareTop{min-width:42px;min-height:42px;justify-content:center}
  .fav::before{content:"";position:absolute;inset:-6px;border-radius:50%}
  .units button{min-height:42px}
  details.group>summary{min-height:44px}   /* the shelf picker's Spirits / Mixers... headers */
  .shelf .have{padding:1px 1px 1px 13px}
  .shelf .have button{min-width:40px;min-height:40px;padding:0}   /* the x that takes an item off your shelf */
}

/* ---------- phones first (about 90% of visitors) ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,a,label,summary,select{touch-action:manipulation}   /* quick taps on chips never zoom the page */
@media (hover:none){button:active,.chip:active{transform:scale(.97)}}   /* a press you can feel, in place of hover */
.sheet .x{top:6px;right:6px;width:44px;height:44px;padding:0;display:grid;place-items:center}
/* the shelf's lower half (presets, chips, buttons) is drawn by the script: until then it stays out of sight rather than
   being pushed down the screen when the chips arrive (html.drawn, set after the first render) */
html:not(.drawn) #pantry .qlabel,html:not(.drawn) #pantry .toolbar,html:not(.drawn) .hero .side{visibility:hidden}
/* recipe: one small row under the name: ml or pegs, serves 1 or 4, then save and share card as icons. One line on a
   360px phone (tighter under 390px); it wraps rather than overflowing if a phone's font is wider */
.rbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;max-width:400px;margin:14px 0 0;min-height:44px}   /* max-width: the icons stay near the toggles on a wide screen */
.rbar .units{flex:none}
.rbar .units button{min-height:42px;min-width:40px;padding:0 9px;font-size:.75rem;letter-spacing:.05em;white-space:nowrap}
.rbtn{display:grid;place-items:center;flex:none;width:42px;height:42px;padding:0}
.rbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.rbar .favBtn{margin-left:auto}
@media (max-width:389px){.rbar{column-gap:4px}.rbar .units button{min-width:36px;padding:0 6px;letter-spacing:.03em}}
.recipe h1{font-size:clamp(2.4rem,6vw,3.8rem)}   /* a recipe page's name before the app takes over: the same size as the app's */
@media (max-width:520px){
  .panel{padding:20px 18px}
  /* recipe head: the name gets the whole width (long names were cut off beside the photo), the small row under it, then
     the photo with the glass, time, rating and anything missing beside it */
  .recipe{gap:18px}
  .rhead{grid-template-columns:clamp(108px,34vw,132px) minmax(0,1fr);grid-template-rows:auto auto auto auto auto 1fr;grid-template-areas:"ey ey" "h h" "bar bar" "ph nt" "ph mt" "ph .";gap:0 16px;align-items:start}
  .rhead>:not(.photo){display:contents}
  .rhead .eyebrow{grid-area:ey}
  .rhead h1,.rhead h2{grid-area:h;margin:4px 0 0;font-size:clamp(2.1rem,12.5vw,3.125rem);line-height:1.05;overflow-wrap:break-word}
  .rhead .rbar{grid-area:bar;margin:14px 0 18px}
  .rhead>.photo{grid-area:ph}
  .rhead .note{grid-area:nt;margin:0 0 8px}
  .rhead .meta{grid-area:mt;flex-direction:column;align-items:flex-start;gap:10px;margin-top:0;font-size:1rem;color:color-mix(in srgb,var(--fg) 50%,var(--muted))}
  .rhead .mini{width:32px;height:39px;left:6px;bottom:6px}
  /* filter tabs: one row you swipe sideways, not three or four rows of buttons */
  .tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:10px -18px 14px;padding:4px 18px;scroll-padding-inline:18px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none}
}
/* a recipe page (/drink/<slug>/) opens on the recipe alone; Back to the menu brings the home screen back (hideRecipe) */
html.solo .hero,html.solo main>.buy1{display:none}
/* sheets (shopping list, share card) rise from the bottom of a phone, within reach of a thumb */
@media (max-width:640px){
  .sheet{place-items:end stretch;padding:0}
  .sheet-box{width:100%;border-radius:22px 22px 0 0;border-bottom:0;padding:26px max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));animation:sheetup .35s cubic-bezier(.2,.7,.2,1)}
}
@keyframes sheetup{from{transform:translateY(100%)}}

/* ---------- coming back (Oct 2026): the buy line in the header, Your bar, a welcome-back question, festivals, Friday's
   pour and Made it. Only the script shows them (none is on the first paint but the header's Your bar button) ---------- */
/* the header: Home, the count, Your bar (a cup) and the magnifier on one row; under the count, across the row, the one buy
   that unlocks most: "18 drinks · Edit shelf" over "Buy sugar for 9 more" (a tap ticks it). Without one it is one row */
html.v-menu:not(.rec) .mhead{display:grid}
.mhead{grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:10px;row-gap:0}
@media (max-width:380px){.mhead{column-gap:8px}}
.mhead>.hhome{grid-area:1/1}
.mhead>.hline,.mhead>.hsearch{grid-area:1/2}
.mhead>.bbtn{grid-area:1/3}
.mhead>#searchBtn{grid-area:1/4}
.mhead.open>.hsearch{grid-column:2/4}
.hline.buy .hfrom{display:none}
.hbuy{grid-area:2/2/3/5;justify-self:start;position:relative;display:flex;align-items:center;max-width:100%;margin:-2px 0 0;padding:0;border:0;border-radius:0;background:none;color:var(--gold2);font-size:15px;font-weight:400;line-height:1.3;text-align:left}
.hbuy[hidden],.mhead.open>.hbuy{display:none}
.hbuy::after{content:"";position:absolute;inset:-6px -6px -10px}   /* thumb-sized, over Edit shelf's own */
.hbuy svg{flex:none;width:15px;height:15px;margin-right:5px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.hbuy .bi{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.hbuy .bn{flex:none;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.hbuy:hover{transform:none;color:var(--gold)}}
.bbtn{color:var(--gold2)}   /* Your bar: the cup beside the magnifier */
.mhead.open .bbtn{display:none}
/* the top of the menu (the plain menu only): welcome back, a festival in its window, then this week's Friday pour */
.tops{display:flex;flex-direction:column;gap:14px;margin:0 0 14px}
.tops[hidden],.tops:not(:has(>:not([hidden]))),.nudge[hidden],.occs[hidden],.fri[hidden]{display:none}
.nudge{padding:14px 16px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:18px;background:color-mix(in srgb,var(--gold) 9%,transparent)}
.nudge p{margin:0;font-size:16px;font-weight:400;line-height:1.4}
.nudge p.note{margin-top:4px;font-size:15px}
.nudge .acts{display:flex;gap:8px;margin-top:12px}
.nudge .acts button{min-height:44px;padding:0 24px;font-size:16px}
.occs{display:flex;flex-direction:column;gap:10px}
.occ{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 16px;border-radius:18px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 14%,transparent),transparent 75%);color:var(--fg);text-align:left;font-weight:400}
.occ .ot{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.occ b{font-size:18px;font-weight:500;line-height:1.25}
.occ small{font-size:14px;line-height:1.35;color:#b3ac9f}
.occ svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* a festival's sheet: its one thing to buy on top, then Ready to pour, One item short, The rest */
.obuy{display:flex;align-items:center;gap:8px;width:100%;min-height:50px;margin-top:14px;padding:8px 16px;border-radius:14px;border-color:color-mix(in srgb,var(--gold) 60%,transparent);background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold2);font-size:16px;font-weight:500;text-align:left}
.obuy svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sheet-box .list .lsub{grid-column:1/-1;margin:8px 4px -2px}
.fri{padding:12px 10px 10px;border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);border-radius:22px;background:color-mix(in srgb,var(--gold) 7%,transparent)}   /* its own frame: the menu's pick card follows it */
.frih{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0 6px 10px}
.frih small{color:var(--muted);font-size:13px;white-space:nowrap}
/* Made it: under a recipe's steps and on step by step's last step; a tap keeps today's date on this phone */
.madeRow{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px}
.madeBtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 26px;font-size:17px;font-weight:500;border-color:color-mix(in srgb,var(--gold) 60%,transparent);color:var(--gold2)}
.madeBtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.madeBtn[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold2);border-color:var(--gold)}
.madeBtn[hidden]{display:none}
.madeNote{margin:0;color:var(--muted);font-size:.88rem;text-align:center}
.hwMade{align-self:flex-start;min-height:56px}
/* Your bar: the bar score, drinks made, weeks in a row, the favourite and what was made lately */
.bscore{display:flex;flex-direction:column;margin:6px 0 0;font-size:1.6rem;line-height:1.15}
.bscore b{font-size:4.8rem;line-height:1.05;font-weight:400;color:var(--gold2);font-variant-numeric:tabular-nums}
.bstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 0}
.bstats>div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.bstats b{font-size:1.8rem;font-weight:400;line-height:1.15;color:var(--fg)}
.bstats small{color:var(--muted);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.bstats .wide{grid-column:1/-1}
.bstats .wide .rlink{align-self:flex-start;font-size:1.25rem;color:var(--gold2)}
.bstats .wide span{color:var(--muted);font-size:.88rem}
.shop li .rlink{min-height:42px;font-size:1rem}
.shop li:has(.rlink){align-items:center;padding:0}

.itip{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;padding:14px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--gold);box-shadow:0 -20px 40px -20px rgba(0,0,0,.5);font-size:.92rem;animation:up .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:1.2s}
.itip .t{flex:1;min-width:0}
.itip b{color:var(--gold);font-weight:600}
.itip button{padding:7px 16px;min-height:44px;font-size:.85rem}
.itip .x{border:0;padding:0;min-width:44px;min-height:44px;color:var(--muted);font-size:1.1rem;line-height:1}
.installLink{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 2px;min-height:44px;border:0;border-radius:6px;background:none;color:var(--muted);font-size:.84rem;font-weight:400;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.installLink:hover{color:var(--gold2);transform:none;border:0}}
.installLink svg{width:14px;height:14px}
button.installLink{display:flex;margin:0 auto;padding:0 10px;min-height:42px}   /* the install link: one slim centred line under the menu header */
.guide{list-style:none;padding:0;margin:16px 0 4px;display:grid;gap:14px;counter-reset:g}
.guide li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.guide li::before{counter-increment:g;content:counter(g);width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--gold-fg);display:grid;place-items:center;font-weight:600}
.guide b{color:var(--gold);font-weight:600}
.guide svg.i{width:18px;height:18px;vertical-align:-4px;color:var(--gold)}
.guide .tip{display:block;color:var(--muted);font-size:.85rem;margin-top:3px}
.iosArrow{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 4px);transform:translateX(-50%);z-index:46;color:var(--gold);filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));animation:bob .8s ease-in-out infinite alternate;pointer-events:none}
.iosArrow svg{width:44px;height:44px}
.iosArrow.r{left:auto;right:max(10px,env(safe-area-inset-right,0px));transform:none;animation-name:bobr}
@keyframes bob{to{transform:translate(-50%,10px)}}
@keyframes bobr{to{transform:translateY(10px)}}