/*
 * Haus of Contour — the aesthetics menu.
 *
 * Only what /aesthetics adds on top of menu.css: the category headings that
 * group the index rows, and the flag on the one service that carries a note.
 * Everything else on the page — the index rows, the treatment blocks, the
 * bands, the detail grids — is menu.css and site.css unchanged.
 *
 * /treatments has four services and reads as one list. This menu has eleven
 * across five categories, and an undifferentiated run of eleven rows loses the
 * reader well before the end of it.
 */

/* ------------------------------------------------------- category headings */

/*
 * The heading sits directly on top of its first row, and that row's own
 * border-top becomes the rule beneath the heading. So the heading itself
 * carries no border: adding one doubles the line.
 */
.menu__group + .menu__group { margin-top: 58px; }

.menu__group-title {
  margin-bottom: 18px;
  color: var(--ink);
}

/*
 * The number column is 44px wide on the index rows. Indenting the heading past
 * it would align it with the service names, but then nothing marks the left
 * edge of the group and the categories stop reading as headings at a glance.
 * Flush left is the stronger of the two.
 */

/* -------------------------------------------------------------------- flag */

/*
 * A short note alongside a service name — "most popular" on the Tier 2
 * package. Deliberately quiet: the same 11px uppercase as the eyebrow, in the
 * accent, with no pill, badge or rule around it. It reads as a note in the
 * margin rather than a sticker, which is the only version of this the rest of
 * the page can carry.
 */
.menu__flag,
.treatment__flag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* On a row, the flag follows the name on the same baseline. */
.menu__flag { margin-left: 14px; }

/*
 * In a treatment label the eyebrow already occupies the line, so the flag
 * follows it after a separator's worth of space rather than wrapping onto its
 * own line and reading as a second heading.
 */
.treatment__flag { margin-left: 4px; }

@media (max-width: 700px) {
  .menu__group + .menu__group { margin-top: 44px; }

  /* The name column is tight enough at this width that a trailing flag pushes
     the line to wrap mid-name. It moves under the name instead. */
  .menu__flag {
    display: block;
    margin-left: 0;
    margin-top: 6px;
  }
}

/*
 * Each group closes itself. Rows carry a border-top, so without this the last
 * row of a group hangs open until the next group's first row draws a line
 * under its own heading, and the categories stop looking like blocks.
 */
.menu__group ul { border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------------------ intro */

/*
 * The pointer back to the bodywork menu. Sits under the lede on the same
 * measure, far enough clear of it to read as a link rather than a last
 * sentence, since the two menus are separate pages and a visitor landing here
 * from search may want the other one.
 */
.intro__aside { margin-top: 28px; }