/* Turkish Street Food (Halal) — concept by KERA Tech Solutions
   Structure, grid, type scale and motion follow the reference (Sunbeam Bagels). */
:root{
  --tan:#FBEAD6;
  --ink:#170D09;
  --white:#fff;
  --red:#E63B2E;
  --amber:#F7A541;
  --lilac:#CDB0C9;
  --f-display:"Fraunces", "Cooper Black", Georgia, serif;
  --f-mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-narrow:"Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  --f-script:"Norican", "Brush Script MT", cursive;
  --h-150:clamp(65px, 8vw, 150px);
  --t-200:clamp(70px, 8vw, 200px);
  --t-120:clamp(55px, 8vw, 120px);
  --t-95:clamp(40px, 6vw, 95px);
  --t-60:clamp(40px, 8vw, 60px);
  --t-26:clamp(18px, 8vw, 26px);
  --body:clamp(15px, 1vw, 18px);
  --site-pad:clamp(80px, 16vw, 200px);
  --head-below:clamp(35px, 5vw, 50px);
  --grad:linear-gradient(102deg, var(--red) 5%, var(--amber) 50%, var(--lilac) 92%);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tan);color:var(--ink);font-family:var(--f-mono);font-size:14px;line-height:1.5;overflow-x:hidden}
img,svg{max-width:100%}
img{display:block}
a{color:inherit}
button{font:inherit}
p{line-height:1.8}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-60px;left:16px;z-index:500;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:16px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.display{font-family:var(--f-display);font-weight:900;font-variation-settings:"opsz" 144}

/* ---------- grid (reference: 30px | 16 x 1fr | 30px, 22 cols from 1440) ---------- */
.site-grid{display:grid;grid-template-columns:30px repeat(16, minmax(0,1fr)) 30px;width:100%}
@media (min-width:1440px){.site-grid{grid-template-columns:repeat(22, minmax(0,1fr));max-width:1920px;margin-left:auto;margin-right:auto}}
@media (max-width:479px){.site-grid{grid-template-columns:20px repeat(16, minmax(0,1fr)) 20px}}

/* ---------- gradient buttons (reference .gradient-btn / .btn-border-gradient) ---------- */
@keyframes gradientShift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.gradient-btn{transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.gradient-btn:hover,.gradient-btn.is-active,.gradient-btn:focus-visible{background:linear-gradient(45deg,#E63B2E,#F7A541,#CDB0C9,#E63B2E,#F7A541,#CDB0C9);background-size:600% 100%;animation:gradientShift 5s linear infinite alternate;border-color:transparent;color:#fff}
.btn-border-gradient{position:absolute;inset:0;border:4px solid transparent;border-radius:14px;background:linear-gradient(102deg,#E63B2E 5.09%,#F7A541 50.73%,#CDB0C9 92.18%) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .2s;pointer-events:none}
.gradient-btn:hover .btn-border-gradient{opacity:0}
.ico-arrow{width:22px;height:22px;flex:none}

/* ================= HERO ================= */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;color:#fff;background:#24140d;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:52% 46%;transform-origin:58% 50%;animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.6%,-1.2%,0)}}
.hero__shade{position:absolute;inset:0;background:#000;opacity:.6;z-index:-1;pointer-events:none}
.topbar{position:absolute;top:0;left:0;width:100%;padding:50px 30px 0;display:flex;justify-content:space-between;align-items:center;z-index:2}
.topbar__side{display:flex;align-items:center;gap:10px;width:100%;max-width:310px;font-size:14px;font-weight:500;line-height:1.5}
.topbar__side--right{justify-content:flex-end;text-align:right;max-width:290px}
.topbar__icon{width:26px;height:26px;flex:none}
.topbar__brand{display:flex;align-items:center;gap:10px}
.dashes{display:block;border-bottom:2px dashed #fff;width:7vw}
.wordmark{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#fff;line-height:1}
.wordmark__big{font-family:var(--f-display);font-weight:900;font-variation-settings:"opsz" 144;font-size:46px;letter-spacing:-.01em;line-height:.95}
.wordmark__small{font-family:var(--f-narrow);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:5px}
.hero__body{position:relative;z-index:1}
.hero__copy{grid-column:3 / -1;display:flex;padding:90px 0}
@media (min-width:1440px){.hero__copy{grid-column:3 / 22}}
.hero__title{margin:0;font-family:var(--f-display);font-weight:900;font-variation-settings:"opsz" 144;font-size:var(--h-150);line-height:1;letter-spacing:-.005em;color:#fff}
.hero__cta{align-self:flex-end;margin:0 0 10px 1vw}
.glass-btn{position:relative;display:inline-block;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border-radius:14px;padding:25px 40px;font-size:18px;line-height:1;text-decoration:none;overflow:hidden}
.glass-btn__inner{position:relative;display:flex;align-items:center;gap:10px;font-weight:500}
.hero__drop{position:absolute;left:30px;bottom:50px;display:flex;align-items:flex-end;gap:6px;z-index:3}
.drop-link{position:relative;background:none;border:0;color:#fff;font:500 15px/1.5 var(--f-mono);padding:0;cursor:pointer}
.drop-link::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--red);transition:transform .3s ease;transform-origin:left}
.drop-link:hover::after{transform:scaleX(.6)}
.squiggle{width:56px;height:30px;color:#fff;margin-bottom:6px}
.hero__sound{position:absolute;right:30px;bottom:50px;display:flex;align-items:center;gap:12px;z-index:3}
.sound-label{font:500 16px/1 var(--f-mono);color:#fff}
@media (max-width:1279px){.hero__drop,.hero__sound{bottom:104px}}

/* simit toggle (reference donut toggle) */
.simit-toggle{display:inline-block;cursor:pointer;margin:0;-webkit-tap-highlight-color:transparent}
.simit-toggle__input{position:absolute;opacity:0;width:0;height:0}
.simit-toggle__track{display:block;position:relative;width:60px;height:30px;background:#f6e9d2;border-radius:999px;transition:background .3s ease}
.simit-toggle__knob{position:absolute;top:50%;left:4px;width:24px;height:24px;transform:translate(0,-50%) rotate(0deg);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.simit-toggle__knob svg{display:block;width:100%;height:100%}
.simit-toggle__input:checked ~ .simit-toggle__track .simit-toggle__knob{transform:translate(28px,-50%) rotate(360deg)}
.simit-toggle__input:focus-visible ~ .simit-toggle__track{outline:3px solid var(--amber);outline-offset:3px}

/* ================= DAILY ROTATOR ================= */
.daily{position:relative;display:flex;flex-direction:column;height:100vh;min-height:800px;padding-top:100px;background:var(--tan);overflow:hidden}
@media (min-width:1440px){.daily{min-height:1000px}}
.daily__head{padding:0 30px}
.script{margin:0;padding-bottom:23px;color:var(--red);font-family:var(--f-script);font-size:var(--t-60);line-height:1;text-align:center;transform:rotate(-3deg)}
@media (min-width:1440px){.script{transform:rotate(-2deg)}}
.daily__titles{position:relative;max-width:1880px;margin:0 auto}
.daily__title{margin:0;opacity:0;color:var(--ink);font-family:var(--f-display);font-weight:900;font-variation-settings:"opsz" 144;font-size:var(--t-200);line-height:1;text-align:center;transition:opacity .16s ease}
.daily__title--stack{position:absolute;inset:0;width:100%}
.daily__title.is-active{opacity:1;transition-delay:.14s}
.daily__stage{position:relative;flex:1;display:flex;justify-content:center;align-items:center}
.food-wheel{position:absolute;left:50%;top:50%;width:80vw;height:80vw;max-width:1900px;max-height:1900px;transform:translate(-50%,var(--wheel-y,-25%)) rotate(45deg);transition:transform .5s ease-in-out;pointer-events:none}
@media (min-width:1920px){.food-wheel{width:60vw;height:60vw}}
.fw{position:absolute;height:auto;filter:drop-shadow(0 22px 26px rgba(70,25,0,.28))}
.fw--tl{width:30vw;max-width:600px;top:-3%;left:0;transform:translate(4vw,3vw) rotate(-45deg)}
.fw--tr{width:26vw;max-width:520px;top:0;right:0;animation:spin 3s linear infinite}
.fw--br{width:31vw;max-width:600px;bottom:0;right:0;transform:translate(-4vw,-4vw) rotate(135deg)}
.fw--bl{width:22vw;max-width:440px;bottom:0;left:0;transform:translate(5vw,-3vw) rotate(-135deg)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (max-width:991px){.daily{min-height:600px}.food-wheel{width:90vw;height:90vw}}
@media (max-width:479px){
  .daily{height:auto;min-height:max(650px, 40vh);padding-top:80px}
  .script{font-size:36px}
  .daily__title{font-size:11vw}
  .daily__stage{--wheel-y:-23%}
  .food-wheel{width:100vw;height:100vw}
  .fw--tl{width:44vw}.fw--tr{width:36vw}.fw--br{width:42vw}.fw--bl{width:30vw}
}

/* ================= GRADIENT SECTIONS ================= */
.grad-section{position:relative;color:#fff;background:linear-gradient(to bottom, var(--red), var(--lilac))}
#story{padding:15vw 0}
@media (min-width:1920px){#story{padding:5vw 0}}
.story{grid-column:2 / -2;grid-row:1;position:relative}
@media (min-width:1440px){.story{grid-column:3 / 21}}
.stamp{position:absolute;top:-8%;right:9%;width:26%;color:#fff;opacity:.3;overflow:visible}
@media (min-width:1440px){.stamp{right:1%}}
.stamp__t{fill:currentColor;font-family:var(--f-mono);font-weight:500;font-size:23px;letter-spacing:.12em}
.stamp__t--big{font-size:40px;letter-spacing:.2em}
.stamp__t--mid{font-size:21px;letter-spacing:.14em}
.story__title{position:relative;max-width:790px;margin:0 0 var(--head-below);color:#fff;font-family:var(--f-display);font-weight:900;font-variation-settings:"opsz" 144;font-size:var(--t-120);line-height:1}
@media (min-width:1440px){.story__title{max-width:820px}}
.nw{white-space:nowrap}
.cup-o{position:relative;display:inline-block;overflow:visible}
.cup-o.has-cup{color:transparent}
.cup-o img{position:absolute;top:50%;left:50%;width:500%;max-width:none;height:auto;transform:translate(-50%,-50%);transition:width 1s ease;z-index:1;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(60,10,0,.3))}
.cup-o img.is-small{width:150%}

.cards{display:flex;gap:20px}
.card{display:flex;flex-direction:column;gap:20px;width:33%}
.card__media{position:relative;height:275px;border-radius:15px;overflow:hidden}
@media (min-width:1440px){.card__media{height:400px}}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__hover{opacity:0;transition:opacity .2s}
.card:hover .card__hover{opacity:1}
.card__body{position:relative;flex:1;padding:60px 40px 50px;border:1.5px dashed #fff;border-radius:15px;overflow:hidden;line-height:25px}
@media (min-width:1440px){.card__body{padding:80px 55px}}
.card__body::before,.menu-card::before{content:"";position:absolute;inset:0;background:#c3acc6;opacity:.25;mix-blend-mode:multiply;pointer-events:none}
.card__title{position:relative;margin:0 0 12px;font-family:var(--f-narrow);font-weight:700;font-size:var(--t-26);line-height:1.1;text-transform:uppercase}
.card__body p{position:relative;margin:0;font-size:var(--body);font-weight:500;line-height:1.8}

/* marquee */
.marquee{grid-column:1 / -1;grid-row:2;padding-top:var(--site-pad);overflow:hidden}
.marquee__track{display:flex;align-items:center;gap:40px;width:max-content;padding:12px 0}
.mq{position:relative;flex:none;width:350px;height:300px;margin:0;border-radius:10px;overflow:hidden}
.mq.thin{width:230px}
.mq.rot-left{transform:rotate(-3deg)}
.mq:nth-child(4n+3).thin{transform:rotate(3deg)}
.mq img{width:100%;height:100%;object-fit:cover}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* learn-more rows */
.learn{grid-column:3 / -3;grid-row:3;padding-top:var(--site-pad)}
@media (min-width:1440px){.learn{grid-column:4 / 20}}
.learn__row{position:relative;margin-top:50px;padding-bottom:30px;border-bottom:2px dashed #fff}
.learn__title{margin:0 0 50px;max-width:calc(100% - 100px);color:#fff;font-family:var(--f-display);font-weight:900;font-variation-settings:"opsz" 144;font-size:var(--t-95);line-height:1}
.learn__line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px}
.learn__p{max-width:700px;margin:0;font-size:var(--body);font-weight:500;line-height:28px}
.btn-red{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;border:2px solid var(--red);border-radius:10px;background:var(--red);color:#fff;font:500 18px/1.5 var(--f-mono);text-decoration:none;white-space:nowrap}
.btn-red--light{margin-top:6px;padding:10px 22px;font-size:15px}
.learn__icon{position:absolute;top:0;right:-5%;width:90px;color:#fff;transform:rotate(10deg)}
.learn__icon--left{left:-11%;right:auto;transform:rotate(-10deg)}
.float-img{position:absolute;top:0;left:0;z-index:50;width:180px;height:248px;object-fit:cover;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s}
.float-img.is-on{opacity:1}

/* menu inside the first row */
.menu-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:15px;margin-top:44px}
.menu-card{position:relative;padding:32px 28px 26px;border:1.5px dashed #fff;border-radius:15px;overflow:hidden}
.menu-card > *{position:relative}
.menu-card__t{display:flex;flex-direction:column;gap:5px;margin:0 0 12px;font-family:var(--f-narrow);font-weight:700;font-size:22px;line-height:1;letter-spacing:.02em}
.menu-card__t small{font:500 12px/1.3 var(--f-mono);letter-spacing:.04em;opacity:.85}
.menu-card__t--gap{margin-top:28px}
.menu-card ul{list-style:none;margin:0;padding:0}
.menu-card li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.5);font-size:14px;line-height:1.35}
.menu-card li:last-child{border-bottom:0}
.menu-card li b{font-weight:500}
.menu-card li small{display:block;margin-top:3px;font-size:12px;opacity:.82}
.menu-card li small:empty{display:none}
.menu-card li em{font-style:normal;font-weight:500;white-space:nowrap}
.menu-card__mix{margin-top:6px;border-top:2px solid rgba(255,255,255,.7)}
.menu-card--counter{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 40px;padding:26px 28px}
.menu-card--counter .menu-card__t{margin:0}
.menu-card__plain{display:flex;flex-wrap:wrap;gap:6px 26px}
.menu-card .menu-card__plain li{border:0;padding:0;display:block}
.menu-card__plain li::before{content:"★ ";color:#fff;opacity:.8}

/* ================= COLLAGE / GALLERY ================= */
.collage-section{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;margin:30px 0;background:var(--tan);overflow:hidden;isolation:isolate}
.collage{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:18px;padding:60px 20px 30px}
.collage .ci{width:220px}
.ci{margin:0;border-radius:20px;overflow:hidden;user-select:none;-webkit-user-select:none}
.ci img{width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.ci--polaroid{padding:14px 14px 46px;border-radius:4px;background:#f4eee4;box-shadow:0 12px 32px rgba(70,35,10,.14)}
.ci--polaroid img{border-radius:2px}
.ci--cut{border-radius:0;overflow:visible;filter:drop-shadow(0 10px 14px rgba(70,25,0,.25))}
.collage .ci--small{width:84px}
.collage .ci--sticker{width:150px;border-radius:50%;overflow:visible}
.ci--note{position:relative;margin:0;padding:30px 24px 20px;border-radius:6px;background:#fffaf1;color:var(--ink);box-shadow:0 14px 34px rgba(70,35,10,.16);overflow:visible}
.ci--note::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(247,165,65,.72)}
.ci--note-b::before{background:rgba(205,176,201,.85)}
.ci--note p{margin:0 0 12px;font:500 14px/1.6 var(--f-mono)}
.ci--note footer{font:700 15px/1.2 var(--f-narrow);letter-spacing:.04em;text-transform:uppercase;color:var(--red)}
.stk-t{fill:#fff;font-family:var(--f-narrow);font-weight:700;font-size:17px;letter-spacing:.12em}
.collage--live{position:absolute;inset:0;display:block;padding:0}
.collage--live .ci{position:absolute;cursor:grab;touch-action:none;will-change:left,top}
.collage--live .ci:active{cursor:grabbing}
.collage--live .ci.dragging{z-index:999!important}
.collage__center{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;padding:40px 20px 60px;pointer-events:none;text-align:center}
.teapot-art{width:300px;max-width:62vw;height:auto;overflow:visible;pointer-events:auto}
.rating-link{display:inline-flex;flex-direction:column;align-items:center;margin-top:14px;color:var(--red);text-decoration:none;font:700 26px/1.15 var(--f-narrow);pointer-events:auto}
.rating-link__sun{width:28px;height:15px;margin-bottom:4px;color:var(--red)}
.rating-link__line{display:block;width:100%;height:2px;margin-top:7px;background:var(--red);transform-origin:left;transition:transform .3s ease}
.rating-link:hover .rating-link__line{transform:scaleX(.4)}
.grad-text{background:linear-gradient(102deg,var(--red),var(--amber) 50%,var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ================= FOOTER ================= */
.footer{overflow:hidden;background:linear-gradient(0deg, var(--red) 2%, var(--amber) 49%, var(--lilac))}
.giant{margin:0;padding-top:30px;color:#fff;text-align:center;white-space:nowrap;font-family:var(--f-display);font-weight:900;font-variation-settings:"opsz" 144;font-size:clamp(100px, 21vw, 350px);line-height:1;letter-spacing:-.01em}
.giant__word{display:inline-block}
.giant__tm{margin-left:6px;font-family:var(--f-narrow);font-weight:700;font-size:26px;letter-spacing:.04em;text-transform:uppercase;vertical-align:baseline}
.footer__grid{padding-top:40px}
.footer__cards{grid-column:8 / 17;grid-row:1;display:flex;gap:15px}
@media (min-width:1440px){.footer__cards{grid-column:12 / 22}}
.info-card{position:relative;flex:1;display:flex;justify-content:center;align-items:center;padding:50px;border:2px dashed #fff;border-radius:15px;color:#fff;text-align:center}
.info-card__tint{position:absolute;inset:0;border-radius:inherit;background:#c3acc6;opacity:.25;mix-blend-mode:multiply;pointer-events:none}
.info-card__in{position:relative}
.info-card__t{margin:0 0 15px;font-family:var(--f-narrow);font-weight:700;font-size:22px;line-height:1}
.info-card__p{margin:0 0 20px;font:500 13px/1.6 var(--f-mono)}
.info-card__a{display:table;margin:0 auto 12px;color:#fff;text-decoration:none;font:500 13px/1.5 var(--f-mono);border-bottom:1px solid transparent}
.info-card__a:hover{border-bottom-color:#fff}
.info-card__icons{display:flex;justify-content:center;gap:10px;margin-bottom:16px}
.round-btn{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--red)}
.round-btn svg{width:24px;height:24px}
.pour-sticker{grid-column:2 / 6;grid-row:1;align-self:center;justify-self:start;width:190px;max-width:100%;padding:0;border:0;background:none;cursor:pointer;transform:rotate(-4deg);transition:rotate .3s ease}
@media (min-width:1440px){.pour-sticker{grid-column:1 / 4;margin-left:6px}}
.pour-sticker:hover{rotate:-6deg}
.pour-sticker__svg{display:block;width:100%;height:auto;animation:ballBounce 3s infinite}
.pour-t{fill:#3a1c2e;font-family:var(--f-narrow);font-weight:700;font-size:17px;letter-spacing:.1em}
@keyframes ballBounce{0%{transform:translateY(0);animation-timing-function:ease-out}12%{transform:translateY(-60px);animation-timing-function:ease-in}24%{transform:translateY(0);animation-timing-function:ease-out}33%{transform:translateY(-30px);animation-timing-function:ease-in}42%{transform:translateY(0);animation-timing-function:ease-out}48%{transform:translateY(-12px);animation-timing-function:ease-in}53%{transform:translateY(0)}100%{transform:translateY(0)}}
.footer__bottom{grid-column:2 / -2;grid-row:2;position:relative;z-index:200;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:185px;padding-bottom:70px}
.footer__copy{margin:0;font:500 14px/1.5 var(--f-mono)}
.footer__links{display:flex;align-items:center;gap:30px}
.footer__link{color:#fff;text-decoration:none;font:500 14px/1.5 var(--f-mono);border-bottom:1px solid transparent}
.footer__link:hover{border-bottom-color:#fff}
.to-top{display:flex;align-items:center;justify-content:center;flex:none;width:50px;height:50px;border:2px solid #fff;border-radius:50%;transition:background .2s}
.to-top:hover{background:rgba(255,255,255,.18)}
.to-top svg{width:24px;height:24px}

/* ================= NAV DOCK ================= */
.navdock{position:fixed;left:0;bottom:30px;z-index:300;display:flex;justify-content:center;width:100%;pointer-events:none;transition:bottom .2s}
.navdock.is-active{bottom:0}
.pill{pointer-events:auto;display:flex;align-items:center;gap:15px;padding:20px 40px;border-radius:10px;background-image:var(--grad);font-size:16px;line-height:1;transition:border-radius .2s}
.navdock.is-active .pill{border-radius:10px 10px 0 0}
@media (min-width:1280px){.pill:hover{background-image:linear-gradient(102deg,var(--red) 100%,var(--amber) 100%,var(--lilac))}}
.pill__link{color:#fff;font:500 18px/1 var(--f-mono);text-decoration:none;padding:5px 2px;border-bottom:3px solid transparent;transition:border-color .2s}
.pill__link:hover{border-bottom-color:#fff}
.pill__reserve{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:9px 14px;border-radius:8px;background:#fff;color:var(--red);font:500 16px/1 var(--f-mono);text-decoration:none;transition:transform .2s}
.pill__reserve:hover{transform:translateY(-2px)}
.pill__reserve .ico-arrow{width:16px;height:16px}
.lang{display:flex;align-items:center;gap:4px;color:#fff;font:500 14px/1 var(--f-mono)}
.lang__b{padding:4px 3px;border:0;background:none;color:#fff;cursor:pointer;opacity:.6}
.lang__b[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.pill__burger{display:none;align-items:center;gap:10px;padding:4px 0;border:0;background:none;color:#fff;font:500 16px/1 var(--f-mono);cursor:pointer}
.burger{position:relative;display:block;width:24px;height:18px;background:linear-gradient(#fff,#fff) left center / 100% 2px no-repeat}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:100%;height:2px;background:#fff;transition:transform .3s ease,top .3s ease}
.burger::before{top:0}.burger::after{top:16px}
.pill__burger[aria-expanded="true"] .burger{background:none}
.pill__burger[aria-expanded="true"] .burger::before{top:8px;transform:rotate(45deg)}
.pill__burger[aria-expanded="true"] .burger::after{top:8px;transform:rotate(-45deg)}
.bg-tint{position:fixed;inset:0;z-index:290;background-image:linear-gradient(102deg,var(--red),var(--amber) 50%,var(--lilac));opacity:0;pointer-events:none;transition:opacity .2s}
.bg-tint.is-on{opacity:.7}

.mnav{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;padding:48px 20px 120px;background:linear-gradient(to bottom,var(--red),var(--lilac));color:#fff}
.mnav[hidden]{display:none}
.mnav__links{display:flex;flex-direction:column;align-items:center;gap:2vh}
.mnav__links a{color:#fff;text-decoration:none;font:500 clamp(30px, 9vw, 64px)/1.15 var(--f-mono)}
.mnav__foot{display:flex;flex-direction:column;align-items:center;gap:18px}
.mnav__foot .lang{font-size:18px}
.mnav__sound{display:flex;align-items:center;gap:12px}

@media (max-width:991px){
  .pill{gap:18px;padding:10px 24px}
  .pill__link,.pill .lang{display:none}
  .pill__burger{display:inline-flex}
  .pill__reserve{margin-left:0;padding:8px 12px;font-size:15px}
  .hero__sound{display:none}
}

/* ================= DROP LAYER (2D physics, stands in for the 3D bagel drop) ================= */
.drop-layer{position:absolute;top:0;left:0;width:100%;height:0;overflow:hidden;pointer-events:none;z-index:15}
.drop-layer img{position:absolute;top:0;left:0;will-change:transform;filter:drop-shadow(0 10px 12px rgba(70,25,0,.3))}

/* ================= TOAST ================= */
.toast{position:fixed;left:16px;bottom:100px;z-index:400;max-width:300px;padding:14px 44px 14px 16px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.28);font:500 12.5px/1.5 var(--f-mono);opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.toast.is-on{opacity:1;transform:none}
.toast[hidden]{display:none}
.toast p{margin:0;line-height:1.5}
.toast__x{position:absolute;top:6px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.toast__x:hover{background:rgba(255,255,255,.15)}

/* ================= RESPONSIVE (reference breakpoints 991 / 767 / 479) ================= */
@media (max-width:991px){
  .hero__copy{flex-direction:column;gap:10px}
  .hero__cta{display:none}
  .topbar{flex-direction:column-reverse;gap:30px}
  .topbar__side--right{display:none}
  .topbar__brand{width:100%;justify-content:center}
  .dashes{flex:1;width:auto}
  .topbar__side{justify-content:center;max-width:none}
  .story__title{max-width:580px}
  .cards{flex-direction:column;max-width:430px;margin:0 auto}
  .card{width:auto}
  .learn{grid-column:3 / -3;padding-top:50px}
  .learn__title{font-size:var(--t-60);margin-bottom:20px;max-width:none}
  .learn__icon{top:auto;bottom:20px;right:0;width:70px}
  .learn__icon--left{left:auto;right:0;bottom:16px}
  .menu-grid{grid-template-columns:1fr 1fr}
  .menu-card--counter{grid-column:1 / -1}
  .footer__cards{grid-column:2 / -2;grid-row:2;flex-direction:column;align-items:stretch}
  .info-card{padding:30px;max-width:400px;width:100%;margin:0 auto}
  .pour-sticker{grid-column:2 / -2;grid-row:1;justify-self:center;width:160px;margin-bottom:30px}
  .footer__bottom{grid-row:3;margin-top:80px;padding-bottom:110px;flex-direction:column-reverse;align-items:flex-start}
  .giant{font-size:clamp(80px, 19vw, 350px)}
  .toast{bottom:96px}
}
@media (max-width:767px){
  .hero__copy{grid-column:2 / -2}
  .story{grid-column:2 / -2}
  .stamp{width:34%;top:-12%;right:0}
  .story__title{font-size:57px}
  .learn{grid-column:2 / -2}
  .learn__p{max-width:none}
  .learn__line{align-items:flex-start;flex-direction:column;gap:22px}
  .menu-grid{grid-template-columns:1fr}
  .menu-card{padding:26px 20px 20px}
  .menu-card--counter{flex-direction:column;align-items:flex-start}
  .mq{width:260px;height:230px}.mq.thin{width:170px}
  .giant{font-size:clamp(50px, 18vw, 350px)}
  .giant__tm{font-size:19px}
  .footer__links{flex-direction:row-reverse;justify-content:flex-end;gap:18px}
}
@media (max-width:479px){
  .topbar{padding:30px 20px 0}
  .hero__copy{padding:120px 0 90px}
  .hero__drop{left:20px}
  #story{padding:90px 0}
  .stamp{display:none}
  .story__title{font-size:clamp(45px, 11vw, 50px)}
  .card__media{height:240px}
  .card__body{padding:34px 24px 30px}
  .btn-red{padding:13px 22px;font-size:16px}
  .navdock{bottom:16px}
  .toast{left:12px;right:12px;max-width:none;bottom:86px}
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero__media img{transform:none}
  .marquee{overflow-x:auto}
}
@media (hover:none){.card__hover{display:none}}