/* ==========================================================================
   Beauty Genesis - price list
   --------------------------------------------------------------------------
   Loaded after /styles.css, which supplies the tokens, fonts, reset, the fixed
   .ambient backdrop, .social and .foot__legal. Nothing here overrides them.

   Source of truth: ~/Downloads/Price-list-final.pdf (11 Sep 2026).

   The arch header is lifted from the printed menu. It is the one deliberate
   shape outside the 24px card / 12px control radius scale.
   ========================================================================== */

html { scroll-padding-top: 1.25rem; }

@media (prefers-reduced-motion: no-preference) {
  html  { scroll-behavior: smooth; }
  .menu { animation: rise 1s var(--ease) both; }
}

/* --- card --- */
/* No backdrop-filter, unlike the homepage card: the backdrop is already a
   pre-blurred still, and a blur on a tall scrolling element repaints on every
   scroll frame on phones. The veil alone composites to the same ratios the
   homepage measured (ink 8.30:1, body 6.12:1, meta 4.64:1). */
.menu {
  /* flow-root stops the arch's top margin collapsing through the card: without
     it the card is pushed down on phones and the arch sits flush on desktop. */
  display: flow-root;
  width: min(100% - 2rem, 70rem);
  margin: clamp(1rem, 4vw, 3rem) auto;
  border-radius: var(--r-card);
  background: var(--veil);
  box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / .34);
  color: var(--on-veil);
}
@media (prefers-reduced-transparency: reduce) {
  .menu { background: var(--veil-solid); }
}

/* --- arch --- */
/* A true semicircular top needs height >= half the width; 16/9 guarantees it
   while still letting content grow the box on narrow screens. */
.menu__head {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: .55rem;
  width: min(100% - 2rem, 36rem);
  aspect-ratio: 16 / 9;
  margin: clamp(1rem, 3vw, 1.75rem) auto 0;
  padding: clamp(2.25rem, 6vw, 3.5rem) 1.5rem clamp(1.75rem, 4vw, 2.5rem);
  border-radius: 999px 999px var(--r-ctl) var(--r-ctl);
  background: var(--ink);
  color: #fbf5ef;                               /* 12.77:1 on --ink */
  text-align: center;
}
.menu__head a:focus-visible { outline-color: #fbf5ef; }

.menu__home {
  display: grid;
  justify-items: center;
  gap: .65rem;
  border-radius: var(--r-ctl);
}
.menu__mark {
  width: 2.6rem;
  aspect-ratio: 240 / 288;
  background: currentColor;
  -webkit-mask: url('/assets/img/genesis-mark.png') center / contain no-repeat;
          mask: url('/assets/img/genesis-mark.png') center / contain no-repeat;
}
.menu__brand {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: .8125rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding-left: .3em;                           /* optically re-centre the tracking */
}
.menu__title {
  margin-top: .35rem;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.menu__place {
  font-size: .875rem;
  color: rgb(251 245 239 / .8);
}

/* --- category chips --- */
.menu__nav { padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 4vw, 3.5rem) 0; }
.menu__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.menu__nav a {
  display: inline-block;
  padding: .5rem .95rem;
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
  border: 1px solid rgb(56 42 32 / .2);
  border-radius: var(--r-ctl);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.menu__nav a:hover { background: rgb(56 42 32 / .06); color: var(--ink); }

/* --- the list --- */
/* Multi-column rather than a grid: categories run from 3 to 21 rows, and
   columns balance uneven blocks without a hand-tuned layout. 22rem minimum
   means phones fall back to a single column on their own. */
.menu__body {
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.5rem) clamp(.5rem, 2vw, 1rem);
  columns: 2 22rem;
  column-gap: clamp(2rem, 5vw, 4.5rem);
}

.cat {
  break-inside: avoid;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.cat h2 {
  margin: 0;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  letter-spacing: -.01em;
  color: var(--ink);
}
.cat__note {
  margin-top: .15rem;
  font-size: .8125rem;
  color: var(--meta);
}
.cat dl { margin: .75rem 0 0; }

/* Name, dotted leader, price. The leader is the row's own ::after, pulled
   into the middle track with `order`, so the markup stays a plain dt/dd pair.
   align-items: end keeps the price on the LAST line when a name wraps. */
.row {
  display: grid;
  grid-template-columns: auto minmax(1.25rem, 1fr) auto;
  align-items: end;
  column-gap: .55rem;
  padding-block: .3rem;
}
.row dt {
  order: 0;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink);
}
.row::after {
  content: "";
  order: 1;
  border-bottom: 1px dotted rgb(56 42 32 / .32);
  transform: translateY(-.34em);
}
.row dd {
  order: 2;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.45;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  color: var(--ink);
}
.from,
.save {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--meta);
}
.from { font-style: italic; margin-right: .15rem; }

/* --- footer --- */
.menu__foot {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin: 0 clamp(1.25rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline-2);
  text-align: center;
}
.menu__voucher {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  color: var(--ink);
}
.menu__contact {
  font-style: normal;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--body);
}
.menu__contact a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

/* --- phones --- */
@media (max-width: 560px) {
  .menu {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  /* Chips scroll sideways inside their own strip instead of wrapping into a
     five-row block. The page itself never scrolls horizontally. */
  .menu__nav { padding-inline: 0; }
  .menu__nav ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 1rem .25rem;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1rem;  /* snap to the padded edge, or the first chip is pulled flush and clipped */
    scrollbar-width: none;
  }
  .menu__nav ul::-webkit-scrollbar { display: none; }
  .menu__nav li { flex: none; scroll-snap-align: start; }
}