/* Hallmark · macrostructure: Catalogue (11) · genre: atmospheric
 * theme: custom (tuned) · Smoke Pit · per design.md lock — tokens/type/voice identical to home
 * display: Big Shoulders Display · body: Switzer · outlier: JetBrains Mono (category index + price figures)
 * nav: N9 edge-aligned minimal · footer: Ft5 Statement
 * pre-emit critique: P4 H4 E4 S4 R4 V5
 * contrast: pass (40-41) · nav/footer/hero: pass (42-45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49-53)
 * context: inferred · diversification: differs from home on macrostructure (Catalogue vs Photographic)
 */

@import url("tokens.css");
@import url("site.css");

/* ---------- catalogue-specific ---------- */

.menu-hero {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: 1px solid var(--color-rule-2);
}
.menu-hero__title { font-size: var(--text-display-s); }
.menu-hero__sub {
  margin-top: var(--space-sm);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  max-width: 56ch;
}
.menu-hero__note {
  margin-top: var(--space-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent-soft);
}

/* category index nav */
.cat-index {
  position: sticky;
  top: var(--banner-height);
  z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--color-paper) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-rule-2);
}
.cat-index__row {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--space-sm);
}
.cat-index__row::-webkit-scrollbar { display: none; }
.cat-index__link {
  flex: none;
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.cat-index__link:hover { color: var(--color-ink); text-decoration: none; border-color: var(--color-rule); }

/* catalogue sections */
.menu-cat { padding-block: var(--space-2xl) var(--space-xl); border-bottom: 1px solid var(--color-rule-2); }
.menu-cat__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.menu-cat__num {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-accent);
  letter-spacing: 0.1em;
}
.menu-cat__title { font-size: var(--text-2xl); }
.menu-cat__sub { color: var(--color-muted); font-size: var(--text-sm); margin-left: auto; max-width: 40ch; text-align: right; }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.menu-item {
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
@media (hover: hover) {
  .menu-item:hover { border-color: var(--color-rule); transform: translateY(-2px); }
}
.menu-item__name { font-weight: 600; color: var(--color-ink); font-size: var(--text-base); }
.menu-item__dots { flex: 1; border-bottom: 1px dashed var(--color-rule); transform: translateY(-4px); }
.menu-item__note { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.menu-item__flag {
  font-family: var(--font-outlier);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-xs);
  white-space: nowrap;
}

/* wings feature block */
.wings-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  align-items: center;
  margin-bottom: var(--space-xl);
}
.wings-feature figure { margin: 0; }
.wings-feature img {
  width: 100%;
  max-width: 50rem;     
  max-height: 35rem;
  aspect-ratio: 4 / 3;  
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule-2);
  margin-inline: auto;   
}
.wings-feature__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.wings-feature__list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-bottom: 1px dashed var(--color-rule-2);
  font-size: var(--text-base);
}
.wings-feature__list li:last-child { border-bottom: 0; }
.wings-feature__list .n { font-weight: 600; color: var(--color-ink); }
.wings-feature__list .f { margin-left: auto; }

@media (max-width: 48rem) {
  .menu-grid, .wings-feature { grid-template-columns: minmax(0, 1fr); }
  .menu-cat__sub { margin-left: 0; text-align: left; width: 100%; }
}