/* ==============================================================
   Albert's Campaign Typography System v1
   Load AFTER all component styles.

   One rule for:
   - Campaign Hero
   - Media Mosaic
   - Campaign Grid
   - Menu Showcase
   - Campaign FAQ

   Decorative outline word = background eyebrow.
   Small eyebrow = foreground label.
   Title begins beneath both.
   ============================================================== */

/* 1. ONE SMALL EYEBROW STYLE EVERYWHERE */
.campaign-hero__eyebrow,
.media-mosaic__eyebrow,
.campaign-grid__eyebrow,
.menu-showcase__eyebrow,
.campaign-faq__eyebrow {
  position:relative!important;
  z-index:4!important;
  margin:0 0 20px!important;
  color:#bd6d3f!important;
  font-family:'Jost',Arial,sans-serif!important;
  font-size:.78rem!important;
  font-weight:600!important;
  line-height:1.35!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}

/* 2. DECORATIVE WORD IS ALWAYS BACKGROUND */
.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;
  white-space:nowrap!important;
  color:transparent!important;
  font-family:'BigMooreItalic','BigMoore',Georgia,serif!important;
  font-style:italic!important;
  font-weight:400!important;
  line-height:.78!important;
  letter-spacing:-.045em!important;
  text-transform:lowercase!important;
  opacity:.56!important;
  -webkit-text-stroke:1px rgba(189,109,63,.44)!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}

/* Foreground copy must always sit above the outline word. */
.campaign-hero__content,
.campaign-hero__content-inner,
.media-mosaic__copy-inner,
.campaign-grid__masthead-copy,
.menu-showcase__masthead-inner,
.campaign-faq__masthead-copy,
.campaign-hero__title,
.media-mosaic__title,
.campaign-grid__title,
.menu-showcase__title,
.campaign-faq__title {
  position:relative!important;
  z-index:2!important;
}

/* 3. CENTRED MASTHEADS
   Decorative word behaves like a large background eyebrow.
   It sits behind the small eyebrow and only just overlaps the title. */
.media-mosaic__copy,
.campaign-grid__masthead,
.menu-showcase__masthead,
.campaign-faq__masthead {
  position:relative!important;
  align-items:flex-start!important;
  overflow:visible!important;
}

.media-mosaic__copy-inner,
.campaign-grid__masthead-copy,
.menu-showcase__masthead-inner,
.campaign-faq__masthead-copy {
  position:relative!important;
  z-index:2!important;
  padding-top:clamp(90px,7vw,116px)!important;
}

.media-mosaic__decorative,
.campaign-grid__decorative,
.menu-showcase__decorative,
.campaign-faq__decorative {
  position:absolute!important;
  top:clamp(46px,4vw,66px)!important;
  left:50%!important;
  width:max-content!important;
  max-width:94vw!important;
  font-size:clamp(5.8rem,9.3vw,9.4rem)!important;
  transform:translate(-50%,0)!important;
}

/* Enough height for decorative word + title without a huge void. */
.media-mosaic__copy {
  min-height:clamp(315px,26vw,395px)!important;
}
.campaign-grid__masthead,
.menu-showcase__masthead,
.campaign-faq__masthead {
  min-height:clamp(305px,24vw,375px)!important;
}

/* 4. HERO
   Same principle, left aligned. Outline word sits behind eyebrow/title area,
   never on top of the H1. */
.campaign-hero {
  position:relative!important;
  isolation:isolate!important;
}

.campaign-hero__decorative {
  position:absolute!important;
  top:clamp(112px,10vw,158px)!important;
  left:clamp(24px,4.2vw,74px)!important;
  width:auto!important;
  max-width:46vw!important;
  font-size:clamp(6rem,8.8vw,9.7rem)!important;
  transform:none!important;
}

.campaign-hero__content-inner {
  padding-top:clamp(46px,4vw,68px)!important;
}

/* 5. GRID CTAS - MORE PROMINENT, STILL EDITORIAL */
.campaign-grid__actions {
  gap:14px 26px!important;
  margin-top:clamp(28px,2.4vw,38px)!important;
}

.campaign-grid a.campaign-grid__cta {
  min-height:50px!important;
  padding:11px 0 9px!important;
  border-bottom-width:2px!important;
  font-family:'Jost',Arial,sans-serif!important;
  font-size:1.08rem!important;
  font-weight:600!important;
  line-height:1.2!important;
  letter-spacing:.025em!important;
}

.campaign-grid__cta span {
  font-size:1.2em!important;
}

/* 6. MOBILE */
@media(max-width:767px) {
  .campaign-hero__eyebrow,
  .media-mosaic__eyebrow,
  .campaign-grid__eyebrow,
  .menu-showcase__eyebrow,
  .campaign-faq__eyebrow {
    margin-bottom:16px!important;
    font-size:.72rem!important;
    letter-spacing:.10em!important;
  }

  .media-mosaic__copy-inner,
  .campaign-grid__masthead-copy,
  .menu-showcase__masthead-inner,
  .campaign-faq__masthead-copy {
    padding-top:82px!important;
  }

  .media-mosaic__decorative,
  .campaign-grid__decorative,
  .menu-showcase__decorative,
  .campaign-faq__decorative {
    top:38px!important;
    max-width:calc(100vw - 20px)!important;
    font-size:clamp(4.7rem,20vw,6.4rem)!important;
    opacity:.50!important;
  }

  .media-mosaic__copy,
  .campaign-grid__masthead,
  .menu-showcase__masthead,
  .campaign-faq__masthead {
    min-height:285px!important;
  }

  .campaign-hero__decorative {
    top:118px!important;
    left:18px!important;
    max-width:calc(100vw - 32px)!important;
    font-size:clamp(4.7rem,20vw,6.4rem)!important;
    opacity:.48!important;
  }

  .campaign-hero__content-inner {
    padding-top:38px!important;
  }

  .campaign-grid a.campaign-grid__cta {
    min-height:46px!important;
    font-size:1rem!important;
  }
}

/* 7. VERY NARROW MOBILE */
@media(max-width:390px) {
  .media-mosaic__decorative,
  .campaign-grid__decorative,
  .menu-showcase__decorative,
  .campaign-faq__decorative {
    font-size:clamp(4.25rem,19vw,5.6rem)!important;
  }

  .campaign-hero__decorative {
    font-size:clamp(4.2rem,19vw,5.6rem)!important;
  }
}