/* ---------------------------------------------------------------------------
   Join & Shop — green from the banner all the way through the mailing list,
   then one clean step into the maroon for merch.
   ------------------------------------------------------------------------- */

/* The intro shared the blue page, which made the green band below it look
   like an interruption. The whole top of the page is green now. */
body{ background: #1b4440; }
.site-banner{ background: #1b4440; }

.page-intro{ padding-bottom: 8px; }
.page-intro-copy h1{
  font-family: 'Poppins', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.015em;
  color: #eab634;
}

#mailing-list{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  border-bottom: none;
  background: #1b4440;
}
#mailing-list .signup-panel{
  background: rgba(0,0,0,0.20);
  border-color: rgba(250,243,232,0.20);
}
#mailing-list .signup-copy h2{
  font-family: 'Poppins', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.012em;
  color: #eab634;
}

/* ---- merch: its own band, and room to breathe ------------------------- */
#shop{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  border-bottom: none;
  background: #76304a;
}
#shop .section-title{ color: #eab634; }
#shop .section-sub{ color: rgba(250,243,232,0.84); }

/* These were penned into 780px in the middle of the page and the art panels
   were tall and narrow with it. Full width, and square. */
.shop-grid.balanced{ max-width: none; gap: 30px; }
.shop-grid.balanced .shop-card-img{ aspect-ratio: 1 / 1; padding: 22px; }
.shop-grid.balanced .shop-card-img img{ object-fit: contain; }

#shop .shop-card{ background: rgba(0,0,0,0.20); border-radius: 14px; }
#shop .shop-card-body{ padding: 24px 26px 28px; }
#shop .shop-title{
  font-family: 'Poppins', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0;
  font-size: 1.02rem; line-height: 1.2;
  color: #ffffff;
}
#shop .shop-desc{ color: rgba(250,243,232,0.82); }
#shop .shop-buy{ color: #eab634; white-space: nowrap; }

/* the banner sits on green here, so that is what it fades into */
:root{ --banner-fade: #1b4440; }