/**
 * HOME — Luxury entrance (FINAL ART DIRECTION).
 * Massive silence. Elegant symmetry. Gold. Minimal.
 * CSS only. body.home
 *
 * @package Flamingo_Liqueur
 */

/**
 * Consolidated home-page.css.
 *
 * Declarations a later rule at the same selector already overwrote have been
 * removed; the survivors keep their original order, so the rendered result is
 * unchanged (verified declaration-by-declaration).
 */

/**
 * HOME — Luxury entrance (FINAL ART DIRECTION).
 * Massive silence. Elegant symmetry. Gold. Minimal.
 * CSS only. body.home
 *
 * @package Flamingo_Liqueur
 */

/* Content width only — never touch header/footer .l-container */

.home .c-site-main {
  --fl-container: 84rem;
}

.home .c-site-main .l-container {
  max-width: var(--fl-container);
}

/* ---- Hero: brand as architecture ---- */

.home .fl-hero {
  min-height: 100vh;
  align-items: center;
  justify-items: center;
}

.home .fl-hero__overlay {
  background: radial-gradient(ellipse 38% 32% at 50% 48%, rgba(201, 161, 74, 0.12), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0.82) 100%);
}

.home .fl-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(10rem, 26vh, 16rem) clamp(7rem, 16vh, 11rem);
}

.home .fl-hero__heading {
  max-width: none;
  margin: 0 0 clamp(2rem, 5vh, 3.25rem);

  /*
   * 11.5vw, not 15vw, and a floor low enough to stay out of the way.
   *
   * FLAMINGO is one unbreakable word: at letter-spacing 0.22em it measures
   * 7.77x its own font-size, so it fits only while
   *
   *     font-size <= (viewport - container padding) / 7.77
   *
   * which works out at roughly 11.8vw on a phone and 12vw on a desktop. The
   * old 15vw exceeded that at every width — 20px over at 1440 — and the floor
   * of 5.5rem held it at 88px on a 390px phone, where the word came to 684px
   * and hung 294px off the screen.
   *
   * Because the word cannot wrap, it was also setting the width of the hero's
   * content block, which is what pushed the buttons off the screen with it.
   * That is fixed here rather than in the buttons.
   *
   * A single expression rather than another breakpoint: breakpoints leave the
   * widths between them unattended, and a tablet at 815px is exactly where
   * this was first noticed.
   */
  font-size: clamp(2.5rem, 11.5vw, 11.5rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.22em;
  line-height: 0.88;
  text-transform: uppercase;
  text-shadow: 0 6px 60px rgba(0, 0, 0, 0.6);
}

.home .fl-hero__subheading {
  max-width: 22ch;
  margin: 0 auto clamp(3rem, 6vh, 4rem);
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.9;
  opacity: 0.72;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: none;
}

.home .fl-hero__actions {
  justify-content: center;
  gap: 1.5rem 2rem;
}

.home .fl-btn,
.home .fl-hero__cta {
  min-width: 11.5rem;
  min-height: 2.7rem;
  padding-inline: 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  background: transparent;
  border-color: rgba(201, 161, 74, 0.55);
  color: #fff;
  box-shadow: none;
}

.home .fl-btn--primary {
  background: transparent;
  border-color: rgba(201, 161, 74, 0.7);
}

.home .fl-btn--primary:hover,
.home .fl-btn--primary:focus-visible,
.home .fl-btn--secondary:hover,
.home .fl-btn--secondary:focus-visible {
  background: rgba(201, 161, 74, 0.240);
  border-color: var(--fl-gold, #c9a14a);
  color: #fff;
  transform: none;
  box-shadow: none;
}

.home .fl-hero__scroll {
  letter-spacing: 0.46em;
  font-size: 0.58rem;
  color: rgba(201, 161, 74, 0.55);
  opacity: 1;
}

.home .fl-hero__scroll-line {
  height: 3.25rem;
  background: linear-gradient(180deg, rgba(201, 161, 74, 0.5), transparent);
}

/* ---- Section rhythm: NOT uniform ---- */

.home .c-entry__content--blocks > * + * {
  border-top: 0;
}

.home .fl-story {
  padding-block: clamp(10rem, 24vh, 17rem);
}

@media (min-width: 900px) {

  /* Adaptive Brand Layout owns column ratios via --fl-image-col */

  .home .fl-story__grid.fl-layout-grid {
    column-gap: var(--fl-layout-gap);
  }
}

.home .fl-product {
  padding-block: clamp(9rem, 22vh, 15rem);
  text-align: center;
}

.home .fl-how-to-enjoy {
  padding-block: clamp(6rem, 14vh, 10rem);
}

.home .fl-gallery {
  padding-block: clamp(4.5rem, 10vh, 7.5rem);
}

.home .fl-shop {
  padding-block: clamp(7.5rem, 17vh, 12rem);
}

.home .fl-news {
  padding-block: clamp(8.5rem, 19vh, 13.5rem);
}

.home .fl-faq {
  padding-block: clamp(7rem, 15vh, 11rem);
}

.home .fl-contact {
  padding-block: clamp(10rem, 23vh, 16rem);
}

/* Quiet gold hierarchy — entrance, not nightlife */

.home .fl-story__label,
.home .fl-product__label,
.home .fl-how-to-enjoy__label,
.home .fl-gallery__label,
.home .fl-shop__label,
.home .fl-news__label,
.home .fl-faq__label,
.home .fl-contact__label {
  letter-spacing: 0.3em;
  font-size: 0.82rem;
  color: var(--fl-gold, #c9a14a);
}

.home .fl-story__title {
  font-size: clamp(2.5rem, 5vw, 3.85rem);
  font-weight: 500;
  font-style: normal;
  /* balance restricted to ja phrase boundaries (auto-phrase) so titles
     break after a bunsetsu / 、 — e.g. 注ぎ方で、/ 夜が変わる。 — never
     mid-phrase. line-break: strict adds kinsoku. Wide measure keeps it responsive;
  graceful fallback where auto-phrase is unsupported. */
  max-width: min(100%, 18ch);
  text-wrap: balance;
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: normal;
}

.home .fl-product__title,
.home .fl-how-to-enjoy__title,
.home .fl-gallery__title,
.home .fl-shop__title,
.home .fl-news__title,
.home .fl-faq__title,
.home .fl-contact__title,
.home .fl-product__section-title {
  font-size: clamp(2.5rem, 5vw, 3.85rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em;
  /* balance restricted to ja phrase boundaries (auto-phrase) so titles
     break after a bunsetsu / 、 — e.g. 注ぎ方で、/ 夜が変わる。 — never
     mid-phrase. line-break: strict adds kinsoku. Wide measure keeps it responsive;
  graceful fallback where auto-phrase is unsupported. */
  max-width: min(100%, 18ch);
  line-height: 1.22;
  text-wrap: balance;
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: normal;
}

/*
 * Story title — wider measure so JA wraps after the pause,
 * not mid-phrase (e.g. 集まる理由を、 / 美しくする。).
 * Typography style unchanged; only container width.
 */

/*
 * Story title — measure sized so the natural break falls after the pause:
 * 集まる理由を、 / 美しくする。
 * (Do not shrink the whole copy column; only the title measure.)
 */

.home .fl-story__title {
  max-width: 7.5em;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.home .fl-story__copy {
  min-width: 0;
  max-width: 100%;
}

.home .fl-story__description p,
.home .fl-product__description p,
.home .fl-how-to-enjoy__intro p,
.home .fl-gallery__intro p,
.home .fl-shop__intro p,
.home .fl-news__intro p,
.home .fl-faq__intro p,
.home .fl-contact__intro p {
  max-width: min(100%, 38ch);
  font-size: 0.98rem;
  line-height: 1.85;
  opacity: 0.84;
  text-wrap: pretty;
  line-break: strict;
  word-break: auto-phrase;
}

/* ==========================================================================
   Image Frame System — Home art direction
   Engine CSS: assets/css/image-frame.css
   Home only adds hover polish + product column width.
   Frame size / aspect / focus / zoom come from CMS CSS vars.
   ========================================================================== */

.home .fl-image-frame {
  min-width: 0;
}

/* Hero media must stay absolute full-bleed */

.home .fl-hero__media.fl-image-frame {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
}

.home .fl-story__media.fl-image-frame:hover .fl-story__img {
  /* Scale only. The brightness lift that used to be here pushed an already
     bright image past white on hover, so the picture lost detail exactly
     when the reader was looking at it. See FIX-15. */
  transform: scale(calc(var(--fl-img-zoom, 1) * 1.03));
}

/* Product — keep bottle column width; contain via engine class */

.home .fl-product__media.fl-image-frame {
  /* 20rem(320px) was set when this column held a small supporting shot.
     It is now the section's subject, and a 1024x1536 master has pixels to
     spare — the cap was making the bottle look like a thumbnail. */
  max-width: 30rem;
  margin-inline: auto;
  padding: 0;
}

.home .fl-product__media.fl-image-frame .fl-product__img {
  box-shadow: none;
  filter: drop-shadow(0 36px 70px rgba(0, 0, 0, 0.5));
  background: transparent;
}

.home .fl-product__media.fl-image-frame:hover .fl-product__img {
  transform: translateY(-0.35rem) scale(var(--fl-img-zoom, 1));
}

.home .fl-product .l-container {
  /* Widened with the bottle, or the image grows into the copy. */
  max-width: 52rem;
}

/* How To Enjoy cards — fixed 3:4 media cell */

.home .fl-how-to-enjoy__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4;
}

.home .fl-how-to-enjoy__media .fl-how-to-enjoy__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--fl-img-x, 50%) var(--fl-img-y, 35%);
  transform: scale(var(--fl-img-zoom, 1));
  /* Origin is centre, NOT the focus point. object-position already decides
     which part of the photo is shown; anchoring the scale to the same point
     as well makes every zoom grow AWAY from that anchor. With a focus at
     x:100% the hover zoom pinned the right edge and shoved the picture left
     and down — it read as the image sliding diagonally rather than zooming.
     Scale from the centre and the motion is symmetric. See FIX-14. */
  transform-origin: center;
}

.home .fl-how-to-enjoy__card:hover .fl-how-to-enjoy__img {
  transform: scale(calc(var(--fl-img-zoom, 1) * 1.04));
}

/* Gallery — aspect ratio on figure (frame), img fills */

.home .fl-gallery__figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
}

.home .fl-gallery__figure .fl-gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  cms focus still overrides. */
  object-position: var(--fl-img-x, 50%) var(--fl-img-y, 38%);
  transform: scale(var(--fl-img-zoom, 1));
  /* Origin is centre, NOT the focus point. object-position already decides
     which part of the photo is shown; anchoring the scale to the same point
     as well makes every zoom grow AWAY from that anchor. With a focus at
     x:100% the hover zoom pinned the right edge and shoved the picture left
     and down — it read as the image sliding diagonally rather than zooming.
     Scale from the centre and the motion is symmetric. See FIX-14. */
  transform-origin: center;
}

.home .fl-gallery__figure:hover .fl-gallery__img {
  transform: scale(calc(var(--fl-img-zoom, 1) * 1.03));
}

@media (min-width: 1100px) {

  /* The editorial rhythm below varies tile ratios across a run of eight. It only
     reads as rhythm when there are enough tiles to complete the pattern — with
     three, a single odd tile just looks like a mistake. :has() gates it on the
     grid actually holding eight children; where :has() is unsupported the whole
     block is skipped and the uniform 4/5 grid stands, which is the safe result. */

  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 1) .fl-gallery__figure,
  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 4) .fl-gallery__figure {
    aspect-ratio: 16 / 10;
  }

  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 2) .fl-gallery__figure,
  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 3) .fl-gallery__figure,
  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 5) .fl-gallery__figure,
  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 6) .fl-gallery__figure,
  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 7) .fl-gallery__figure {
    aspect-ratio: 4 / 5;
  }

  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 8) .fl-gallery__figure {
    aspect-ratio: 21 / 9;
    max-height: 56vh;
  }

  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 1):last-child .fl-gallery__figure,
  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 3):last-child .fl-gallery__figure,
  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 5):last-child .fl-gallery__figure {
    aspect-ratio: 21 / 9;
    max-height: 56vh;
  }

  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 5):nth-last-child(2) .fl-gallery__figure,
  .home .fl-gallery__grid:has(> :nth-child(8)) > :nth-child(8n + 6):last-child .fl-gallery__figure {
    aspect-ratio: 16 / 10;
  }
}

.home .fl-gallery .l-container {
  max-width: 72rem;
}

.home .fl-gallery__grid {
  gap: clamp(0.5rem, 1vw, 0.85rem);
}

/* Tighter, even gutters read as a curated wall, not spaced-out tiles. */

.home .fl-how-to-enjoy__grid {
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* Pull the media grid closer to its intro so the section reads as one
   curated set rather than text floating far above isolated tiles. */

.home .fl-gallery__header,
.home .fl-how-to-enjoy__header {
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* News — fixed 5:4 frame */

.home .fl-news__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 5 / 4;
}

.home .fl-news__media .fl-news__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--fl-img-x, 50%) var(--fl-img-y, 24%);
  transform: scale(var(--fl-img-zoom, 1));
  /* Origin is centre, NOT the focus point. object-position already decides
     which part of the photo is shown; anchoring the scale to the same point
     as well makes every zoom grow AWAY from that anchor. With a focus at
     x:100% the hover zoom pinned the right edge and shoved the picture left
     and down — it read as the image sliding diagonally rather than zooming.
     Scale from the centre and the motion is symmetric. See FIX-14. */
  transform-origin: center;
}

.home .fl-news__card:hover .fl-news__img {
  transform: scale(calc(var(--fl-img-zoom, 1) * 1.03));
}

.home .fl-news__grid {
  gap: clamp(3rem, 5vw, 4.5rem);
}

/* Shop channel media when present */

.home .fl-shop__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
}

.home .fl-shop__media .fl-shop__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--fl-img-x, 50%) var(--fl-img-y, 50%);
  transform: scale(var(--fl-img-zoom, 1));
  /* Origin is centre, NOT the focus point. object-position already decides
     which part of the photo is shown; anchoring the scale to the same point
     as well makes every zoom grow AWAY from that anchor. With a focus at
     x:100% the hover zoom pinned the right edge and shoved the picture left
     and down — it read as the image sliding diagonally rather than zooming.
     Scale from the centre and the motion is symmetric. See FIX-14. */
  transform-origin: center;
}

/* --------------------------------------------------------------------------
   HOME #shop — three channels (オンライン / リテール / 会場)
   Refinement only: equal frames, tighter editorial rhythm, less “floating”.
   -------------------------------------------------------------------------- */

.home #shop {
  padding-block: clamp(6rem, 14vh, 10rem);
  background:
    radial-gradient(ellipse 55% 42% at 12% 0%, rgba(255, 79, 163, 0.12), transparent 58%),
    var(--fl-bg, #0b0b0b);
}

.home #shop .l-container {
  max-width: min(72rem, 100%);
}

.home #shop .fl-shop__header {
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
  max-width: min(36rem, 100%);
}

.home #shop .fl-shop__grid {
  gap: clamp(1.5rem, 2.8vw, 2.25rem);
  /*
   * stretch, not start.
   *
   * The card already asks for its button to sit at the bottom
   * (.fl-shop__action { margin-top: auto } in blocks/shop/style.css), but auto
   * distributes FREE space, and a column that is only as tall as its content
   * has none. With `start` the three cards measured 698 / 671 / 698px and the
   * one-line description left its button a line higher than the other two.
   *
   * `start` was presumably chosen to stop mismatched image ratios from
   * distorting when a card grows. That cannot happen here: the media below is
   * pinned to 4 / 5 with !important, so the picture keeps its shape whatever
   * the card does.
   */
  align-items: stretch;
}

.home #shop .fl-shop__item,
.home #shop .fl-shop__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* The row is stretched; the card has to take the whole of it, otherwise the
   free space sits in the list item and margin-top:auto still has nothing to
   work with. */
.home #shop .fl-shop__card {
  flex: 1 1 auto;
  height: 100%;
}

/* One shared portrait frame — override per-item CMS AR (e.g. 1/1). */
.home #shop .fl-shop__media.fl-image-frame,
.home #shop .fl-shop__media {
  width: 100% !important;
  max-width: none;
  margin-inline: 0;
  aspect-ratio: 4 / 5 !important;
  --fl-frame-ar: 4 / 5;
  border-radius: 10px;
  box-shadow: 0 14px 36px -28px rgba(0, 0, 0, 0.75);
}

.home #shop .fl-shop__media .fl-image-frame__viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.home #shop .fl-shop__channel-name,
.home #shop .fl-shop__name {
  margin: 1.15rem 0 0;
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.25;
}

.home #shop .fl-shop__channel-desc,
.home #shop .fl-shop__body {
  margin-top: 0.7rem;
}

.home #shop .fl-shop__channel-desc p,
.home #shop .fl-shop__body p {
  margin: 0;
  max-width: 22rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(220, 220, 220, 0.88);
}

.home #shop .fl-shop__button,
.home #shop .fl-shop__actions {
  margin-top: 1.35rem;
}

.home #shop .fl-shop__button {
  min-height: 2.65rem;
  padding-inline: 1.35rem;
  border-color: rgba(201, 161, 74, 0.7);
  color: var(--fl-gold, #c9a14a);
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  background: transparent;
}

.home #shop .fl-shop__button:hover,
.home #shop .fl-shop__button:focus-visible {
  background: rgba(201, 161, 74, 0.12);
  border-color: var(--fl-gold, #c9a14a);
  color: #fff;
}

/* Hero — viewport frame already fixed; focus/zoom via CSS vars */

.home .fl-hero__media.fl-image-frame .fl-hero__image,
.home .fl-hero__media.fl-image-frame .fl-hero__video {
  /* No brightness/contrast correction here. Measured on the live images:
     this filter clipped 13-68% of every hero to flat white or flat black,
     which is what read as "hazy". The hero block already exposes
     --fl-hero-filter for genuine per-image correction from the editor.
     See FIX-15 — and FIX-06, which removed the same filter from the block
     stylesheet but left these nine page-level copies behind. */
}

.home .fl-faq .l-container,
.home .fl-contact .l-container {
  max-width: 42rem;
}

@media (prefers-reduced-motion: reduce) {

  .home .fl-image-frame .fl-story__img,
  .home .fl-image-frame .fl-product__img,
  .home .fl-how-to-enjoy__media .fl-how-to-enjoy__img,
  .home .fl-gallery__figure .fl-gallery__img,
  .home .fl-news__media .fl-news__img,
  .home .fl-story__media.fl-image-frame:hover .fl-story__img,
  .home .fl-product__media.fl-image-frame:hover .fl-product__img,
  .home .fl-how-to-enjoy__card:hover .fl-how-to-enjoy__img,
  .home .fl-gallery__figure:hover .fl-gallery__img,
  .home .fl-news__card:hover .fl-news__img {
    transition: none;
    transform: scale(var(--fl-img-zoom, 1));
    filter: none;
  }
}