/* ==========================================================
   Albert's decorative outline typography - final positioning rule
   The display word sits BEHIND the heading. Only its upper ~20-25%
   is crossed by the foreground heading; most of the word remains
   visible beneath it.
   ========================================================== */

.campaign-hero__decorative,
.media-mosaic__decorative,
.campaign-grid__decorative,
.menu-showcase__decorative,
.campaign-faq__decorative{
  z-index:0!important;
  pointer-events:none!important;
  user-select:none!important;
  font-family:'BigMooreItalic','BigMoore',Georgia,serif!important;
  font-style:italic!important;
  font-weight:400!important;
  text-transform:lowercase!important;
  color:transparent!important;
  opacity:.72!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}

/* Foreground copy always owns the higher layer */
.campaign-hero__content-inner,
.media-mosaic__copy-inner,
.campaign-grid__masthead-copy,
.menu-showcase__masthead-inner,
.campaign-faq__masthead-copy{
  position:relative!important;
  z-index:2!important;
}

/* The title occupies the upper part of each masthead. The decorative
   word is deliberately pushed DOWN so it peeks from the title's lower edge. */
.media-mosaic__copy,
.campaign-grid__masthead,
.menu-showcase__masthead,
.campaign-faq__masthead{
  align-items:flex-start!important;
}

.media-mosaic__copy-inner,
.campaign-grid__masthead-copy,
.menu-showcase__masthead-inner,
.campaign-faq__masthead-copy{
  padding-top:clamp(18px,1.5vw,28px)!important;
}

/* centred campaign mastheads */
.media-mosaic__decorative,
.campaign-grid__decorative,
.menu-showcase__decorative,
.campaign-faq__decorative{
  top:clamp(132px,11vw,175px)!important;
  left:50%!important;
  transform:translate(-50%,0)!important;
  line-height:.78!important;
}

/* Reserve enough vertical room for the readable lower 75% of the word */
.media-mosaic__copy{
  min-height:clamp(360px,29vw,445px)!important;
}
.campaign-grid__masthead{
  min-height:clamp(340px,27vw,415px)!important;
}
.menu-showcase__masthead{
  min-height:clamp(330px,25vw,395px)!important;
}
.campaign-faq__masthead{
  min-height:clamp(330px,25vw,395px)!important;
}

/* Hero is left aligned, so place "christmas" just below the H1 rather than
   through its middle. It remains behind all real content. */
.campaign-hero__decorative{
  top:clamp(300px,31vh,390px)!important;
  left:clamp(24px,3.3vw,62px)!important;
  width:auto!important;
  transform:none!important;
  font-size:clamp(7.2rem,12vw,13rem)!important;
  -webkit-text-stroke:1px rgba(189,109,63,.32)!important;
  text-stroke:1px rgba(189,109,63,.32)!important;
}

/* Increase space after H1 a little so the decorative word has breathing room */
.campaign-hero__title::after{
  margin-top:clamp(46px,4vw,62px)!important;
}

/* Mosaic captions can carry a little more personality */
.media-mosaic__caption{
  font-size:clamp(1.12rem,1.16vw,1.34rem)!important;
  line-height:1.18!important;
}

@media(max-width:767px){
  .media-mosaic__copy,
  .campaign-grid__masthead,
  .menu-showcase__masthead,
  .campaign-faq__masthead{
    min-height:330px!important;
  }

  .media-mosaic__decorative,
  .campaign-grid__decorative,
  .menu-showcase__decorative,
  .campaign-faq__decorative{
    top:150px!important;
    font-size:clamp(5.5rem,23vw,7.8rem)!important;
    transform:translate(-50%,0)!important;
    opacity:.64!important;
  }

  .campaign-hero__decorative{
    top:clamp(600px,79svh,770px)!important;
    left:18px!important;
    width:auto!important;
    max-width:calc(100vw - 26px)!important;
    font-size:clamp(5.2rem,23vw,7.4rem)!important;
    transform:none!important;
    opacity:.58!important;
  }

  .campaign-hero__title::after{
    margin-top:42px!important;
  }

  .media-mosaic__caption{
    font-size:1.08rem!important;
  }
}