:root{
  --paper:  #FBF6E9;
  --paper-2:#F3ECD9;
  --card:   #FFFFFF;
  --ink:    #151513;
  --ink-2:  #55534C;
  --ink-3:  #8C887E;
  --rule:   #DED6BF;
  --red:    #E23D28;
  --green:  #1F7A45;
  --amber:  #C87A12;

  --state:  var(--ink);

  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --r-md: 12px;
  --ease: cubic-bezier(.2,.8,.24,1);
  --pad:  clamp(18px, 4.8vw, 62px);
}

body[data-state="open"]{ --state: var(--green); }
body[data-state="soon"]{ --state: var(--amber); }
body[data-state="shut"]{ --state: var(--red); }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
}
.skip{ position:absolute; left:-9999px; background:var(--ink); color:var(--paper); padding:12px 16px; z-index:99; }
.skip:focus{ left:0; top:0; }

.bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:10px var(--pad);
  background:rgba(251,246,233,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.logo{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:700; font-size:19px; letter-spacing:-.03em;
  color:var(--ink); text-decoration:none;
}
.clock{
  margin:0 auto 0 8px; padding:6px 11px;
  font:500 13px/1 var(--mono); letter-spacing:.06em;
  color:var(--ink-2); background:var(--paper-2);
  border:1px solid var(--rule); border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.bar-cta{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  font:500 14px/1 var(--sans); color:var(--paper); background:var(--ink);
  text-decoration:none; border-radius:999px;
  transition:background .16s var(--ease);
}
.bar-cta:hover{ background:var(--state); }

.now{ padding:clamp(44px,7vw,86px) var(--pad) clamp(34px,5vw,54px); }
.now-k{
  margin:0 0 20px; font:500 12px/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
h1{
  margin:0; font-weight:700;
  font-size:clamp(46px,10.5vw,124px); line-height:.94; letter-spacing:-.05em;
}
h1 .state{ color:var(--state); }
h1 .tail{ display:block; color:var(--ink); }
.until{
  margin:24px 0 0; font-size:clamp(16.5px,2.2vw,21px); line-height:1.5;
  color:var(--ink-2); max-width:44ch;
}
.fallback{
  margin:14px 0 0; font:400 13.5px/1.6 var(--mono); color:var(--ink-3);
  transition:opacity .4s var(--ease);
}

.fallback.quiet{ opacity:.62; }

.daybar{ margin-top:32px; max-width:640px; }
.db-track{
  position:relative; height:22px; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--rule); overflow:hidden;
}
.db-kitchen{
  position:absolute; left:0; top:0; bottom:0;
  background:repeating-linear-gradient(135deg, rgba(200,122,18,.16) 0 6px, transparent 6px 12px);
  border-right:1.5px dashed rgba(200,122,18,.55);
}
.db-kitchen span{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber);
}
.db-fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:color-mix(in srgb, var(--state) 26%, transparent);
  transition:width .5s var(--ease);
}
.db-mark{
  position:absolute; top:-5px; bottom:-5px; width:3px; left:0;
  background:var(--state); border-radius:2px;
  transition:left .5s var(--ease);
}
.db-ticks{
  display:flex; justify-content:space-between; margin-top:7px;
  font:400 11px/1 var(--mono); color:var(--ink-3);
}

.wrap{ padding:clamp(46px,6vw,80px) var(--pad); }
.week-wrap{ background:var(--paper-2); border-block:1px solid var(--rule); }
.eyebrow{
  margin:0 0 10px; font:500 12px/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--state);
}
h2{
  margin:0 0 30px; font-weight:700;
  font-size:clamp(24px,4vw,40px); line-height:1.08; letter-spacing:-.035em;
}
.head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:26px;
}
.head-row h2{ margin:0; }

.toggle{ display:flex; gap:4px; padding:4px; background:var(--paper-2); border:1px solid var(--rule); border-radius:999px; }
.tg{
  min-height:44px; padding:0 16px;
  font:500 13.5px/1 var(--sans); color:var(--ink-2);
  background:transparent; border:0; border-radius:999px; cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.tg.on{ background:var(--ink); color:var(--paper); }
.tg:focus-visible{ outline:2px solid var(--state); outline-offset:2px; }

.items{ list-style:none; margin:0; padding:0; max-width:760px; }
.items .kind{
  margin:26px 0 6px; padding-bottom:8px; border-bottom:1.5px solid var(--ink);
  font:500 11.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
}
.items .kind:first-child{ margin-top:0; }
.item{
  display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:12px;
  padding:12px 8px; border-bottom:1px solid var(--rule);
}
.i-name{ font-size:15.5px; }
.i-why{
  font:400 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--amber); border:1px solid rgba(200,122,18,.4);
  padding:5px 8px; border-radius:999px;
}
.i-price{ font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums; }

.item.off{ opacity:.42; }
.item.off .i-name{ text-decoration:line-through; text-decoration-thickness:1px; }
.empty{ padding:20px 8px; color:var(--ink-3); font-size:15px; }
.note{ margin:20px 0 0; font-size:13.5px; color:var(--ink-3); }

.week{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; max-width:620px; }
.week li{
  display:flex; align-items:center; gap:12px;
  background:var(--card); padding:14px 18px;
  font-size:15px;
}
.week .w-day{ flex:1; }
.week .w-time{ font-family:var(--mono); font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.week .today{ background:var(--ink); color:var(--paper); }
.week .today .w-time{ color:var(--paper); }
.w-tag{
  font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  background:var(--state); color:#fff; padding:5px 8px; border-radius:999px;
}

.v-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.v-card{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:24px 22px 26px;
  transition:transform .18s var(--ease), border-color .18s var(--ease);
}
.v-card b{
  display:block; margin-bottom:10px;
  font:500 11.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.v-card p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--ink-2); }

.foot{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:22px var(--pad) 30px; border-top:1px solid var(--rule);
}
.foot p{ margin:0; font-size:12.5px; color:var(--ink-3); }
.foot b{ color:var(--ink-2); }
.foot code{ font-family:var(--mono); font-size:12px; background:var(--paper-2); padding:2px 6px; border-radius:4px; }

@media (max-width:820px){
  .v-grid{ grid-template-columns:1fr; }
  .head-row{ align-items:flex-start; }
}
@media (max-width:520px){
  .item{ grid-template-columns:1fr auto; }
  .i-why{ grid-column:1 / -1; justify-self:start; margin-top:2px; }
}

@media (prefers-contrast:more){
  :root{ --ink-2:#33322D; --ink-3:#5A5750; --rule:#BBB097; }
}

.motion [data-enter], .motion [data-rise]{ opacity:0; transform:translateY(16px); }
.motion [data-enter].in, .motion [data-rise].in{
  opacity:1; transform:none;
  transition:opacity .55s var(--ease) var(--d,0ms), transform .55s var(--ease) var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  .motion [data-enter], .motion [data-rise]{ opacity:1 !important; transform:none !important; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .item{ transition:background .16s var(--ease), padding-left .16s var(--ease); border-radius:5px; }
  .item:not(.off):hover{ background:var(--paper-2); padding-left:14px; }
  .v-card:hover{ transform:translateY(-3px); border-color:var(--ink); }
  .week li{ transition:padding-left .16s var(--ease); }
  .week li:not(.today):hover{ padding-left:24px; }
}