:root{--primary: #a10c40;--secondary: #ffb347;--background: #1a1a1a;--surface: #232323;--text: #ffffff;--text-subtle: #cccccc;--accent: #ffb703;--border-radius: 8px;--pill-radius: 50px;--shadow: 0 4px 16px rgba(0, 0, 0, .5);--transition: all .3s ease;--font-main: "Arial", sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scrollbar-width:none}body{font-family:var(--font-main);background-color:var(--background);color:var(--text);line-height:1.6;font-size:1rem}main{flex:1;display:flex;flex-direction:column}.site-wrapper{max-width:1200px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}.header{position:relative;margin:1em auto;width:calc(100% - 1.5em);background-color:var(--surface);padding:.5em;border-radius:var(--pill-radius);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);z-index:10}.logo-header{width:120px;transform:translateY(5px)}.logo-footer{width:100px}.nav-links{display:flex;gap:.5em}.nav-link,.menu-filter-btn{color:var(--text);text-decoration:none;font-size:.9rem;padding:.25em 1em;border-radius:var(--pill-radius);transition:var(--transition);background:transparent;border:1px solid var(--text)}.nav-link:hover,.nav-link.active{background-color:var(--primary);color:var(--text);border-color:var(--primary)}.nav-language{display:flex;gap:.5em}.page{text-align:center}.page-title{font-size:1.5rem;color:var(--accent);margin-bottom:1em}.page-description{font-size:1rem;margin-bottom:1em}.menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5em}.menu-title{font-size:1.5rem;font-weight:700;margin:0;text-align:left}.menu-filters{margin-top:.25em}.quiz-page:not(.results-active){padding:0 1.5em 1.5em}.quiz-page.results-active{padding:0 0 1.5em}.quiz-page.results-active .quiz-container{align-items:initial}.quiz-page.results-active .progress-wrapper{padding:0 1.5em 1.5em}.quiz-page.results-active .cocktail-list.carousel{flex:none}.menu-header,.clear-filters-container{padding:0 1.5em}.menu-page,.quiz-page{max-width:600px;margin:0 auto;flex:1;display:flex;flex-direction:column;width:100%}.menu-page{padding-bottom:1em}.menu-header,.menu-filters,.clear-filters-container{padding-left:1.5em}.menu-title,.quiz-title{font-size:1.8rem;font-weight:700;text-align:center}.cocktail-list{display:flex;flex-direction:column;align-items:center;gap:1.5em}.footer{background-color:var(--surface);text-align:center;padding:1em;box-shadow:var(--shadow);margin-bottom:1em;margin-left:.75em;width:calc(100% - 1.5em);border-radius:var(--pill-radius);display:flex;justify-content:space-between;align-items:center}.btn-primary{font-size:1rem;padding:.75em 2em;border-radius:var(--pill-radius);background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:var(--text);border:none;cursor:pointer;transition:var(--transition);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #ff450080;position:relative;overflow:hidden}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 6px 16px #ff4500b3;background:linear-gradient(135deg,var(--accent) 0%,var(--primary) 100%)}.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px #0000004d}.btn-primary:disabled{opacity:.5;cursor:default}.btn-primary:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.3) 10%,transparent 40%);transform:scale(0);transition:transform .4s ease}.btn-primary:hover:after{transform:scale(1)}.btn-alt{font-size:1rem;padding:.75em 2em;border-radius:var(--pill-radius);color:var(--primary);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;border:3px solid var(--primary);background-color:color-mix(in srgb,var(--background) 90%,transparent);background-origin:border-box;background-clip:padding-box,border-box}.btn-alt:hover{background-color:var(--primary);color:var(--text)}.btn-alt:active{color:var(--text);box-shadow:0 2px 8px #0000004d}.btn-alt:disabled{opacity:.5;cursor:default}.btn-quiz{font-size:1rem;padding:.75em 2em;border-radius:var(--pill-radius);background:var(--surface);color:var(--text);border:2px solid var(--accent);cursor:pointer;transition:var(--transition);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}.btn-quiz.active{background:var(--accent);color:var(--background);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #ffd70080}.btn-quiz:active{transform:translateY(0);box-shadow:var(--shadow)}.btn-language{display:flex;align-items:center;justify-content:center;width:1.75em;height:1.75em;font-size:1rem;padding:1em;border:1px solid var(--text-subtle);border-radius:50%;background:transparent;cursor:pointer;transition:border-color .3s ease}.btn-language:hover{border-color:var(--secondary)}.btn-language:active{transform:translateY(0)}.menu-filter-alcohol{display:flex;align-items:center}.toggle-label{display:flex;align-items:center;gap:.75em;font-size:1rem;color:var(--text);cursor:pointer}.toggle-text{font-weight:700}.toggle-input{display:none}.toggle-slider{position:relative;width:4em;height:2em;background-color:var(--surface);border:2px solid var(--accent);border-radius:var(--pill-radius);transition:var(--transition)}.toggle-slider:before{content:"";position:absolute;width:1.6em;height:1.6em;top:.05em;left:.15em;background-color:var(--text);border-radius:50%;transition:var(--transition)}.toggle-input:checked+.toggle-slider{background-color:var(--accent);border-color:var(--accent);box-shadow:0 4px 12px #ffbf0080}.toggle-input:checked+.toggle-slider:before{transform:translate(2em);background-color:var(--background)}.menu-filter{display:flex;align-items:center;gap:.5em;overflow-x:auto;padding-bottom:.5em;margin-bottom:.5em;scrollbar-width:none}.menu-filter-btn{padding:.5em 1.5em;border:2px solid var(--surface);background:transparent;color:var(--text-subtle);white-space:nowrap;letter-spacing:1px;border-radius:var(--pill-radius);transition:var(--transition)}.menu-filter-btn.active{background-color:var(--background);color:var(--text);border-color:var(--accent)}.clear-filters-container{display:flex;justify-content:center;align-items:center;gap:1em;margin:1.2em 0 .5em;padding:0}.cocktail-count{font-size:1rem;color:var(--text-subtle);opacity:.7;display:inline-flex;align-items:center;gap:.2em}.cocktail-count-results{gap:0;margin-bottom:.5em;align-self:center}.cocktail-count-number{font-size:1.2rem;color:var(--accent);font-weight:700}.cocktail-count-number-results{margin-right:.4em}.clear-filters-btn{font-size:.8rem;padding:.3em .8em;margin:0;border:1px solid var(--text-subtle);border-radius:var(--pill-radius);background:transparent;color:var(--text-subtle);opacity:.6;cursor:pointer;transition:var(--transition)}.menu-filter-label{white-space:nowrap;font-weight:700}.cocktail-card{display:flex;flex-direction:column;border:6px solid var(--surface);border-radius:2rem;overflow:hidden;background:var(--surface);box-shadow:0 4px 8px #0003;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;margin-bottom:.5em}.cocktail-image-wrapper{position:relative;width:100%;aspect-ratio:3 / 4.5;overflow:hidden;border-radius:2rem}.cocktail-image{width:100%;height:100%;object-fit:cover;object-position:center 100%;display:block;transition:transform .3s cubic-bezier(.4,0,.2,1) .1s}.cocktail-card.expanded .cocktail-image{transform:translateY(-15%) scale(1.25);transition:transform .3s cubic-bezier(.4,0,.2,1) .3s}.cocktail-overlay{position:absolute;bottom:0;left:0;width:100%;height:48%;padding:1em;background:#0006;-webkit-mask:linear-gradient(#0000,#000f 20%);mask:linear-gradient(#0000,#000f 20%);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:flex-end;transition:height .3s cubic-bezier(.4,0,.2,1) .1s}.cocktail-card.expanded .cocktail-overlay{height:70%;min-height:45%;transition:height .3s cubic-bezier(.4,0,.2,1) .3s}.cocktail-heading{display:flex;flex-direction:column;gap:.25em;align-items:center;margin:0 0 .5em;transition:gap .3s cubic-bezier(.4,0,.2,1)}.cocktail-card.expanded .cocktail-heading{gap:0}.cocktail-name{font-size:1.8rem;font-weight:600;color:var(--text);text-align:left;white-space:nowrap}.cocktail-card.expanded .cocktail-name{margin-bottom:.5em}.cocktail-category{display:flex;justify-content:center;align-items:center;border:1px solid var(--accent);border-radius:var(--pill-radius);padding:.1em 1em;font-style:normal;font-size:.75rem;letter-spacing:.75px;white-space:nowrap;background-color:#5b5b5b45;margin-bottom:.5em;opacity:1;max-height:2em;transition:opacity .3s cubic-bezier(.4,0,.2,1) .3s,max-height .3s cubic-bezier(.4,0,.2,1) .3s,padding .3s cubic-bezier(.4,0,.2,1) .3s,margin-bottom .3s cubic-bezier(.4,0,.2,1) .3s}.cocktail-card.expanded .cocktail-category{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1),margin-bottom .3s cubic-bezier(.4,0,.2,1)}.cocktail-description{font-size:.9rem;color:var(--text-subtle);margin:0;text-align:center;transition:transform .3s cubic-bezier(.4,0,.2,1)}.cocktail-card.expanded .cocktail-description{transform:translateY(-.5em)}.cocktail-content{max-height:0;opacity:0;transform:translateY(10px);overflow:hidden;padding:0 1.25em;text-align:center;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),padding-top .3s cubic-bezier(.4,0,.2,1),padding-bottom .3s cubic-bezier(.4,0,.2,1)}.cocktail-card.expanded .cocktail-content{max-height:300px;opacity:1;transform:translateY(0);padding-top:.5em;transition:max-height .3s cubic-bezier(.4,0,.2,1) .3s,opacity .3s cubic-bezier(.4,0,.2,1) .3s,transform .3s cubic-bezier(.4,0,.2,1) .3s,padding-top .3s cubic-bezier(.4,0,.2,1) .3s,padding-bottom .3s cubic-bezier(.4,0,.2,1) .3s}.cocktail-details{font-size:.9rem;color:var(--text-subtle)}.cocktail-details:first-of-type{margin-bottom:1em}.cocktail-details-label{font-weight:700;color:var(--text)}.cocktail-list.carousel{display:grid;grid-auto-columns:80vw;grid-auto-flow:column;gap:5vw;overflow-x:auto;overflow-y:hidden;flex:1;padding:1em 10vw;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.cocktail-list.carousel::-webkit-scrollbar{display:none}.cocktail-card-wrapper.carousel-item{scroll-snap-align:center;height:100%}.not-found-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:1em 0;padding:1em;min-height:400px;max-width:80%;justify-self:center;align-self:center}.not-found-icon{font-size:5rem;color:var(--text-subtle);opacity:.5;margin-bottom:.25em}.not-found-wrapper p{opacity:.7;font-size:1rem;color:var(--text-subtle);font-weight:700}.quiz-page .menu-filter-btn.active{background-color:var(--background);color:var(--text);border-color:var(--accent)}.quiz-navigation{display:flex;gap:.5em;justify-content:center;margin-block:1em}.quiz-navigation button:disabled{opacity:.5;cursor:not-allowed;color:var(--text-subtle);border-color:var(--surface)}.quiz-prev-btn{background:none;border:none;color:var(--text-subtle);font-size:.9rem;cursor:pointer;padding:.5em 0;display:inline-flex;align-items:center;gap:.25em;transition:color .2s ease;text-decoration:none;align-self:flex-start}.quiz-prev-btn:active{color:var(--accent)}.hero-bg{position:fixed;top:0;left:0;width:100%;height:100dvh;background-image:url(/images/hero-home-mobile.webp);background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;z-index:-2;pointer-events:none}.hero-bg:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#1a1a1ae6,#1a1a1ab3);z-index:1}.home-hero{position:relative;z-index:2;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2em 2.5em 6em}.hero-links-wrapper{display:flex;flex-direction:column;gap:1em}.home-hero .page-title{font-size:2.5rem;font-weight:700;color:var(--secondary);margin-bottom:.5em;text-shadow:0 2px 4px rgba(0,0,0,.5);transition:var(--transition);position:relative;z-index:2;line-height:1.1}.home-hero .page-description{font-size:1.2rem;color:var(--text-subtle);margin-bottom:1.5em;max-width:90%;margin-left:auto;margin-right:auto;text-align:center;position:relative;z-index:2}.home-hero .btn-primary,.home-hero .btn-alt{font-size:1.2rem;padding:.6em 2em;position:relative;z-index:2}.home-hero .btn-primary{box-shadow:0 4px 12px #a10c4066,0 2px 6px #ffb70333}.home-hero .btn-alt{padding-block:.5em;box-shadow:none}.home-hero .btn-primary:hover{transform:translateY(-4px);box-shadow:0 8px 20px #a10c4080,0 4px 10px #ffb7034d,0 0 12px #ffb70333}.quiz-page .menu-filter-alcohol{justify-self:center;margin-top:1em}.quiz-container{flex:1;display:flex;flex-direction:column;align-items:center}.quiz-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto}.quiz-confirmation p{color:var(--text-subtle)}.quiz-confirmation p:last-of-type{font-style:italic;margin-top:1em}.quiz-confirmation button{margin-top:3em}.progress-wrapper{width:100%;display:flex;flex-direction:column}.progress-container{height:.5rem;background-color:#e0e0e0;border-radius:.25rem;overflow:hidden;margin:1.5em 0}.progress-fill{position:relative;height:100%;background-color:var(--accent, #4caf50);transition:width .3s ease;border-radius:var(--pill-radius);overflow:visible}.question-container{margin-block:1em;display:flex;flex-direction:column;gap:1em}.question-container.two-col{display:grid;grid-template-columns:repeat(2,1fr)}.question-container.two-col :first-child{grid-column:1 / -1}.question-container h2{margin-bottom:.5em}.results-container{display:flex;flex-direction:column;flex:1}.explore-menu-cta{margin:auto;color:var(--text-subtle);opacity:.7}.explore-menu-link{display:block;color:var(--accent);text-decoration:none}.explore-menu-link:hover{text-decoration:underline}*:focus-visible:not(.hero-links-wrapper .btn-primary,.hero-links-wrapper .btn-alt){position:relative;z-index:1;outline:none!important}.hero-links-wrapper .btn-primary:focus-visible,.hero-links-wrapper .btn-alt:focus-visible{outline:3px solid var(--primary);outline-offset:4px}*:focus-visible:after{content:"";position:absolute;inset:-4px;border:2px solid var(--primary);border-radius:var(--pill-radius);pointer-events:none;z-index:3;transition:all .2s ease}.btn-language:focus-visible:after,.toggle-input:focus-visible+.toggle-slider:after{inset:-6px}.cocktail-card:focus-visible{overflow:visible!important;border-radius:2rem!important}.cocktail-list:focus-visible:after{border:none}.cocktail-card:focus-visible:after{inset:-10px;border-radius:2.5rem}.cocktail-card-wrapper:focus-visible:after{display:none}.skip-link:focus-visible:after,.sr-only:focus-visible:after{inset:-2px;border-radius:var(--pill-radius)}.menu-filter-btn:focus-visible:after{inset:-2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-3em;left:-1em;background:var(--primary);color:#fff;padding:.5em 2em .5em 2.5em;border-radius:var(--pill-radius);font-weight:700;z-index:100;transition:top .2s ease;letter-spacing:1px}.skip-link:focus{top:-.25em;outline:3px solid white}@media(max-width:500px){.quiz-confirmation{width:70%}}@media(min-width:500px)and (max-width:646px){.hero-bg{background-size:160%}.home-hero{padding:4em}.quiz-confirmation{width:50%}.cocktail-overlay{height:45%;-webkit-mask:linear-gradient(#0000,#000f 40%);mask:linear-gradient(#0000,#000f 40%);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)}}@media(min-width:450px){.cocktail-card.expanded .cocktail-image{transform:translateY(-10%) scale(1.1);transition:transform .3s cubic-bezier(.4,0,.2,1) .3s}.cocktail-card.expanded .cocktail-overlay{height:60%}.cocktail-name{font-size:2.1rem}.cocktail-description{font-size:1.05rem}.explore-menu-link{display:inline-block;margin-left:.5em}}@media(min-width:600px){.home-hero{padding:5em}.hero-links-wrapper{flex-direction:row}.cocktail-list.carousel{grid-auto-columns:clamp(60vw,72vw,460px);gap:clamp(4vw,6vw,35px);padding:clamp(1em,1.5em,20px) clamp(8vw,12vw,90px);height:clamp(70vh,calc(100vh - 220px),800px)}.cocktail-card-wrapper.carousel-item{height:clamp(70vh,82vh,700px)}.menu-filters{margin-top:.5em}.clear-filters-container{margin:2em 0 0;padding:0 2em}.cocktail-overlay{padding:1.8em}.cocktail-name{font-size:2rem}.cocktail-description{font-size:1rem}.quiz-page:not(.results-active),.quiz-page.results-active .progress-wrapper,.menu-header{padding:0 2em 2em}.quiz-confirmation{width:50%}}@media(min-width:646px)and (max-width:878px){.hero-bg{background-size:120%}}@media(min-width:646px){.hero-bg{background-size:120%}.home-hero{padding:6em}.home-hero .page-title,.home-hero .page-description{max-width:400px}.cocktail-list.carousel{grid-auto-columns:min(420px,68vw);padding:1.8em min(70px,10vw);height:calc(100vh - 240px)}.cocktail-card-wrapper.carousel-item{height:min(720px,80vh)}.cocktail-overlay{padding:2em}.cocktail-name{font-size:2.1rem}.cocktail-description{font-size:1.1rem}.menu-filter-btn{font-size:1rem;padding:.7em 2em}}@media(min-width:900px){.hero-bg{background-size:1200px auto;background-position:center 45%}.cocktail-list.carousel{grid-auto-columns:min(410px,42vw);gap:min(30px,4vw);padding:2em min(60px,8vw);height:calc(100vh - 260px)}.cocktail-card-wrapper.carousel-item{height:min(740px,78vh)}.cocktail-overlay{height:50%;padding:2.2em}.cocktail-name{font-size:2.3rem}.cocktail-description{font-size:1.1rem}.menu-filters{margin-top:.75em;padding-bottom:1em}.footer{margin-bottom:1.5em}}@media(min-width:1200px){.cocktail-list.carousel{grid-auto-columns:min(420px,38vw);gap:min(30px,4vw);padding:2em min(60px,6vw);height:calc(100vh - 280px)}.cocktail-card-wrapper.carousel-item{height:min(780px,78vh)}.menu-filter-btn{font-size:1rem;padding:.7em 2em}.cocktail-name{font-size:2.3rem}.cocktail-description{font-size:1.1rem}}@media(hover:hover)and (pointer:fine){.menu-filter-btn:hover{border-color:var(--accent)!important;color:var(--text)!important;transform:translateY(-1px);box-shadow:0 2px 6px #a10c4033}.btn-quiz:hover{background:var(--accent)!important;color:var(--background)!important;border-color:var(--accent)!important;transform:translateY(-2px);box-shadow:0 4px 12px #ffd70080}.clear-filters-btn:hover{opacity:.8!important;color:var(--text)!important}.quiz-prev-btn:hover{color:var(--text)!important;text-decoration:underline!important}.btn-language:hover{border-color:var(--secondary)!important}}