/* ==========================================================================
   Support page theme — warm, family-friendly palette.
   Everything here is scoped under body.support-theme so it can NEVER
   affect index.html or any other page that shares styles.css.
   ========================================================================== */

body.support-theme{
  --soil: #fdf1e0;              /* warm cream page background */
  --soil-2: #f7e5c9;            /* deeper cream, used for cards */
  --paper: #3c2a18;             /* deep warm brown — primary text */
  --marigold: #e2811f;          /* warm orange — button fills */
  --marigold-bright: #9c4e17;   /* deep terracotta — accent text + button hover */
  --leaf: #5c7a3f;
  --leaf-bright: #3f6b2a;       /* deeper green, readable on cream */
  --coral: #b23f26;             /* deeper coral, readable on cream */
  --line: rgba(60,42,24,0.12);
  --line-strong: rgba(60,42,24,0.22);
  --muted: rgba(60,42,24,0.66);
}

/* Hardcoded (non-variable) colours in styles.css that assumed a dark page —
   re-pointed here so the light theme reads correctly. */
body.support-theme .nav{
  background: rgba(253,241,224,0.88);
}
body.support-theme ::selection{
  background: var(--marigold);
  color: var(--soil);
}
body.support-theme .signup-submit,
body.support-theme .shop-buy:hover{
  color: var(--paper);
}
body.support-theme .signup-form input[type="email"],
body.support-theme .signup-form input[type="text"]{
  background: rgba(60,42,24,0.045);
}
body.support-theme .signup-form input::placeholder{
  color: rgba(60,42,24,0.38);
}
body.support-theme .nav-logo{
  background: var(--soil-2);
}

/* ---------- full-width band photo banner ---------- */
.support-banner{
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  max-height: 60vh;
  overflow: hidden;
}
.support-banner img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 30%;
}
.support-banner::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(60,42,24,0.05) 0%, rgba(60,42,24,0.12) 70%, var(--soil) 100%);
}
@media (max-width: 720px){
  .support-banner{ aspect-ratio: 4/5; max-height: 46vh; }
}

/* ---------- intro: headline + Benji photo side panel ---------- */
.support-intro{
  padding: 56px 0 8px;
  display:grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items:center;
}
.support-intro-copy .section-num{ display:block; margin-bottom: 14px; }
.support-intro-copy h1{
  font-family: var(--display); font-weight:600;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  margin: 0 0 16px; letter-spacing: -0.01em;
}
.support-intro-copy p{
  color: var(--muted); max-width: 480px;
  font-size: 1.05rem; margin: 0;
}
.support-intro-photo{
  position: relative;
  justify-self: center;
}
.support-intro-photo .frame{
  width: 240px;
  border-radius: 14px;
  overflow: hidden;
  border: 6px solid var(--soil-2);
  box-shadow: 0 18px 34px rgba(60,42,24,0.18);
  transform: rotate(3deg);
}
.support-intro-photo img{
  width:100%; aspect-ratio: 4/5; object-fit:cover; display:block;
}
@media (max-width: 720px){
  .support-intro{ grid-template-columns: 1fr; text-align:center; gap: 32px; padding: 40px 0 8px; }
  .support-intro-copy p{ margin: 0 auto; }
  .support-intro-photo .frame{ width: 180px; margin: 0 auto; }
}

/* ---------- mailing list, with the hands photo standing on its own ---------- */
.signup-layout{
  display:grid;
  grid-template-columns: 0.85fr 1.35fr;
  gap: 28px;
  align-items:stretch;
}
.signup-side-image{
  border-radius: 20px;
  overflow:hidden;
  min-height: 320px;
  box-shadow: 0 16px 34px rgba(60,42,24,0.16);
}
.signup-side-image img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: center 30%;
  filter: brightness(1.12) contrast(1.03);
}
body.support-theme .signup-panel{
  box-shadow: 0 16px 34px rgba(60,42,24,0.08);
}
@media (max-width: 860px){
  .signup-layout{ grid-template-columns: 1fr; }
  .signup-side-image{ min-height: 220px; }
}

/* ---------- merch: balanced, smaller product shots ---------- */
.shop-grid{
  max-width: 1080px;
  margin: 0 auto;
}
.shop-card-img{
  aspect-ratio: 4/5;
  padding: 28px;
  background:
    radial-gradient(ellipse at center, rgba(60,42,24,0.05) 0%, rgba(60,42,24,0) 70%),
    var(--soil-2);
}
.shop-card.poster .shop-card-img{ aspect-ratio: 4/5; }
.shop-card-img img{
  width:100%; height:100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(60,42,24,0.16);
}