/* Hallmark · macrostructure: Catalogue (menu page) — defers to design.md / tokens.css
 * Catalogue knobs: tiles=mixed native-ratio, columns=12-span irregular, rule=hairline-between
 * Per-page overrides only; all tokens from tokens.css
 */

.pagehead {
  padding-top: calc(var(--banner-height) + var(--space-3xl));
  padding-bottom: var(--space-2xl);
}
.pagehead__title { font-size: var(--text-display-s); max-width: 16ch; }
.pagehead__lede { margin-top: var(--space-lg); max-width: 52ch; color: var(--color-ink-2); font-size: var(--text-md); }

/* Daily-case notice — the menu rotates, say so plainly */
.case-note {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-paper-2);
  padding: var(--space-lg);
  margin-bottom: var(--space-3xl);
}
.case-note__mark {
  flex: none;
  width: 0.75rem; height: 0.75rem;
  margin-top: var(--space-2xs);
  background: var(--color-accent);
  border-radius: 2px;
  transform: rotate(45deg);
}
.case-note p { color: var(--color-ink-2); max-width: 62ch; }
.case-note strong { color: var(--color-ink); font-weight: 600; }

/* Category sections */
.cat { padding-bottom: var(--space-3xl); }
.cat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  margin-bottom: var(--space-xl);
}
.cat__title { font-size: var(--text-2xl); }
.cat__count { font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.cat__intro { color: var(--color-ink-2); max-width: 60ch; margin-top: calc(-1 * var(--space-md)); margin-bottom: var(--space-xl); }

/* Catalogue grid — 12 spans, native-ratio frames, varied placement per row */
.catgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg); }
.tile { display: flex; flex-direction: column; gap: var(--space-sm); }
.tile--s { grid-column: span 3; }
.tile--m { grid-column: span 4; }
.tile--l { grid-column: span 6; }
.tile .frame { aspect-ratio: 3 / 4; }
.tile--wide .frame { aspect-ratio: 3 / 2; }
.tile__body { display: flex; flex-direction: column; gap: var(--space-2xs); }
.tile__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.15; }
.tile__desc { color: var(--color-muted); font-size: var(--text-sm); }
.tile__tag {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Text-only index list (the long tail, hairline rows) */
.indexlist { border-top: var(--rule-hair) solid var(--color-rule); }
.indexlist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.indexlist__name { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
.indexlist__note { color: var(--color-muted); font-size: var(--text-sm); text-align: right; max-width: 32ch; }

/* Order strip */
.orderstrip {
  border-block: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  padding-block: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}
.orderstrip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.orderstrip__text { max-width: 46ch; }
.orderstrip__title { font-size: var(--text-xl); font-family: var(--font-display); font-weight: 600; }
.orderstrip__sub { color: var(--color-ink-2); margin-top: var(--space-xs); }
.orderstrip__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

@media (max-width: 60rem) {
  .tile--s { grid-column: span 6; }
  .tile--m { grid-column: span 6; }
  .tile--l { grid-column: 1 / -1; }
  .tile--wide { grid-column: 1 / -1; }
  .indexlist__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .indexlist__note { text-align: left; max-width: none; }
}
@media (max-width: 34rem) {
  .tile--s { grid-column: 1 / -1; }
  .tile--m { grid-column: 1 / -1; }
}