/*
 * Interior-page chrome resets.
 *
 * Static /process /shop /cocktails pages reuse Nuxt tale-* / the-footer classes
 * from index.DeD-n06m.css + default.w_WESe8R.css, but intentionally do NOT load
 * entry.css (homepage global chrome + utilities).
 *
 * Without this file, every new page re-discovers the same bugs:
 *  1. .-is-desktop / .-is-mobile pairs both render (entry utilities missing)
 *  2. .the-footer pins to min-height: 100lvh (homepage scroll choreography)
 *  3. .tale-outro gets padding-top: max(100svh, …) chapter pin spacing
 *
 * Load AFTER /_nuxt/default.w_WESe8R.css so these win on equal specificity.
 * Full-bleed sticky covers (height: 100lvh; position: sticky) stay intentional
 * for chapter-style heroes — neutralize per page only when a reduced cover
 * is required (see .page-cocktail-recipe .cocktail-cover).
 */

/* From entry.css — responsive show/hide for mirrored desktop/mobile pairs */
@media (min-width: 64em) {
  .-is-mobile {
    display: none !important;
  }
}

@media (max-width: 63.99em) {
  .-is-desktop {
    display: none !important;
  }
}

/* Homepage footer is a 100lvh pin. Interior pages need a normal footer. */
.the-footer[data-v-71c44c9e] {
  min-height: 0;
}

/* Homepage outro pads for sticky chapter handoff. Interior pages do not. */
.tale-outro[data-v-8a2ce1f3] {
  padding-top: 0;
}

/*
 * Guard against width:100% + padding overflow when box-sizing is fighting
 * a reused scoped rule. tokens.css already sets border-box globally; this
 * clips stray descendants without inventing per-page overflow-x hacks.
 */
html {
  overflow-x: clip;
}

/*
 * Sitewide content inset — interior pages reuse Nuxt tale-* blocks without
 * entry.css horizontal gutters. Nuxt tale-head__inner has padding-top/bottom
 * only; tale-product-story__content defaults to 14px inline. Fix once here.
 */
.content-inset {
  padding-inline: var(--content-inset-inline);
  box-sizing: border-box;
}

.content-inset--max {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.page-shop .tale-head__inner[data-v-9445181d],
.page-process .tale-head__inner[data-v-9445181d],
.page-cocktails .tale-head__inner[data-v-9445181d] {
  padding-inline: var(--content-inset-inline);
  box-sizing: border-box;
}

@media (max-width: 63.99em) {
  /*
   * Subpage hero cover — [CHI CHI] / [VODKA] (etc.) flank the image on mobile.
   * Desktop keeps Nuxt left/right at 140px; mobile uses content inset padding.
   */
  .page-shop .shop-cover .tale-cover__name,
  .page-process .process-cover .tale-cover__name,
  .page-cocktails .cocktails-cover .tale-cover__name {
    display: block !important;
    position: absolute;
    bottom: 50%;
    top: auto;
    width: max-content;
    max-width: calc(50% - var(--content-inset-inline) - 8px);
    z-index: 4;
    margin: 0;
    color: #fff;
    mix-blend-mode: difference;
    transform: translateY(50%);
  }

  .page-shop .shop-cover .tale-cover__name:first-child,
  .page-process .process-cover .tale-cover__name:first-child,
  .page-cocktails .cocktails-cover .tale-cover__name:first-child {
    left: var(--content-inset-inline) !important;
    right: auto !important;
    text-align: left;
  }

  .page-shop .shop-cover .tale-cover__name:nth-child(2),
  .page-process .process-cover .tale-cover__name:nth-child(2),
  .page-cocktails .cocktails-cover .tale-cover__name:nth-child(2) {
    left: auto !important;
    right: var(--content-inset-inline) !important;
    text-align: right;
  }

  /*
   * Subpage hero intro — [CHI CHI] / [VODKA] flank the row (homepage parity).
   */
  .page-process .tale-head__pre[data-v-9445181d],
  .page-cocktails .tale-head__pre[data-v-9445181d] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: space-between !important;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding-inline: var(--content-inset-inline);
    text-align: unset;
  }

  .page-process .tale-head__pre[data-v-9445181d] p,
  .page-cocktails .tale-head__pre[data-v-9445181d] p {
    margin: 0;
    flex: 0 1 auto;
  }

  .page-process .tale-head__pre[data-v-9445181d] p:first-child,
  .page-cocktails .tale-head__pre[data-v-9445181d] p:first-child {
    text-align: left;
  }

  .page-process .tale-head__pre[data-v-9445181d] p:last-child,
  .page-cocktails .tale-head__pre[data-v-9445181d] p:last-child {
    text-align: right;
  }

  /*
   * Interior opening blocks — kill Nuxt translate(-16px) on mosaic titles;
   * centre the lede paragraph on the canvas (not just text-align on abstract).
   */
  .page-process .process-opening__title.tale-head__title[data-v-9445181d],
  .page-cocktails .cocktails-opening .chichi-chapter-title {
    transform: none !important;
    text-align: center !important;
    width: 100%;
    box-sizing: border-box;
  }

  .page-process .tale-head__content[data-v-9445181d],
  .page-cocktails .cocktails-opening .tale-head__content[data-v-9445181d] {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }

  .page-process .process-opening__body,
  .page-cocktails .cocktails-opening__body {
    width: 100%;
    max-width: min(40rem, 100%);
    margin-inline: auto;
    text-align: center;
  }
}

.page-shop .tale-product-story__content[data-v-d6421652],
.page-cocktails .cocktail-bracket.tale-product-story .tale-product-story__content[data-v-d6421652] {
  padding-inline: var(--content-inset-inline);
  box-sizing: border-box;
}

.page-shop .tale-product-story__story[data-v-d6421652],
.page-shop .tale-product-story__crafting[data-v-d6421652] {
  padding-inline: var(--content-inset-inline);
  box-sizing: border-box;
}

.page-cocktails .tale-product-gallery__inner[data-v-0653fa0c] {
  padding-inline: var(--content-inset-inline);
  box-sizing: border-box;
}

.page-process .process-copyblock {
  padding-inline: var(--content-inset-inline);
  box-sizing: border-box;
}

/*
 * Interior tale-cover hero photos.
 *
 * Homepage covers use <picture class="responsive-image tale-cover__bg"> with
 * useChapters.css (object-fit on inner img) plus scoped Nuxt
 * `.tale-cover__bg[data-v-*] { height:100% }`. Static interior pages use bare
 * <img class="tale-cover__bg"> without data-v-* — Nuxt sizing never applies and
 * page-level `img { height:auto }` wins, so covers read short on mobile and
 * object-fit:cover cannot crop like the homepage chapters.
 *
 * Beat `.page-* img { height:auto }` via slot + class selectors; tune anchor via
 * --chichi-cover-object-position (tokens default: center 42%).
 */
.page-process .process-cover__slot > img,
.page-cocktails .cocktails-cover__slot > img,
.page-shop .shop-cover__slot > img,
.page-shop .shop-cover__slot .shop-cover__img,
.page-cocktail-recipe .cocktail-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--chichi-cover-object-position);
}

/*
 * Sitewide Satoshi body copy — after Nuxt + page CSS so tokens always win.
 * Subheads set letter-spacing: var(--sans-letter-spacing) in their own sheets.
 * Homepage mirror: same token in chichi-overrides.css.
 */
.tale-product-story__content p[data-v-d6421652],
.tale-product-story__story p[data-v-d6421652],
.tale-product-story__crafting p[data-v-d6421652],
.tale-head__abstract[data-v-9445181d],
.process-tasting__col p,
.process-phase__body,
.process-opening__body,
.process-copyblock p:not(.process-copyblock__eyebrow),
.process-faq__answer p,
.shop-product__lede,
.cocktail-bracket p,
.maker-hero__content p,
.legal-page__body,
.legal-page__body p,
.legal-page__body li {
  letter-spacing: var(--sans-letter-spacing) !important;
  line-height: var(--body-line-height) !important;
}

.tale-product-story__content p[data-v-d6421652],
.tale-product-story__story p[data-v-d6421652],
.tale-product-story__crafting p[data-v-d6421652],
.tale-head__abstract[data-v-9445181d],
.process-faq__answer p {
  line-height: var(--body-line-height-sm) !important;
}

.legal-page__body,
.legal-page__body p,
.legal-page__body li {
  line-height: var(--body-line-height-prose) !important;
}