/*
  La carte: one white sheet on the blush band, set like the printed list.
  Centred caps headings between hairlines, then name, leader, price.
  The home prints the summary, ten lines that each open their own page;
  the full lists are set on the inner pages (see page.css).
*/
.prices {
  background: var(--color-ground-alt);
}

.carte {
  position: relative;
  margin-inline: calc(var(--gutter) * -0.6);
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  background: var(--color-surface);
  border: var(--rule);
}

.carte::before {
  content: "";
  position: absolute;
  inset: 0.3125rem;
  border: var(--rule-soft);
  pointer-events: none;
}

/* The lotus of the logo heads the sheet, as on the printed list */
.carte__mark {
  width: 2.75rem;
  height: auto;
  fill: var(--color-brand);
}

.carte__pages,
.carte__page {
  display: grid;
  gap: var(--space-2xl);
  align-content: start;
}

.carte__group {
  display: grid;
  gap: var(--space-lg);
}

.carte__title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.carte__title::before,
.carte__title::after {
  content: "";
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-top: var(--rule);
}

.carte__list {
  display: grid;
  gap: var(--space-sm);
}

/* Name, leader, price; a long name wraps and the price holds the last line */
.carte__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(1rem, 1fr) auto;
  align-items: end;
  column-gap: var(--space-xs);
  line-height: 1.3;
}

.carte__item::before {
  content: "";
  grid-area: 1 / 2;
  margin-bottom: 0.38em;
  border-bottom: 1px dotted var(--color-accent);
}

.carte__name {
  grid-area: 1 / 1;
  overflow-wrap: anywhere;
}

.carte__price {
  grid-area: 1 / 3;
  font-weight: 600;
  text-align: right;
}

.carte__price--text,
.carte__from,
.carte__time {
  font-style: italic;
  font-weight: 500;
  white-space: nowrap;
}

.carte__from,
.carte__time,
.carte__note,
.carte__footnote {
  color: var(--color-ink-soft);
}

.carte__note,
.carte__footnote {
  font-size: var(--text-small);
  font-style: italic;
  text-align: center;
  text-wrap: balance;
}

.carte__footnote {
  max-width: 44em;
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-lg);
  border-top: var(--rule-soft);
}

/*
  The summary: one line per category, set a size up. The two pages close
  up on a phone so the ten lines read as one list.
*/
.carte__pages--summary {
  gap: var(--space-md);
}

.carte__list--summary {
  gap: var(--space-md);
  font-size: var(--text-lead);
}

/*
  A line that leads somewhere: the name is underlined like a link in a
  sentence, and the whole line is the target.
*/
.carte__link {
  text-decoration: underline;
  text-decoration-color: var(--color-accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.carte__link::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-md) / -2) 0;
}

.carte__link:hover {
  color: var(--color-accent-strong);
}

.carte__item:has(.carte__link:hover)::before {
  border-bottom-color: var(--color-accent-strong);
}

.carte__all {
  margin-top: var(--space-2xl);
  text-align: center;
}

.prices__action {
  margin-top: var(--space-xl);
  text-align: center;
}

@media (min-width: 48em) {
  .carte {
    margin-inline: 0;
    padding: var(--space-2xl) clamp(1.75rem, 5.5vw, 5rem);
  }

  .carte__pages {
    max-width: 34rem;
    margin-inline: auto;
  }
}

/*
  Two pages side by side, read left page first, as the list is printed.
  The spine belongs to the second page: a sheet of one page has none.
*/
@media (min-width: 64em) {
  .carte__pages {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 7vw, 7rem);
    max-width: none;
  }

  .carte__page + .carte__page {
    position: relative;
  }

  .carte__page + .carte__page::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(clamp(2.5rem, 7vw, 7rem) / -2);
    border-left: var(--rule-soft);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .carte__link,
  .carte__item::before {
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
}