/* Section kit: what the industry section pieces (menu, hours-and-reserve, listings, pricing tiers, schedule…) share.
   Every value is the look's: colours and type from --ui-* then Sonder's shared --sx-* tokens, and the treatments a
   style adds on top of them, each with a quiet default so a look that sets none still draws cleanly:
     --sx-border      a card's edge (shorthand), e.g. "1px solid var(--sx-rule)"; default none
     --sx-shape       a card's corners (any border-radius, uneven for a painted look); default --sx-radius
     --sx-shadow      a card's shadow; default none
     --sx-texture     an image laid over card grounds (paper, wash, grain); default none
     --sx-texture-blend / --sx-texture-alpha / --sx-texture-size   how it sits (multiply, .5, cover; a tile's size
                      for a repeating paper or screen, 240px)
     --sx-img-filter  the look's photo treatment (a grade, a duotone filter); default none
     --sx-ease / --sx-speed   motion character over the tempo tokens (--t-ease, --t-hover, --t-reveal)
     --sx-chip        a chip's and a small button's corners; default max(--sx-radius, 2px)
   Resolved on .sk (never :root), so a section that sets --sx-ground re-colours what sits in it. */
.sk {
  --_g: var(--ui-ground, var(--sx-ground, #fff)); --_i: var(--ui-ink, var(--sx-ink, #121212));
  --_a: var(--ui-accent, var(--sx-accent, var(--_i))); --_on: var(--ui-on-accent, var(--sx-on-accent, var(--_g)));
  --_mu: var(--ui-mute, var(--sx-mute, color-mix(in srgb, var(--_i) 66%, var(--_g))));
  --_r: var(--ui-rule, var(--sx-rule, color-mix(in srgb, var(--_i) 16%, var(--_g))));
  --_alt: var(--sx-alt, color-mix(in srgb, var(--_i) 5%, var(--_g)));
  --_t: var(--ui-text, var(--sx-text, system-ui, sans-serif)); --_d: var(--ui-display, var(--sx-display, var(--_t)));
  --_mono: var(--sx-mono, ui-monospace, monospace);
  --_hw: var(--sx-h-weight, 500); --_ht: var(--sx-h-track, -0.02em); --_hc: var(--sx-h-case, none);
  --_rad: var(--ui-radius, var(--sx-radius, 0px)); --_shape: var(--sx-shape, var(--_rad));
  --_chip: var(--sx-chip, max(var(--_rad), 2px));
  --_edge: var(--sx-border, 0 solid transparent); --_shadow: var(--sx-shadow, none);
  --_tex: var(--sx-texture, none); --_imgf: var(--sx-img-filter, none);
  --_ease: var(--sx-ease, var(--t-ease, cubic-bezier(.16, 1, .3, 1)));
  --_ms: calc(var(--t-hover, 300ms) / var(--sx-speed, 1)); --_rv: calc(var(--t-reveal, 1000ms) / var(--sx-speed, 1));
  --_st: var(--t-stagger, 90ms);
  color: var(--_i); font: 400 17px/1.55 var(--_t);
}
.sk *, .sk *::before, .sk *::after { box-sizing: border-box; }
.sk :where(h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.sk :where(ul, ol) { list-style: none; padding: 0; }
:where(.sk) :where(a) { color: inherit; }
.sk-disp { font-family: var(--_d); font-weight: var(--_hw); letter-spacing: var(--_ht); text-transform: var(--_hc); }
.sk-h { font-size: var(--sk-h, clamp(34px, 4.4vw, 68px)); line-height: 1; text-wrap: balance; }
.sk-label { font: 500 12px/1.3 var(--_mono); letter-spacing: .08em; text-transform: uppercase; color: var(--_mu); }
.sk-mute { color: var(--_mu); }
.sk-num { font-variant-numeric: tabular-nums; }

/* A card in the look: its ground, edge, corners, shadow and texture. */
.sk-card { position: relative; isolation: isolate; background-color: var(--_alt); border: var(--_edge); border-radius: var(--_shape); box-shadow: var(--_shadow); }
.sk-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--_tex) center / var(--sx-texture-size, cover); mix-blend-mode: var(--sx-texture-blend, multiply); opacity: var(--sx-texture-alpha, .5); }
/* A card moves on the look's ease and speed (a lift, a press); a style's spring shows here and in the entrance. */
.sk-card { transition: translate var(--_ms) var(--_ease), box-shadow var(--_ms) var(--_ease), background-color var(--_ms) var(--_ease); }
/* A picture in the look's treatment. */
.sk-pic { position: relative; overflow: hidden; border-radius: var(--_shape); background: var(--_alt); }
.sk-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--_imgf); }

/* Chips: filters and marks. */
.sk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--_i) 28%, transparent);
  border-radius: var(--_chip); background: none; color: inherit; font: 500 15px/1 var(--_t); cursor: pointer;
  transition: background-color var(--_ms) var(--_ease), color var(--_ms) var(--_ease), border-color var(--_ms) var(--_ease); }
.sk-chip:hover { border-color: var(--_i); }
.sk-chip[aria-pressed="true"], .sk-chip[aria-selected="true"], .sk-chip[aria-current="true"] { background: var(--_i); color: var(--_g); border-color: var(--_i); }
.sk-chip:focus-visible, .sk-go:focus-visible, .sk-link:focus-visible { outline: 2px solid var(--_a); outline-offset: 3px; }
.sk-chips.is-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.sk-chips.is-row::-webkit-scrollbar { display: none; }
.sk-chips.is-row .sk-chip { flex: none; }

/* The look's button (the closing ask's, .sx-go) and a quiet text link. */
.sk-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 22px; border: 0;
  border-radius: max(var(--_rad), 2px); background: var(--_a); color: var(--_on); font: 600 16px/1.1 var(--_t); text-decoration: none; cursor: pointer;
  transition: translate var(--_ms) var(--_ease), filter var(--_ms) var(--_ease); }
.sk-go:hover { translate: 0 -2px; filter: brightness(1.05); }
.sk-go:active { translate: 0 0; scale: var(--t-press, .97); }
.sk-go.is-quiet { background: none; color: inherit; border: 1px solid currentColor; }
.sk-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sk-link:hover { text-decoration-thickness: 2px; }

/* The Sample mark (as Sonder's sites draw it): facts only the business can give, shown as examples. */
.sk [data-sample] { position: relative; }
.sk .s-tag { display: inline-block; margin-left: .6em; padding: .32em .6em .28em; border: 1px solid currentColor; border-radius: 99px; font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: .2em; opacity: .7; white-space: nowrap; font-variation-settings: normal; }
/* The forms' bot trap (a hidden field named website) stays out of sight. */
.sk .sx-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sk-note { margin-top: 20px; font-size: 14px; color: var(--_mu); }

/* An entrance on the look's tempo: the items rise in once the section is in view (kit.js adds .is-in). */
.sk [data-sk-in] { opacity: 0; translate: 0 14px; transition: opacity var(--_rv) var(--_ease), translate var(--_rv) var(--_ease); transition-delay: calc(var(--k, 0) * var(--_st)); }
.sk.is-in [data-sk-in], .sk-still [data-sk-in] { opacity: 1; translate: 0 0; }
/* Once in, a card's lift and press go back to the hover tempo, on the same ease. */
.sk.is-settled [data-sk-in] { transition: opacity var(--_ms) var(--_ease), translate var(--_ms) var(--_ease), box-shadow var(--_ms) var(--_ease), background-color var(--_ms) var(--_ease); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .sk [data-sk-in] { opacity: 1; translate: 0 0; transition: none; } .sk-chip, .sk-go { transition: none; } }
@media print { .sk [data-sk-in] { opacity: 1 !important; translate: 0 0 !important; } .sk-card { box-shadow: none; } .sk-card::before { display: none; } }