:root{--maroon:#9A1C35;--maroon-d:#7A1428;--ink:#111111;--muted:#7A7A7A;--faint:#ABABAB;
      --line:#EEEEEE;--line2:#E4E4E4;--bg:#FFFFFF}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:'DM Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
     font-optical-sizing:auto;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
a{color:var(--maroon);text-decoration:none}
a:hover{color:var(--maroon-d)}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-0.035em;line-height:1.04}
p{margin:0}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 14px;border:1px solid var(--line2);border-radius:8px;z-index:20}

/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.hdr img{width:44px;height:44px;display:block}
.hdr nav{display:flex;align-items:center;gap:18px}
.hdr nav a{font-size:15px;font-weight:500;color:var(--ink)}
.hdr nav a[aria-current="page"]{color:var(--maroon)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 28px;
     border-radius:999px;font-size:16px;font-weight:500;border:1px solid transparent}
.btn-a{background:var(--maroon);color:#fff}
.btn-a:hover{background:var(--maroon-d);color:#fff}
.btn-b{border-color:var(--line2);color:var(--ink)}
.btn-b:hover{border-color:var(--ink);color:var(--ink)}

/* home */
.hero{display:flex;flex-direction:column;align-items:center;gap:30px;padding-top:36px;padding-bottom:44px;text-align:center}
.hero img{width:168px;height:168px}
.hero h1{font-size:34px}
.hero .city{font-size:17px;color:var(--muted)}
.hours{width:100%;max-width:520px;display:flex;flex-direction:column;gap:11px;
       border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.hours div{display:flex;justify-content:space-between;gap:16px;font-size:16px}
.hours span{color:var(--muted)}
.acts{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px}

/* page head */
.phead{padding-top:28px;padding-bottom:22px;display:flex;flex-direction:column;gap:16px}
.phead h1{font-size:40px}
.legend{display:flex;gap:22px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}

/* chips */
.chips{position:sticky;top:0;z-index:10;background:var(--bg);border-top:1px solid var(--line);
       border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:6px}
.chips .row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
            scrollbar-width:none;padding:0 24px}
.chips .row::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;white-space:nowrap;min-height:40px;padding:0 15px;
      border-radius:999px;border:1px solid var(--line2);font-size:14px;font-weight:500;color:var(--ink)}
.chip:hover{border-color:var(--maroon);color:var(--maroon)}

/* menu */
.menu{padding-top:6px;padding-bottom:34px}
details{border-top:1px solid var(--line);scroll-margin-top:74px}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{display:flex;align-items:center;gap:12px;min-height:66px;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary .t{font-size:19px;font-weight:500;letter-spacing:-0.025em;flex:1}
summary .n{font-size:13px;color:var(--faint)}
summary .s{width:20px;text-align:right;font-size:21px;color:var(--maroon);line-height:1}
summary .s::after{content:"+"}
details[open] summary .s::after{content:"\2212"}
.items{display:flex;flex-direction:column;gap:16px;padding:2px 0 30px}
.note{font-size:13.5px;line-height:1.5;color:#8A8A8A}
.item{display:flex;flex-direction:column;gap:2px}
.item .l{display:flex;align-items:baseline;gap:12px}
.item .nm{font-size:16px;font-weight:500;flex:1;letter-spacing:-0.01em}
.item .pr{font-size:16px;font-weight:500;color:var(--maroon);white-space:nowrap}
.item .ds{font-size:14px;line-height:1.5;color:var(--muted);padding-right:36px}

/* order */
.lead{font-size:16px;line-height:1.6;color:var(--muted)}
.tel{font-size:34px;font-weight:500;letter-spacing:-0.035em;display:inline-block}
.apps{display:flex;flex-direction:column;padding-top:6px}
.app{display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.app .sq{width:44px;height:44px;flex:none;border-radius:10px}
.app .tx{display:flex;flex-direction:column;gap:2px;flex:1}
.app .nmw{display:flex;align-items:center;gap:10px}
.app .nm{font-size:18px;font-weight:500;letter-spacing:-0.02em;color:var(--ink)}
.app .tag{font-size:11px;font-weight:600;letter-spacing:0.1em;color:var(--maroon)}
.app .sub{font-size:14px;color:var(--muted)}
.todo{font-size:13.5px;line-height:1.6;color:var(--maroon);padding-top:16px}

/* facts */
.facts{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);
       border-bottom:1px solid var(--line);padding:22px 0;font-size:16px}
.facts div{display:flex;justify-content:space-between;gap:16px}
.facts b{font-weight:500;color:var(--maroon)}
.facts span{color:var(--muted)}

/* footer */
footer{border-top:1px solid var(--line);margin-top:40px}
footer .in{display:flex;flex-direction:column;gap:16px;padding-top:30px;padding-bottom:40px}
footer .lk{display:flex;gap:22px;font-size:15px;font-weight:500}
footer .ad{font-size:14.5px;line-height:1.7;color:var(--muted)}
footer .cp{font-size:12.5px;color:var(--faint)}

.section{display:flex;flex-direction:column;gap:24px;padding-top:28px;padding-bottom:8px}

@media (min-width:900px){
  .wrap{padding:0 80px}
  .hdr{padding-top:26px;padding-bottom:26px}
  .hdr img{width:52px;height:52px}
  .hdr nav{gap:36px}
  .hero{gap:40px;padding-top:76px;padding-bottom:96px}
  .hero img{width:210px;height:210px}
  .hero h1{font-size:60px}
  .hero .city{font-size:21px}
  .hours{max-width:none;flex-direction:row;align-items:center;gap:40px;padding:24px 40px;font-size:17px}
  .hours div{gap:16px}
  .acts{max-width:none;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:12px}
  .acts .btn{padding:0 34px}
  .phead{padding-top:64px;padding-bottom:36px;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px}
  .phead h1{font-size:60px}
  .chips .row{flex-wrap:wrap;overflow:visible;padding:0 80px}
  .chips{padding:16px 0}
  .menu{columns:2;column-gap:64px;padding-top:36px;padding-bottom:60px}
  details{break-inside:avoid}
  .section{padding-top:56px;padding-bottom:8px;gap:28px}
  .lead{font-size:18px}
  .tel{font-size:44px;letter-spacing:-0.04em}
  .facts{flex-direction:row;align-items:center;gap:40px;padding:24px 0;font-size:17px}
  .facts div{gap:14px}
  .app{gap:18px;padding:24px 0}
  .app .sq{width:52px;height:52px;border-radius:12px}
  .app .nm{font-size:21px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
  .center{align-items:center;text-align:center}
  .center .facts{justify-content:center}
  footer .in{flex-direction:row;justify-content:space-between;align-items:flex-start;padding-top:40px;padding-bottom:48px}
}

/* ============================================================
   Motion
   Everything below this line is decoration. The site works with
   the whole block deleted, it works with JavaScript off, and it
   turns itself off for anyone whose system asks for less motion
   (the media query at the very bottom).
   ============================================================ */

/* --- the logo ------------------------------------------------ */
/* Header mark: tips and grows under the cursor, settles with a
   little overshoot. Hero mark: same idea, bigger, plus a soft
   maroon shadow and a wiggle when you click it. */
.hdr img{transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .4s ease}
.hdr a:hover img{transform:rotate(-7deg) scale(1.1)}
.hdr a:active img{transform:rotate(-7deg) scale(.97)}
.hdr a:focus-visible img{transform:rotate(-7deg) scale(1.1)}

.mark{display:inline-block;line-height:0;border:0;padding:0;background:none;cursor:pointer;
      border-radius:50%;-webkit-tap-highlight-color:transparent}
.mark img{transition:transform .5s cubic-bezier(.34,1.56,.64,1),filter .5s ease}
.mark:hover img,.mark:focus-visible img{transform:rotate(5deg) scale(1.07);
      filter:drop-shadow(0 16px 30px rgba(154,28,53,.22))}
.mark:active img{transform:rotate(5deg) scale(1)}
.mark.wig img{animation:wiggle .7s cubic-bezier(.36,.07,.19,.97)}
@keyframes wiggle{
  0%{transform:rotate(0) scale(1)}
  20%{transform:rotate(-9deg) scale(1.08)}
  40%{transform:rotate(7deg) scale(1.08)}
  60%{transform:rotate(-5deg) scale(1.05)}
  80%{transform:rotate(3deg) scale(1.02)}
  100%{transform:rotate(0) scale(1)}
}

/* --- entrances ----------------------------------------------- */
/* Only applied once JS has confirmed it is there (html.js), so a
   page with JS off shows everything immediately instead of a
   screen of permanently invisible elements. */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.js .hero>*{animation:rise .75s cubic-bezier(.2,.7,.3,1) backwards}
.js .hero>*:nth-child(1){animation-delay:.04s}
.js .hero>*:nth-child(2){animation-delay:.12s}
.js .hero>*:nth-child(3){animation-delay:.20s}
.js .hero>*:nth-child(4){animation-delay:.28s}
.js .hero>*:nth-child(5){animation-delay:.36s}

.js [data-reveal]{opacity:0;transform:translateY(18px);
      transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal].d1{transition-delay:.08s}
.js [data-reveal].d2{transition-delay:.16s}
.js [data-reveal].d3{transition-delay:.24s}

/* --- open right now ------------------------------------------ */
/* Filled in by site.js from the shop's own clock, so it is right
   whatever timezone the visitor is in. Hidden until then. */
.status{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 13px;border-radius:999px;
        border:1px solid var(--line2);font-size:14.5px;font-weight:500;background:var(--bg)}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none;position:relative}
.status.open{border-color:rgba(23,138,79,.3)}
.status.open .dot{background:#178A4F}
.status.open .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#178A4F;
        animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
.status.shut{color:var(--muted)}
.status[hidden]{display:none}
.status b{font-weight:500;color:var(--ink)}
.status span.sub{color:var(--muted)}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3);opacity:0}}

/* today's line in the hours table, marked by site.js */
.hours div{border-radius:8px;padding:2px 10px;margin:0 -10px;transition:background .3s ease}
.hours div.today{background:#FAF3F5}
.hours div.today b{color:var(--maroon)}

/* --- things you can tap -------------------------------------- */
.btn{transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-a:hover{box-shadow:0 10px 24px rgba(154,28,53,.26)}
.btn-b:hover{box-shadow:0 8px 20px rgba(0,0,0,.07)}
.btn:active{transform:translateY(0);box-shadow:none}

/* nav underline that draws itself in from the left */
.hdr nav a{position:relative;padding-bottom:3px}
.hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;
      transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.hdr nav a:hover::after,.hdr nav a[aria-current="page"]::after{transform:scaleX(1)}

.chip{transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease}
.chip:hover{transform:translateY(-1px)}
.chip.on{border-color:var(--maroon);background:var(--maroon);color:#fff}

.tel{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.tel:hover{transform:scale(1.03)}

/* --- menu ---------------------------------------------------- */
summary{transition:background .2s ease}
summary .t{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
summary:hover .t{transform:translateX(4px)}
summary:hover .s{color:var(--maroon-d)}
summary .s{transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .2s ease}
details[open] summary .s{transform:rotate(180deg)}
.js details[open] .items{animation:rise .4s cubic-bezier(.2,.7,.3,1)}

/* an item lights up and slides a hair right as you run down the list */
.item{padding-left:12px;margin-left:-12px;border-left:2px solid transparent;
      transition:border-color .2s ease,transform .2s cubic-bezier(.2,.7,.3,1)}
.item:hover{border-left-color:var(--maroon);transform:translateX(3px)}
.item .pr{transition:color .2s ease}
.item:hover .pr{color:var(--maroon-d)}

/* --- order page rows ----------------------------------------- */
.app{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.app .sq{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.app svg{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.app:hover{transform:translateX(4px)}
.app:hover .sq{transform:scale(1.08) rotate(-4deg)}
.app:hover svg{transform:translateX(5px)}

/* --- keyboard users get to see where they are ---------------- */
a:focus-visible,summary:focus-visible,.mark:focus-visible{outline:2px solid var(--maroon);
      outline-offset:3px;border-radius:6px}

/* --- less motion, if that is what the system asks for --------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .hdr a:hover img,.mark:hover img,.mark:focus-visible img{transform:none}
  .btn:hover,.item:hover,.app:hover,.chip:hover,.tel:hover,summary:hover .t{transform:none}
}