/* Two neutrals from the shop's sign, flour and pine, and one hot contrast from its red brick and mulch. */
:root{--flour:#F4EEE1;--pine:#10241C;--hot:#E2401C;--flour-2:rgba(244,238,225,.68);--pine-2:rgba(16,36,28,.66);--line:rgba(16,36,28,.2);--line-l:rgba(244,238,225,.22);
  --disp:Gloock,"Times New Roman",serif;--it:"Instrument Serif",Georgia,serif;--sans:"Instrument Sans",Arial,sans-serif;--pad:clamp(18px,4.4vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--flour);color:var(--pine);font:400 17px/1.55 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:400}
:focus-visible{outline:2.5px solid var(--hot);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:90;background:var(--pine);color:var(--flour);padding:9px 13px}
.skip:focus{top:12px}
/* Fine paper grain over everything. */
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

.kicker{margin:0 0 14px;font:500 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.kicker em{font:italic 400 19px var(--it);letter-spacing:0;text-transform:none;margin-left:6px;opacity:.75}
.kicker.light{color:var(--flour)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 27px;border-radius:99px;font:500 16px/1 var(--sans);letter-spacing:.005em;text-decoration:none;transition:transform .25s cubic-bezier(.2,.9,.3,1.3),background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn-a{background:var(--hot);color:var(--flour)}
.btn-o{box-shadow:inset 0 0 0 1.5px currentColor}
.btn-o:hover{background:var(--pine);color:var(--flour);box-shadow:none}
.btn-s{padding:11px 21px;font-size:15px}
.cta{display:flex;flex-wrap:wrap;gap:10px}

/* Header */
.top{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;gap:24px;padding:13px var(--pad);transition:background .3s,box-shadow .3s}
.top.stuck{background:rgba(244,238,225,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.mark{font:400 31px/1 var(--disp);text-decoration:none;letter-spacing:-.01em}
.top nav{display:flex;gap:24px;margin-left:12px}
.top nav a{text-decoration:none;font-size:15px;position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:var(--hot);transition:right .25s}
.top nav a:hover::after{right:0}
.top-r{margin-left:auto;display:flex;align-items:center;gap:15px}
.live{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--pine);opacity:.35}
.live.open i{background:var(--hot);opacity:1;animation:pu 2.2s infinite}
@keyframes pu{50%{box-shadow:0 0 0 5px rgba(226,64,28,.18)}}

/* Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:96px var(--pad) 0;overflow:hidden}
.hero-bagel{position:absolute;right:calc(var(--pad) * -.5);top:calc(50% + 16px);width:min(58vw,82vh);aspect-ratio:1;margin-top:calc(min(58vw,82vh) / -2);will-change:transform}
.hero-bagel canvas{position:absolute;inset:9%;width:82%;height:82%;opacity:0;filter:drop-shadow(0 34px 34px rgba(60,32,8,.34));transition:opacity 1s}
.hero-bagel canvas.in{opacity:1}
#ringSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;font:500 19.5px var(--sans);letter-spacing:.235em;fill:var(--pine)}
.hero-in{position:relative;z-index:2;margin-bottom:clamp(24px,5vh,50px)}
h1{font:400 clamp(58px,9.3vw,158px)/.93 var(--disp);letter-spacing:-.022em}
h1 em{font:italic 400 1.1em/.8 var(--it);color:var(--hot);letter-spacing:-.02em;padding-right:.04em}
.lede{max-width:27em;font-size:clamp(17px,1.5vw,20px);line-height:1.45;margin:22px 0 24px}
.facts{position:relative;z-index:2;list-style:none;display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(20px,4vw,62px);margin:0 calc(var(--pad) * -1);padding:15px var(--pad) 18px;border-top:1px solid var(--line);font-size:14.5px;background:var(--flour)}
.facts b{font:400 19px var(--disp);margin-right:5px}

/* Flavor wheel */
.dial{background:var(--pine);color:var(--flour);padding:clamp(56px,8vw,104px) var(--pad);overflow:hidden}
.dial-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(30px,6vw,88px);align-items:center;max-width:1380px;margin:auto}
.wheel{position:relative;width:min(100%,76vh);aspect-ratio:1;margin:auto;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;border-radius:50%}
.wheel.held{cursor:grabbing}
.wheel::before{content:"";position:absolute;inset:3.9%;border-radius:50%;border:1px solid var(--line-l)}
.ring-items{position:absolute;inset:0}
.thumb{position:absolute;left:50%;top:50%;width:11.4%;aspect-ratio:1;padding:0;border-radius:50%;transition:filter .2s}
.thumb canvas{width:100%;height:100%;display:block;transition:transform .35s cubic-bezier(.2,.9,.3,1.4);filter:drop-shadow(0 4px 5px rgba(0,0,0,.4));pointer-events:none}
.thumb:hover canvas{transform:scale(1.13)}
.thumb.on canvas{transform:scale(1.36)}
.thumb span{position:absolute;left:50%;bottom:104%;transform:translateX(-50%);white-space:nowrap;background:var(--flour);color:var(--pine);font:500 12.5px var(--sans);padding:3px 8px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:3}
.thumb:hover span,.thumb:focus-visible span{opacity:1}
.tick{position:absolute;right:-1.6%;top:50%;width:0;height:0;margin-top:-9px;border:9px solid transparent;border-right:14px solid var(--hot);border-left:0}
#centerBagel{position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 26px 30px rgba(0,0,0,.5))}
#centerBagel.pop{animation:pop .55s cubic-bezier(.2,.9,.3,1.25)}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.82) rotate(-24deg);opacity:.25}to{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}
.dial-nav{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:17px;font:italic 400 19px var(--it);color:var(--flour-2)}
.dial-nav button{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-l);color:var(--flour);transition:background .2s,color .2s}
.dial-nav button:hover{background:var(--flour);color:var(--pine)}
#flavorName{font:400 clamp(50px,6.6vw,104px)/.95 var(--disp);letter-spacing:-.018em;min-height:1.9em;display:flex;align-items:flex-end}
.note{font:italic 400 clamp(21px,2vw,27px)/1.25 var(--it);color:var(--flour-2);margin:14px 0 24px;min-height:2.5em}
.dial-text h3{font:500 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:11px}
.spreads{display:flex;flex-wrap:wrap;gap:6px}
.spreads button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 8px;border-radius:99px;font-size:14.5px;box-shadow:inset 0 0 0 1px var(--line-l);transition:background .15s,color .15s}
.spreads i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(244,238,225,.3)}
.spreads button:hover{box-shadow:inset 0 0 0 1px var(--flour)}
.spreads button.on{background:var(--flour);color:var(--pine)}
.ticket{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line-l)}
.ticket>div{display:grid;gap:1px;font-size:15.5px}
.ticket strong{font:400 27px/1.15 var(--disp)}

/* Regulars */
.regulars{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center;padding:clamp(66px,9vw,130px) var(--pad);max-width:1380px;margin:auto}
.plate{margin:0;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative}
.plate img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(1.05);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.plate:hover img{transform:scale(1.12)}
.regulars h2,.menu-head h2,.story h2,.visit h2{font:400 clamp(44px,6vw,92px)/.98 var(--disp);letter-spacing:-.018em}
.big{font:400 clamp(23px,2.2vw,31px)/1.25 var(--it);margin:19px 0 24px}
blockquote{margin:0;padding:13px 0;border-top:1px solid var(--line);font-size:17px}
cite{display:block;font:400 13.5px var(--sans);color:var(--pine-2);margin-top:2px}

/* Menu */
.menu{padding:clamp(40px,6vw,80px) var(--pad) clamp(70px,9vw,120px);border-top:1px solid var(--line);max-width:1380px;margin:auto}
.menu-head{margin-bottom:clamp(30px,5vw,62px)}
.menu-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:start}
.menu-index{position:sticky;top:86px;display:grid;gap:1px;font-size:15.5px}
.menu-index a{text-decoration:none;padding:5px 0 5px 15px;color:var(--pine-2);position:relative;transition:color .2s}
.menu-index a::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transform:scale(0);transition:transform .25s}
.menu-index a:hover,.menu-index a.on{color:var(--pine)}
.menu-index a.on::before{transform:scale(1);background:var(--hot);color:var(--hot)}
.menu-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4vw,62px) clamp(30px,5vw,72px);align-items:start}
.m-sec header{position:relative;margin-bottom:10px}
.m-sec h3{font:400 clamp(30px,3vw,41px)/1.03 var(--disp);letter-spacing:-.01em}
.m-sec header p{margin:7px 0 0;font:italic 400 19px/1.25 var(--it);color:var(--pine-2)}
.cols{display:flex;justify-content:flex-end;gap:12px;margin-top:9px;font-size:12px;letter-spacing:.05em;color:var(--pine-2)}
.cols span{min-width:64px;text-align:right}
.items{list-style:none;margin:0;padding:0}
.item{padding:9px 0 9px;border-top:1px solid var(--line);transition:padding .2s}
.item:hover{padding-left:6px}
.it-main{display:flex;align-items:baseline;gap:8px}
.it-name{font-weight:500}
.dots{flex:1}
.it-price{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.item:hover .it-price{color:var(--hot)}
.it-price.flip{animation:fl .32s}
@keyframes fl{from{transform:translateY(-8px);opacity:0;color:var(--hot)}to{transform:none;opacity:1}}
.p2{display:flex;gap:12px}.p2 b{font-weight:500;min-width:64px;text-align:right}
.it-desc{margin:2px 0 0;font-size:14.5px;line-height:1.38;color:var(--pine-2);max-width:32em}
.also{margin:10px 0 0;font-size:14.5px;line-height:1.4;color:var(--pine-2)}.also b{color:var(--pine);font-weight:500}
.bread{position:relative;display:inline-grid;grid-template-columns:repeat(3,1fr);margin-top:13px;padding:3px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);--x:0%}
.bread i{position:absolute;left:3px;top:3px;bottom:3px;width:calc((100% - 6px) / 3);border-radius:99px;background:var(--pine);transform:translateX(var(--x));transition:transform .3s cubic-bezier(.3,1.2,.4,1)}
.bread button{position:relative;padding:7px 18px;font-size:14.5px;font-weight:500;transition:color .2s}
.bread button.on{color:var(--flour)}
.fine{grid-column:1/-1;font:italic 400 18px var(--it);color:var(--pine-2);margin:0}

/* Story */
.story{background:var(--pine);color:var(--flour);padding:clamp(66px,9vw,130px) var(--pad)}
.story-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,26px);max-width:1380px;margin:auto;align-items:start}
.story-text{grid-column:1/7;grid-row:1/3}
.story h2 em{font:italic 400 1.04em/1 var(--it);color:var(--flour)}
.story p:not(.kicker){max-width:31em;margin:22px 0 0;font-size:18px;color:rgba(244,238,225,.86)}
.story a{color:var(--flour);text-decoration-color:var(--hot);text-underline-offset:3px;text-decoration-thickness:2px}
.story figure{margin:0;overflow:hidden;border-radius:4px}
.story figure img{width:100%;height:100%;object-fit:cover}
.ph-a{grid-column:8/13;aspect-ratio:4/3}
.ph-b{grid-column:7/12;aspect-ratio:3/2;margin-top:clamp(0px,1vw,14px)!important}

/* Visit */
.visit{padding:clamp(66px,9vw,120px) var(--pad);max-width:1380px;margin:auto}
.visit-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,.8fr);gap:clamp(26px,4.4vw,62px);align-items:start}
.big-live{font-size:17px;margin:18px 0 20px;font-weight:500}
.links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px}
.links a{text-decoration:none;font-weight:500;border-bottom:1.5px solid var(--hot);padding-bottom:1px}
.links span{color:var(--hot)}
.hours-list{list-style:none;margin:6px 0 0;padding:0}
.hours-list li{display:flex;justify-content:space-between;gap:10px;padding:9.5px 0;border-top:1px solid var(--line);font-size:16px}
.hours-list li.today{font-weight:600}
.hours-list li.today span:first-child::after{content:" (today)";font-weight:400;color:var(--hot)}
.sign{margin:0}
.sign img{border-radius:4px;aspect-ratio:3/4;object-fit:cover;width:100%}
.sign figcaption{font:italic 400 19px var(--it);margin-top:7px}

/* Footer */
.foot{background:var(--pine);color:var(--flour);padding:clamp(34px,5vw,60px) var(--pad) clamp(26px,3vw,40px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;overflow:hidden}
.foot-mark{margin:0;font:400 clamp(100px,23vw,340px)/.74 var(--disp);letter-spacing:-.03em}
.foot-r{font-size:15.5px}.foot-r p{margin:0 0 12px}
.foot .fine{color:var(--flour-2);font-size:16px}

/* Order sheet */
dialog{border:0;padding:clamp(24px,4vw,40px);max-width:460px;width:calc(100% - 26px);background:var(--flour);color:var(--pine);border-radius:6px}
dialog::backdrop{background:rgba(16,36,28,.68);backdrop-filter:blur(4px)}
dialog h2{font:400 clamp(34px,5vw,48px)/1 var(--disp);margin-bottom:18px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 3px;border-top:1px solid var(--line);text-decoration:none;font-size:15px;transition:padding .2s,color .2s}
.opt b{font:400 25px var(--disp)}
.opt:hover{padding-left:9px;color:var(--hot)}
.x{position:absolute;right:13px;top:9px;font-size:30px;line-height:1;padding:5px 9px}
.dock{display:none}

/* Reveals */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (scripting:none){.rv{opacity:1;transform:none}}

@media (max-width:1040px){
  .menu-body{grid-template-columns:1fr}
  .visit-in{grid-template-columns:1fr 1fr}
  .visit-in>div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .top{gap:12px;padding:10px var(--pad)}
  .top nav{display:none}
  .top .btn-s{display:none}
  .hero{justify-content:flex-start;padding-top:76px}
  .hero-bagel{right:auto;left:50%;top:auto;bottom:-24vw;width:104vw;margin:0 0 0 -52vw;z-index:0}
  .menu-head h2 br{display:none}
  .hero-in{margin-bottom:0}
  h1{font-size:clamp(58px,17vw,122px)}
  .lede{margin:14px 0 16px;max-width:none;font-size:17px}
  .facts{display:none}
  .hero .btn{padding:13px 22px}
  .dial-in{grid-template-columns:1fr;gap:18px}
  .tick{right:auto;top:auto;left:50%;bottom:-1.5%;margin:0 0 0 -9px;border:9px solid transparent;border-bottom:14px solid var(--hot);border-top:0}
  .wheel{width:min(100%,88vw)}
  #flavorName{min-height:0;font-size:clamp(46px,13vw,88px)}
  .note{min-height:0;margin:9px 0 18px}
  .regulars{grid-template-columns:1fr}
  .plate{max-width:540px;width:100%;margin:auto}
  .menu-grid{grid-template-columns:1fr;gap:12px}
  .menu-index{position:sticky;top:50px;z-index:10;display:flex;overflow-x:auto;gap:4px;margin:0 calc(var(--pad) * -1);padding:9px var(--pad);background:rgba(244,238,225,.95);backdrop-filter:blur(8px);scrollbar-width:none;border-bottom:1px solid var(--line)}
  .menu-index::-webkit-scrollbar{display:none}
  .menu-index a{flex:none;padding:6px 12px;border-radius:99px;font-size:14.5px;white-space:nowrap}
  .menu-index a::before{display:none}
  .menu-index a.on{background:var(--pine);color:var(--flour)}
  .story-text{grid-column:1/-1;grid-row:auto}
  .ph-a{grid-column:1/9;margin-top:14px!important}.ph-b{grid-column:4/13}
  body{padding-bottom:56px}
  .dock{position:fixed;z-index:60;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.2fr 1fr;height:56px;padding-bottom:env(safe-area-inset-bottom);background:var(--pine);color:var(--flour)}
  .dock>*{display:grid;place-items:center;text-decoration:none;font-weight:500;font-size:15px;color:var(--flour)}
  .dock button{background:var(--hot)}
}
@media (max-width:560px){
  .visit-in{grid-template-columns:1fr}
  .kicker em{display:block;margin:3px 0 0}
}
@media (max-width:900px) and (max-height:800px){
  .hero{min-height:800px}
}

/* Phones: keep scrolling smooth. Live blur and the full-screen grain are repainted constantly as the page moves. */
@media (max-width:900px){
  body::after{display:none}
  .top.stuck{background:var(--flour);backdrop-filter:none;-webkit-backdrop-filter:none}
  .menu-index{background:var(--flour);backdrop-filter:none;-webkit-backdrop-filter:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .live.open i{animation:none}
  .item,.item:hover{padding-left:0;transition:none}
  .item:hover .it-price{color:inherit}
  #centerBagel,.thumb canvas,.hero-bagel canvas{filter:none}
}