/*
 * Shared chapter-title scale — interior/footer massive mosaic titles.
 *
 * Display tracking: --display-letter-spacing (replaces template px crush).
 * Homepage .tale-head__title is styled in chichi-overrides.css only — do NOT
 * duplicate tale-head rules here; loading both broke C'est Chic scroll layout.
 *
 * Use .chichi-chapter-title on /shop, /cocktails, footer, and other static interior pages.
 */

.chichi-chapter-title {
  margin: 0;
  font-family: var(--font-mosaic);
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: var(--display-letter-spacing);
  font-size: clamp(80px, 24vw, 287px);
}

/* Interior pages that reuse Nuxt tale-head markup — tracking only, not sizing */
.page-process .tale-head__title[data-v-9445181d],
.page-cocktails .tale-head__title[data-v-9445181d],
.page-cocktail-recipe .tale-head__title[data-v-9445181d] {
  letter-spacing: var(--display-letter-spacing) !important;
}

/*
 * /shop hero — centred mosaic title; stacks when wider than the column
 * (same wrap pattern as --cocktails).
 */
.chichi-chapter-title--shop {
  display: block;
  width: 100%;
  max-width: min(100%, 12ch);
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
  white-space: normal;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 0.9;
  transform: translate(-16px);
}

@supports (text-wrap: balance) {
  .chichi-chapter-title--shop {
    text-wrap: balance;
  }
}

@media (min-width: 64em) {
  .chichi-chapter-title--shop {
    transform: translate(-26px);
  }
}

@media (min-width: 90em) {
  .chichi-chapter-title--shop {
    transform: translate(clamp(-26px, -1.8055555556vw, -31.0555555556px));
  }
}

/*
 * /cocktails index — same type scale as --shop; centred, stacks to two lines
 * when the mosaic width exceeds the column (WAYS TO / POUR).
 */
.chichi-chapter-title--cocktails {
  display: block;
  width: 100%;
  max-width: min(100%, 10ch);
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
  white-space: normal;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 0.9;
  color: var(--color-black);
  transform: translate(-16px);
}

@supports (text-wrap: balance) {
  .chichi-chapter-title--cocktails {
    text-wrap: balance;
  }
}

@media (min-width: 64em) {
  .chichi-chapter-title--cocktails {
    transform: translate(-26px);
  }
}

@media (min-width: 90em) {
  .chichi-chapter-title--cocktails {
    transform: translate(clamp(-26px, -1.8055555556vw, -31.0555555556px));
  }
}

/* Footer statement — same type scale, contained to band width */
.chichi-chapter-title--footer {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  color: var(--color-white);
  background: none !important;
  min-height: 0 !important;
  margin-inline: auto;
  padding-inline: 12px;
  box-sizing: border-box;
}

@supports (text-wrap: balance) {
  .chichi-chapter-title--footer {
    text-wrap: balance;
  }
}