*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--dark:#0d0d10;--dark-2:#18181b;--dark-3:#222227;--border:#ffffff14;--gold:#c9a84c;--gold-light:#d9bc72;--white:#f5f5f0;--text:#ffffffd1;--text-light:#ffffff80;--serif:"Playfair Display", Georgia, serif;--sans:"Inter", system-ui, sans-serif;--radius:10px}html{scroll-behavior:smooth}body{background:var(--dark);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;padding-bottom:80px;font-size:15px;line-height:1.6}.skip-link{background:var(--gold);color:var(--dark);z-index:9999;border-radius:4px;padding:8px 16px;font-weight:600;text-decoration:none;position:absolute;top:-999px;left:8px}.skip-link:focus{top:8px}#navbar{z-index:100;background:0 0;transition:background .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s;position:fixed;top:0;left:0;right:0}#navbar.scrolled{-webkit-backdrop-filter:blur(12px);background:#0d0d10eb}.nav-inner{justify-content:space-between;align-items:center;max-width:1200px;height:72px;margin:0 auto;padding:0 40px;display:flex}.nav-logo img{width:auto;height:40px;display:block}.nav-links{align-items:center;gap:32px;list-style:none;display:flex}.nav-links a{color:var(--white);letter-spacing:.06em;text-transform:uppercase;opacity:.85;font-size:.88rem;font-weight:400;text-decoration:none;transition:opacity .2s}.nav-links a:hover,.nav-links a[aria-current=page]{opacity:1;color:var(--gold)}.nav-cta{background:var(--gold);border-radius:5px;padding:10px 22px;color:var(--dark)!important;opacity:1!important;font-weight:600!important;transition:background .2s!important}.nav-cta:hover{background:var(--gold-light)!important}.nav-toggle{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:8px;display:none}.nav-toggle span{background:var(--white);border-radius:2px;width:24px;height:2px;display:block}.cocktails-hero{align-items:flex-end;max-width:1200px;min-height:42vh;margin:0 auto;padding:120px 40px 64px;display:flex}.hero-eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-size:.78rem}.cocktails-hero h1{font-family:var(--serif);color:var(--white);margin-bottom:20px;font-size:clamp(2.6rem,5vw,4.2rem);font-weight:700;line-height:1.1}.hero-sub{color:var(--text-light);max-width:560px;font-size:1.05rem;line-height:1.65}.cocktails-browser{max-width:1200px;margin:0 auto;padding:0 40px 80px}.browser-controls{margin-bottom:40px}.search-wrap{margin-bottom:24px;position:relative}.search-icon{width:18px;height:18px;color:var(--text-light);pointer-events:none;position:absolute;top:50%;left:16px;transform:translateY(-50%)}#cocktail-search{background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--white);font-family:var(--sans);outline:none;padding:14px 44px 14px 46px;font-size:1rem;transition:border-color .2s}#cocktail-search::placeholder{color:var(--text-light)}#cocktail-search:focus{border-color:var(--gold)}.search-clear{color:var(--text-light);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:14px;transition:color .2s;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.search-clear:hover{color:var(--white)}.category-tabs{flex-wrap:wrap;gap:8px;display:flex}.cat-btn{background:var(--dark-2);border:1px solid var(--border);color:var(--text-light);font-size:.82rem;font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:20px;padding:8px 20px;font-weight:500;transition:background .2s,border-color .2s,color .2s}.cat-btn:hover{color:var(--white);border-color:#fff3}.cat-btn.active{background:var(--gold);border-color:var(--gold);color:var(--dark);font-weight:600}.cocktail-grid{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.cocktail-card{background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:transform .25s,border-color .25s;overflow:hidden}.cocktail-card:hover{border-color:#c9a84c4d;transform:translateY(-4px)}.card-img-wrap{aspect-ratio:1;position:relative;overflow:hidden}.card-img-wrap img{object-fit:cover;width:100%;height:100%;transition:transform .4s;display:block}.cocktail-card:hover .card-img-wrap img{transform:scale(1.06)}.card-overlay{background:#0d0d1000;justify-content:center;align-items:flex-end;padding-bottom:16px;transition:background .3s;display:flex;position:absolute;inset:0}.cocktail-card:hover .card-overlay{background:#0d0d108c}.card-add{opacity:0;background:var(--gold);color:var(--dark);font-size:.78rem;font-weight:600;font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;border:none;border-radius:5px;padding:8px 16px;transition:opacity .25s,transform .25s,background .2s;transform:translateY(8px)}.cocktail-card:hover .card-add{opacity:1;transform:translateY(0)}.card-add.added{background:var(--dark-3);color:var(--gold);border:1px solid var(--gold);opacity:1;transform:translateY(0)}.card-body{padding:14px 16px}.card-name{font-family:var(--serif);color:var(--white);font-size:1rem;font-weight:600;line-height:1.3}.state-msg{color:var(--text-light);grid-column:1/-1;justify-content:center;align-items:center;padding:80px 0;display:flex}.spinner{border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;width:32px;height:32px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#cocktail-modal{z-index:500;-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;background:#000c;justify-content:center;align-items:center;padding:24px;transition:opacity .25s;display:flex;position:fixed;inset:0}#cocktail-modal:not([hidden]){opacity:1;pointer-events:all}.modal-inner{background:var(--dark-2);border:1px solid var(--border);border-radius:14px;width:100%;max-width:880px;max-height:90vh;transition:transform .25s;position:relative;overflow-y:auto;transform:translateY(20px)}#cocktail-modal:not([hidden]) .modal-inner{transform:translateY(0)}.modal-close{float:right;background:var(--dark-3);border:1px solid var(--border);color:var(--text-light);cursor:pointer;z-index:1;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;margin:16px 16px 0 0;font-size:14px;transition:color .2s,border-color .2s;display:flex;position:sticky;top:16px}.modal-close:hover{color:var(--white);border-color:#ffffff4d}.modal-grid{grid-template-columns:380px 1fr;gap:0;display:grid}.modal-img img{object-fit:cover;border-radius:14px 0 0 14px;width:100%;height:100%;display:block}.modal-details{padding:40px 40px 40px 36px}.modal-eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-size:.75rem}.modal-name{font-family:var(--serif);color:var(--white);margin-bottom:28px;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;line-height:1.15}.modal-ingredients h3,.modal-instructions h3{letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-size:.72rem}.modal-ingredients ul{grid-template-columns:1fr 1fr;gap:6px 16px;margin-bottom:28px;list-style:none;display:grid}.modal-ingredients li{color:var(--text);gap:6px;font-size:.9rem;display:flex}.modal-ingredients li .measure{color:var(--text-light);white-space:nowrap;flex-shrink:0}.modal-instructions p{color:var(--text-light);margin-bottom:28px;font-size:.9rem;line-height:1.7}.modal-glass{color:var(--text-light);align-items:center;gap:6px;margin-bottom:28px;font-size:.82rem;display:flex}.btn-add-modal{background:var(--gold);color:var(--dark);font-size:.85rem;font-weight:700;font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:none;border-radius:6px;width:100%;padding:13px 28px;transition:background .2s}.btn-add-modal:hover{background:var(--gold-light)}.btn-add-modal.added{border:1px solid var(--gold);color:var(--gold);background:0 0}.modal-loading{justify-content:center;align-items:center;min-height:300px;display:flex}.menu-bar{background:var(--dark-2);border-top:1px solid var(--border);z-index:200;padding:14px 40px;transition:transform .3s;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.menu-bar:not([hidden]){transform:translateY(0)}.menu-bar-inner{align-items:center;gap:16px;max-width:1200px;margin:0 auto;display:flex}.menu-bar-icon{font-size:1.2rem}.menu-bar-count{color:var(--white);flex:1;font-size:.9rem;font-weight:500}.menu-bar-actions{align-items:center;gap:12px;display:flex}.menu-bar-clear{border:1px solid var(--border);color:var(--text-light);font-size:.82rem;font-family:var(--sans);cursor:pointer;background:0 0;border-radius:5px;padding:8px 16px;transition:color .2s,border-color .2s}.menu-bar-clear:hover{color:var(--white);border-color:#ffffff4d}.btn-request{background:var(--gold);color:var(--dark);font-size:.85rem;font-weight:700;font-family:var(--sans);cursor:pointer;white-space:nowrap;border:none;border-radius:5px;padding:10px 22px;transition:background .2s}.btn-request:hover{background:var(--gold-light)}footer{background:var(--dark-2);border-top:1px solid var(--border);padding:40px}.footer-inner{grid-template-columns:auto 1fr auto;align-items:center;gap:32px;max-width:1200px;margin:0 auto;display:grid}.footer-logo{opacity:.7;width:auto;height:48px}.footer-disclaimer{color:var(--text-light);margin-bottom:6px;font-size:.78rem;line-height:1.6}.footer-copy{color:var(--text-light);font-size:.78rem}.footer-nav{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.footer-nav a{color:var(--text-light);font-size:.82rem;text-decoration:none;transition:color .2s}.footer-nav a:hover{color:var(--gold)}@media (width<=1024px){.cocktail-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=768px){.nav-inner{padding:0 20px}.nav-toggle{display:flex}.nav-links{background:#0d0d10fa;flex-direction:column;justify-content:center;align-items:center;gap:32px;transition:transform .3s;position:fixed;inset:70px 0 0;transform:translate(100%)}.nav-links.open{transform:translate(0)}.nav-links a{font-size:1.1rem}.cocktails-hero{padding:100px 24px 48px}.cocktails-browser{padding:0 20px 80px}.cocktail-grid{grid-template-columns:repeat(2,1fr);gap:10px}.card-add{opacity:1;padding:6px 10px;font-size:.7rem;transform:translateY(0)}.card-overlay{background:#0d0d104d}.modal-grid{grid-template-columns:1fr}.modal-img{height:260px}.modal-img img{border-radius:14px 14px 0 0}.modal-details{padding:24px}.modal-ingredients ul{grid-template-columns:1fr}.menu-bar{padding:12px 20px}.menu-bar-count{font-size:.82rem}.footer-inner{text-align:center;grid-template-columns:1fr;justify-items:center}.footer-nav{flex-flow:wrap;justify-content:center;align-items:center}}@media (width<=480px){.cocktail-grid{grid-template-columns:repeat(2,1fr);gap:8px}.category-tabs{gap:6px}.cat-btn{padding:6px 14px;font-size:.75rem}}