/* The Wedge — styles
   Palette/type tokens in lib/tokens.css. Zero external requests: no webfonts, no CDN, no images.
   Helvetica is not a fallback here, it is the choice — it is the typeface of the NYC subway. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                 /* belt: nothing may scroll the body sideways */
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
button, input { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.vh, .skip:not(:focus) {
  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:focus {
  position: fixed; top: 8px; left: 8px; z-index: 999; width: auto; height: auto;
  background: var(--deli-red); color: var(--paper); padding: .6rem 1rem; border-radius: var(--r);
}
:focus-visible { outline: 2px solid var(--mustard); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ── spec notice ────────────────────────────────────────────────────────── */
.specbar {
  background: var(--deli-red-lo); color: var(--paper);
  font-size: .8rem; line-height: 1.45; text-align: center;
  padding: .55rem var(--gut);
}
.specbar strong { letter-spacing: .02em; }

/* ── nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--hairline); background: color-mix(in srgb, var(--ink) 96%, transparent); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; }
.mark { text-decoration: none; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.mark__t { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.03em; text-transform: uppercase; }
.mark__s { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--paper-dim); }
.nav__ls { display: flex; gap: clamp(.85rem, 3vw, 1.75rem); }
.nav__ls a {
  text-decoration: none; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--paper-dim); padding: .35rem 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav__ls a:hover { color: var(--paper); border-bottom-color: var(--deli-red); }

/* ── shared section furniture ───────────────────────────────────────────── */
.sec { padding: var(--sec-y) 0; border-top: 1px solid var(--hairline); }
.eyebrow {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--deli-red-tx); font-weight: 700; margin: 0 0 .9rem;
  display: inline-block; padding-bottom: .45rem; border-bottom: 2px solid var(--deli-red-tx);
}
.sec__h { font-size: clamp(1.8rem, 1.15rem + 3vw, 3rem); margin: 0 0 1rem; max-width: 22ch; }
.sec__h-sub { display: block; font-size: .42em; font-weight: 500; letter-spacing: -0.01em; color: var(--paper-dim); margin-top: .5rem; }
.sec__note { color: var(--paper-dim); max-width: 62ch; }
.flag {
  font-size: .82rem; color: var(--paper-dim); background: var(--ink-2);
  border-left: 2px solid var(--mustard); padding: .7rem .85rem; border-radius: 0 var(--r) var(--r) 0;
  margin: .9rem 0 0;
}
.flag strong { color: var(--mustard); }
.lnk { background: none; border: 0; padding: 0; color: var(--mustard); text-decoration: underline; cursor: pointer; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.4rem; border-radius: var(--r); text-decoration: none;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  will-change: transform;
}
.btn--sm { padding: .6rem 1rem; font-size: .85rem; }
.btn--pri { background: var(--deli-red); color: #fff; }
/* Hover DARKENS rather than lightens. The first pass lightened to #d9463b, which dropped
   white-on-red to 4.29:1 and failed the contrast floor on hover only. */
.btn--pri:hover { background: #B02D24; }
.btn--sec { border-color: var(--hairline-2); color: var(--paper); }
.btn--sec:hover { border-color: var(--paper); background: rgba(245,238,226,.06); }
.btn__i { width: 1.05em; height: 1.05em; flex: none; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.hero__glow {
  position: absolute; top: -28vh; left: 50%; width: min(1100px, 150vw); aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(circle at 50% 50%, rgba(196,54,44,.22), rgba(217,163,43,.08) 42%, transparent 68%);
  pointer-events: none; z-index: 0;
}
.hero__in { position: relative; z-index: 1; }
.hero__h { font-size: clamp(3rem, 1.5rem + 11vw, 8rem); text-transform: uppercase; letter-spacing: -0.045em; margin: 0 0 1.1rem; }
.hero__h1 { display: block; }
.hero__lede { font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); max-width: 46ch; color: var(--paper); }
.hero__state { margin: 1.75rem 0 1.5rem; display: flex; flex-direction: column; gap: .85rem; align-items: flex-start; }
.hero__seat { font-size: .95rem; color: var(--paper-dim); max-width: 48ch; margin: 0; }
.hero__seat strong { color: var(--paper); }
.hero__ph { margin: .9rem 0 0; color: var(--paper-dim); font-size: .95rem; letter-spacing: .02em; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__stats {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem);
  margin: clamp(2.25rem, 6vw, 3.5rem) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--hairline);
}
.hero__stats li { display: flex; flex-direction: column; gap: .2rem; }
.stat { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 700; color: var(--mustard); line-height: 1; }
.stat__l { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--paper-faint); }

/* ── open-now indicator ─────────────────────────────────────────────────── */
.onow {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  border: 1px solid var(--hairline-2); background: var(--ink-2);
}
.onow__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--paper-faint); flex: none; }
.onow--open .onow__dot { background: #4CAF6D; box-shadow: 0 0 0 4px rgba(76,175,109,.18); }
.onow--shut .onow__dot { background: var(--deli-red); }
.onow__dot--idle { background: var(--mustard); }
.onow--unconfirmed { color: var(--paper-dim); }
.onow__sub { color: var(--paper-dim); font-weight: 400; }

/* ── proof / reviews ────────────────────────────────────────────────────── */
.sec--proof .sec__h { max-width: none; }
.rv-wrap { margin-top: 2rem; }
.rv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.rv__stage { position: relative; min-height: 11rem; display: grid; }
.rv__item {
  margin: 0; grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease);
}
.rv__item.is-on { opacity: 1; visibility: visible; }
.rv__item blockquote {
  margin: 0 0 1rem; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 1.5vw, 1.9rem); line-height: 1.25; letter-spacing: -0.02em;
  text-wrap: balance;
}
.rv__item blockquote::before { content: '\201C'; color: var(--deli-red-tx); }
.rv__item blockquote::after { content: '\201D'; color: var(--deli-red-tx); }
.rv__item figcaption { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--paper); }
.rv__via { color: var(--paper-faint); margin-left: .6rem; letter-spacing: .08em; text-transform: none; }
.rv__nav {
  background: none; border: 1px solid var(--hairline); border-radius: 50%;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center; cursor: pointer; color: var(--paper-dim);
  transition: border-color .2s, color .2s;
}
.rv__nav:hover { border-color: var(--paper); color: var(--paper); }
.rv__nav svg { width: 1.1rem; height: 1.1rem; }
.rv__dots { display: flex; gap: .45rem; margin-top: 1.25rem; justify-content: center; }
.rv__dot { width: .5rem; height: .5rem; padding: 0; border-radius: 50%; border: 0; background: var(--ink-3); cursor: pointer; transition: background .2s, width .2s; }
.rv__dot.is-on { background: var(--deli-red); width: 1.4rem; border-radius: 999px; }

/* JS-off fallback: the three static quotes stack instead of overlapping. */
.rv-wrap > .rv__item { visibility: visible; opacity: 1; padding-bottom: 1.75rem; border-bottom: 1px solid var(--hairline); margin-bottom: 1.75rem; }
.rv-wrap > .rv__item:last-child { border-bottom: 0; margin-bottom: 0; }

/* ── the room ───────────────────────────────────────────────────────────── */
.room__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2rem; }
.room__copy p { color: var(--paper-dim); max-width: 54ch; }
.room__copy p strong { color: var(--paper); }
.nophoto {
  border: 1px dashed var(--hairline-2); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3.5vw, 2rem); background: var(--ink-2);
}
.nophoto__h { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--paper); margin-bottom: .7rem; }
.nophoto p { color: var(--paper-faint); font-size: .9rem; margin: 0; }
.nophoto__h + p { margin-bottom: 0; }

/* gallery grid + lightbox (dormant on this build — empty manifest) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.gtile__btn { padding: 0; border: 0; background: none; cursor: pointer; display: block; width: 100%; border-radius: var(--r); overflow: hidden; }
.gtile__btn img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .4s var(--ease); }
.gtile__btn:hover img { transform: scale(1.04); }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(10,7,6,.94); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: clamp(1rem, 4vw, 3rem); }
.lb[hidden] { display: none; }
.lb__fig { margin: 0; display: grid; gap: .75rem; justify-items: center; }
.lb__img { max-height: 78vh; width: auto; object-fit: contain; }
.lb__cap { font-size: .85rem; color: var(--paper-dim); text-align: center; }
.lb__x { position: absolute; top: 1rem; right: 1rem; background: none; border: 0; color: var(--paper); font-size: 2rem; line-height: 1; cursor: pointer; }
.lb__nav { background: none; border: 1px solid var(--hairline-2); color: var(--paper); width: 2.75rem; height: 2.75rem; border-radius: 50%; font-size: 1.4rem; cursor: pointer; }

/* ── menu ───────────────────────────────────────────────────────────────── */
.mctl { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin: 1.75rem 0 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  background: var(--ink-2); border: 1px solid var(--hairline); color: var(--paper-dim);
  padding: .45rem .9rem; border-radius: 999px; font-size: .82rem; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { color: var(--paper); border-color: var(--hairline-2); }
.chip--on { background: var(--deli-red); border-color: var(--deli-red); color: #fff; font-weight: 600; }
.msearch { display: block; flex: 1 1 12rem; max-width: 18rem; }
.msearch input {
  width: 100%; background: var(--ink-2); border: 1px solid var(--hairline);
  border-radius: var(--r); padding: .55rem .8rem; color: var(--paper);
}
.msearch input::placeholder { color: var(--paper-faint); }
.mnote { font-size: .8rem; color: var(--paper-faint); margin: 0 0 1.5rem; }
.mempty { color: var(--paper-dim); padding: 1.5rem 0; }

.msec { margin-bottom: clamp(2rem, 5vw, 3rem); }
.msec[hidden] { display: none; }
.msec__h {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--mustard);
  padding-bottom: .6rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--hairline);
}
.mlist { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.mi { padding-bottom: 1.1rem; border-bottom: 1px solid var(--hairline); }
.mi[hidden] { display: none; }
.mi__head { display: flex; align-items: baseline; gap: .75rem; }
.mi__name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; flex: 1 1 auto; min-width: 0; }
/* Dot leader between name and price. It is the reason the price column reads as a price column. */
.mi__head::before {
  content: ""; order: 2; flex: 1 1 1.5rem; min-width: 1.5rem;
  align-self: flex-end; margin-bottom: .28em;
  border-bottom: 1px dotted var(--hairline-2);
}
.mi__price { order: 3; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--mustard); font-weight: 700; white-space: nowrap; }
.mi__flag {
  display: inline-block; margin-left: .55rem; vertical-align: middle;
  font-family: var(--body); font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--deli-red-tx); border: 1px solid var(--deli-red-tx);
  border-radius: 999px; padding: .12rem .45rem;
}
.mi__desc { margin: .4rem 0 0; font-size: .9rem; color: var(--paper-dim); max-width: 58ch; }
.mi__aka { margin: .3rem 0 0; font-size: .8rem; color: var(--paper-faint); font-style: italic; }

.counter-ask { margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.asklist { display: flex; flex-wrap: wrap; gap: .45rem; }
.asklist li {
  border: 1px solid var(--hairline-2); border-radius: 999px; padding: .4rem .85rem;
  font-size: .85rem; color: var(--paper-dim);
}

/* ── visit ──────────────────────────────────────────────────────────────── */
.visit__grid { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: 1fr; }
.card {
  background: var(--ink-2); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  transition: transform .35s var(--ease), border-color .25s var(--ease);
  transform-style: preserve-3d;
}
.card:hover { border-color: var(--hairline-2); }
.card__h { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--mustard); margin-bottom: .9rem; }
.card__big { font-size: 1.1rem; font-weight: 600; line-height: 1.45; margin-bottom: .5rem; }
.card__sub { font-size: .88rem; color: var(--paper-dim); margin-bottom: 1.1rem; }
.card--hours { grid-column: 1 / -1; }

.hours { display: grid; gap: .1rem; }
.hrow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--hairline); font-size: .92rem; }
.hrow dd { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--paper-dim); white-space: nowrap; }
.hrow--shut dd { color: var(--paper-faint); }
.hrow--today { color: var(--mustard); }
.hrow--today dd { color: var(--mustard); }
.hrow__tag { font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; margin-left: .5rem; color: var(--deli-red-tx); }
.hours__note { font-size: .82rem; color: var(--paper-faint); margin: .9rem 0 0; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--hairline); padding: clamp(2.5rem, 6vw, 4rem) 0 calc(clamp(2.5rem, 6vw, 4rem) + 4.5rem); background: #100C0A; }
.foot__in { display: grid; gap: 2rem; }
.foot__mark { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.1rem; margin-bottom: .6rem; }
.foot__addr { font-size: .9rem; color: var(--paper-dim); margin: 0 0 .25rem; }
.foot__note p { font-size: .78rem; color: var(--paper-faint); line-height: 1.6; max-width: 60ch; }
.foot__note strong { color: var(--paper-dim); }

/* ── sticky mobile action bar ───────────────────────────────────────────── */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; gap: .5rem; padding: .6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ink) 95%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--hairline);
  transform: translateY(110%); transition: transform .32s var(--ease);
}
.sticky.is-on { transform: translateY(0); }
.sticky__b {
  flex: 1; text-align: center; text-decoration: none; font-weight: 700; font-size: .92rem;
  padding: .8rem .5rem; border-radius: var(--r); border: 1px solid var(--hairline-2); color: var(--paper);
}
.sticky__b--pri { background: var(--deli-red); border-color: var(--deli-red); color: #fff; }

/* ── cursor glow: pointer:fine only ────────────────────────────────────── */
.cursor { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block; position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none;
    width: 26rem; height: 26rem; margin: -13rem 0 0 -13rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(217,163,43,.09), transparent 62%);
    will-change: transform;
  }
}

/* ── scroll reveals ────────────────────────────────────────────────────── */
/* Content is VISIBLE BY DEFAULT. The hidden-then-revealed state is opt-in, applied only after a
   head script confirms JS is running and motion is wanted (html.js-motion). Gating it this way
   means blocked, failed or disabled JavaScript yields a fully readable page instead of a blank
   one — the first version hid everything at opacity 0 and depended on JS to bring it back, which
   rendered the page empty inside a script-blocking sandbox. */
html.js-motion .rv-up {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.js-motion .rv-up.is-in { opacity: 1; transform: none; }

/* ── responsive ────────────────────────────────────────────────────────── */
/* Small phones: at 320 the wordmark plus three nav links measured 284px against 280px of
   available width, which clipped "Reviews" at the right edge. Drop the neighborhood line from
   the wordmark and tighten the nav so all three links fit rather than truncating one. */
@media (max-width: 419px) {
  .mark__s { display: none; }
  .nav__ls { gap: .55rem; }
  .nav__ls a { font-size: .7rem; letter-spacing: .06em; }
}
@media (min-width: 640px) {
  .mlist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); }
  .visit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .room__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .visit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card--hours { grid-column: auto; }
  .foot__in { grid-template-columns: 1fr 1.4fr; gap: 3rem; }
  .sticky { display: none; }          /* desktop has the hero CTA and the nav */
}
@media (min-width: 1200px) {
  .hero__lede { font-size: 1.4rem; }
}

/* ── reduced motion: total kill switch (JS has its own, independently) ──── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  html.js-motion .rv-up { opacity: 1 !important; transform: none !important; }
  .cursor { display: none !important; }
  .hero__glow { transform: none !important; }
  .gtile__btn:hover img { transform: none; }
  .sticky { transition: none; }
}