/* ============================================================
   components/banner.css — Closing photo banner + footer.
   Background image is set via --img-banner in tokens.css.
   ============================================================ */
.banner{
  min-height:clamp(360px,52vh,520px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f4efe6;
  background:linear-gradient(rgba(28,26,23,.42),rgba(28,26,23,.5)),url("../../assets/images/banner-bw.jpg");
  background-size:cover;background-position:center 32%;padding:clamp(62px,8vh,92px) var(--space-5);
}
.banner .g{font-family:var(--script);font-size:clamp(2rem,7vw,2.8rem);margin-bottom:.3em;color:#f6f1e8;}
.banner .nm{font-family:'Alex Brush',cursive;font-size:clamp(2.2rem,7vw,3.1rem);letter-spacing:.04em;}
.banner .dt{font-family:var(--ui);letter-spacing:.4em;font-size:.8rem;margin-top:1.4rem;opacity:.92;}

.ftr{text-align:center;padding:clamp(54px,7vh,78px) 0 clamp(46px,6vh,68px);background:var(--paper);}
.ftr .teaser{color:var(--sage-deep);font-style:italic;}

@media(max-width:520px){
  /* shorter + centred so cover reveals more of the scene instead of a tight
     zoomed slice, closer to the desktop framing */
  .banner{min-height:300px;padding:48px 16px;background-position:center 42%;}
  .banner .dt{font-size:.68rem;letter-spacing:.24em;}
}