/* Hallmark · shape: Mosaic spread · genre: editorial · theme: Atelier (deal 1/3, seed luxury-nail-salon-day-2886·13b03a02·2026-11-05·r0) · job: book · draw: 7183c5 · redesign: full (direction E2, chosen by the owner)
 * hero: Banner (/menu) · nav: banner over a sticky bar that stays on scroll, a jump bar under it · footer: index columns · imagery: photographs, three per menu held together · signature: three photographs of each menu held still on one side while its prices run free on the other, the figure set first and large · copy: verbatim
 * axes: dark/roman-serif/warm · posture: committed (gold carries the heads and the reading text, by request) · modes: dark (default) + light · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: V, eight spreads share one shape; the mosaic swaps sides and each menu brings its own three photographs */
/* Hallmark · photographs: three Unsplash License stand-ins per menu, each in a data-slot the salon's own photographs replace */
/* Hallmark · copy verbatim: the salon's full price list and the drinks, word for word from the current site */
/* Hallmark · answered F20 · the prices sit open with no boxes, so a group that ends on one price reads as a short last line, not a gap in a grid */
/* Hallmark · dismissed 59 · a price list of seven menus and the drinks, each its own section by the owner's request that everything stays open */
@import url("./site.css");

.page-head { padding-bottom: var(--space-xl); }
.jumpbar + .mo-cat { padding-top: var(--space-xl); scroll-margin-top: calc(var(--bar-h) + 64px + var(--space-lg) - var(--space-3xl) - var(--space-xl)); }

/* The jump bar: every menu one tap away, the booking at its end */
.jumpbar { position: sticky; top: var(--bar-h); z-index: var(--z-sticky); background: var(--color-paper); border-block: var(--rule-hair) solid var(--color-rule); }
.jumpbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; }
.jumpbar ul { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.jumpbar ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.jumpbar ul a:hover { color: var(--color-ink); }
.jumpbar ul a[aria-current="true"] { color: var(--color-ink); border-bottom-color: var(--color-second-light); }
.jumpbar ul a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* A spread: the mosaic held still on one side, the menu running free on the other */
/* An anchor jump already clears the html scroll-padding (one --space-3xl); this margin then takes off the
   section's own top padding, so the heading lands a --space-lg under the jump bar, with or without smooth scroll */
.mo-cat { padding-block: var(--space-3xl) var(--space-4xl); scroll-margin-top: calc(var(--bar-h) + 64px + var(--space-lg) - 2 * var(--space-3xl)); }
.mo-cat + .mo-cat { border-top: var(--rule-hair) solid var(--color-rule); }
.mo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap-columns); align-items: start; }
.mo-mosaic { grid-column: 1 / span 6; grid-row: 1; position: sticky; top: calc(var(--bar-h) + 64px + var(--space-lg)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.mo--flip .mo-mosaic { grid-column: 7 / span 6; }
.mo-mosaic figure { margin: 0; overflow: hidden; }
.mo-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mo-mosaic__a { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.mo-mosaic__b, .mo-mosaic__c { aspect-ratio: 4 / 3; }
.mo-text { grid-column: 8 / -1; grid-row: 1; display: grid; align-content: start; }
.mo--flip .mo-text { grid-column: 1 / span 5; }
.mo-text h2 { font-size: var(--text-section); overflow-wrap: break-word; min-width: 0; }
.mo-intro { margin-top: var(--space-md); max-width: 44ch; color: var(--color-muted); }
.mo-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); }
.mo-from { font: var(--display-weight) var(--text-2xl)/1 var(--font-display); color: var(--color-second-light); }
.mo-group { margin: var(--space-3xl) 0 var(--space-xs); font-size: var(--text-xl); color: var(--color-second-light); }
.mo-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.mo-group + .mo-items { margin-top: var(--space-lg); }
.mo-item { display: grid; gap: var(--space-xs); align-content: start; }
.mo-item__price { font: var(--display-weight) var(--text-3xl)/1 var(--font-display); letter-spacing: -0.01em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.mo-item__price small { margin-right: var(--space-3xs); font: 400 var(--text-sm)/1 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
.mo-item__name { color: var(--color-ink-2); line-height: 1.4; }
.mo-item:not(:has(.mo-item__price)) .mo-item__name { font: var(--display-weight) var(--text-xl)/1.2 var(--font-display); color: var(--color-ink); }

@media (max-width: 60rem) {
  .jumpbar .btn { display: none; }
  .mo-cat { padding-block: var(--space-2xl); }
  .mo { display: block; }
  .mo-mosaic { position: static; margin-bottom: var(--space-xl); }
  .mo-text h2 { font-size: var(--text-3xl); }
  .mo-items { gap: var(--space-lg) var(--space-md); }
  .mo-item__price { font-size: var(--text-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .jumpbar ul a { transition: none; }
}