/* =========================================================
   50 ROSES FOUNDATION — shared stylesheet
   Brand palette drawn from the logo. Linked by every page.
   ========================================================= */
:root{
  /* Palette drawn from the new rose-goblet logo (raspberry / coral / espresso) */
  --rose:        #b4274b;   /* deep raspberry — primary */
  --rose-deep:   #8f1d3b;   /* hover / darker */
  --coral:       #f0526f;   /* bright coral accent (from logo bloom) */
  --rose-soft:   #f4a9b8;   /* soft petal for light-on-dark */
  --blush:       #fbe0e7;   /* pale blush */
  --cream:       #fdf6f3;   /* warm ivory page background */
  --navy:        #33203b;   /* deep plum / aubergine — dark anchor for dark sections & text */
  --navy-soft:   #574360;
  --olive:       #9a6a3d;   /* warm bronze secondary */
  --gold:        #c79635;   /* amber accent (pairs with rosé + espresso) */
  --gold-soft:   #e6c79c;
  --gold-ink:    #7a5c17;   /* darker amber for text on light bg (AA contrast) */
  --ink:         #241a29;   /* plum-tinted near-black body text */
  --white:       #ffffff;
  --shadow:      0 10px 30px rgba(51,32,59,.12);
  --shadow-lg:   0 20px 50px rgba(51,32,59,.18);
  --radius:      14px;
  --maxw:        1140px;
  /* Skyline backgrounds (licensed stock, optimized). Home hero = sunset; sub-pages = dusk. */
  --hero-img: url("assets/hero-community.jpg");
  --page-img: url("assets/hero-community.jpg");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;color:var(--navy);line-height:1.12;font-weight:600}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.5rem}
a{color:var(--rose);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;font-size:.78rem;color:var(--rose);margin-bottom:.6rem;
}
.section{padding:88px 0}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-weight:600;font-size:1rem;
  padding:14px 30px;border-radius:50px;cursor:pointer;border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-align:center;
}
.btn-rose{background:var(--rose);color:#fff;box-shadow:0 8px 20px rgba(180,39,75,.30)}
.btn-rose:hover{background:var(--rose-deep);transform:translateY(-2px);box-shadow:0 12px 26px rgba(180,39,75,.40)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-ghost{background:transparent;color:var(--rose);border-color:var(--rose);padding:10px 22px;font-size:.92rem}
.btn-ghost:hover{background:var(--rose);color:#fff}
.btn-sm{padding:10px 22px;font-size:.9rem}

/* ---------- Nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;background:rgba(252,245,248,.92);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(51,32,59,.08);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-family:'Cinzel Decorative','Cormorant Garamond',serif;
  font-weight:700;font-size:1.35rem;color:var(--navy)}
.brand img{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{color:var(--navy);font-weight:500;font-size:.96rem;position:relative}
.nav-links a:not(.btn):hover{color:var(--rose)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--rose);transition:width .2s ease}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-links a.active:not(.btn){color:var(--rose)}
.nav-links a.active:not(.btn)::after{width:100%}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-toggle span{display:block;width:26px;height:2px;background:var(--navy);margin:5px 0;transition:.2s}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{
  background:
    linear-gradient(rgba(51,32,59,.80), rgba(51,32,59,.66)),
    var(--page-img);
  background-size:cover;background-position:center 56%;
  padding:92px 0 80px;text-align:center;color:#fff;
}
.page-hero .eyebrow{color:var(--gold-soft)}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:700;margin-bottom:10px;color:#fff}
.page-hero p{max-width:56ch;margin:0 auto;color:#f2e6df;font-size:1.12rem}
.page-hero a{color:#fff;text-decoration:underline}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    linear-gradient(100deg, rgba(51,32,59,.90) 0%, rgba(51,32,59,.66) 52%, rgba(51,32,59,.48) 100%),
    var(--hero-img);
  background-size:cover;background-position:center 58%;
  background-attachment:fixed;   /* parallax on scroll */
  padding:112px 0 96px;
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.hero-copy{max-width:760px}
.hero .eyebrow{color:var(--rose-soft)}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:700;margin-bottom:18px;color:#fff}
.hero h1 .accent{color:var(--rose-soft)}
.hero p.lead{font-size:1.2rem;color:#f4ebe6;max-width:36ch;margin-bottom:28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.7)}
.hero .btn-outline:hover{background:#fff;color:var(--navy);border-color:#fff}
.hero-badges{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap}
.hero-badge{font-size:.85rem;color:#ecd7ce;display:flex;align-items:center;gap:8px}
.hero-badge strong{font-family:'Cinzel Decorative','Cormorant Garamond',serif;font-size:1.7rem;color:var(--rose-soft);display:block;line-height:1}
.hero-art{display:flex;justify-content:center;align-items:center}
.hero-art .logo-disc{
  width:min(360px,80%);aspect-ratio:1;
  background:none;box-shadow:none;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
/* White logo on the skyline, with a soft shadow for legibility + hover lift */
.hero-art img{
  max-width:100%;max-height:100%;width:auto;
  filter:brightness(0) invert(1) drop-shadow(0 8px 20px rgba(0,0,0,.40));
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.hero-art img:hover{transform:translateY(-14px) scale(1.05) rotate(-3deg)}

/* ---------- Mission ---------- */
.mission{background:var(--navy);color:#f6ece7}
.mission h2{color:#fff}
.mission .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.mission p{color:#e6d8d0;font-size:1.08rem;margin-top:14px}
.pillars{display:grid;gap:18px}
.pillar{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);padding:20px 22px}
.pillar{overflow:hidden}
.pillar .ico{float:left;line-height:0;margin:2px 18px 8px 0}
.pillar .ico svg{width:44px;height:44px;color:var(--coral);stroke:var(--coral)}
.pillar h4{color:#fff;font-size:1.25rem;margin-bottom:4px}
.pillar p{margin:0;color:#d8c7be;font-size:.98rem}

/* ---------- Events ---------- */
.events-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.card{
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s ease;
  border:1px solid rgba(51,32,59,.06);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-media{height:170px;position:relative;background:var(--blush);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media .placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--rose-soft),var(--gold-soft));color:#fff;
  font-family:'Cinzel Decorative','Cormorant Garamond',serif;font-size:1.4rem;text-align:center;padding:16px;
}
.card-tag{position:absolute;top:14px;left:14px;background:#fff;color:var(--rose);
  font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:50px;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:6px}
.card-meta{font-size:.9rem;color:var(--navy-soft);margin-bottom:12px}
.card-meta span{display:block}
.card-meta .when{color:var(--rose);font-weight:600}
.card-body p.desc{font-size:.95rem;color:#4a5160;flex:1;margin-bottom:18px}
.card-actions{display:flex;gap:10px;flex-wrap:wrap}
.tbc{color:var(--gold-ink);font-weight:600}
/* event-card media holding a logo rather than a photo */
.card-media.logo{background:#fff;height:230px}
.card-media.logo img{width:100%;height:100%;object-fit:contain;padding:12px}

/* ---------- Gallery ---------- */
.gallery{background:#fff}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.gallery-grid .tile{aspect-ratio:4/3;border-radius:10px;overflow:hidden;position:relative;background:var(--blush)}
.gallery-grid img{width:100%;height:100%;object-fit:cover}
.gallery-grid .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blush),var(--gold-soft));color:var(--navy);
  font-family:'Cinzel Decorative','Cormorant Garamond',serif;font-size:1.1rem}

/* ---------- Testimonials ---------- */
.testimonials{background:linear-gradient(180deg,var(--cream),#fbe9ef)}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.quote{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);position:relative}
.quote::before{content:"\201C";font-family:'Cinzel Decorative','Cormorant Garamond',serif;font-size:4rem;color:var(--rose-soft);
  position:absolute;top:6px;left:18px;line-height:1}
.quote p{position:relative;font-size:1rem;color:#3c4250;margin:14px 0 16px}
.quote .who{font-weight:600;color:var(--navy);font-size:.92rem}
.quote .where{color:var(--rose);font-size:.85rem}

/* ---------- Donate ---------- */
.donate{
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(199,150,53,.18), transparent 60%),
    linear-gradient(rgba(180,39,75,.95), rgba(180,39,75,.95)),
    url("assets/donate-texture.jpg");
  background-size:cover;background-position:center;
  color:#fff;text-align:center;
}
.donate h2{color:#fff}
.donate p{max-width:54ch;margin:14px auto 28px;color:#ffe6ee;font-size:1.12rem}
.donate .btn-light{background:#fff;color:var(--rose);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.donate .btn-light:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.donate .fine{font-size:.85rem;color:#ffd2df;margin-top:18px}

/* ---------- Contact / Footer ---------- */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact .info p{margin-bottom:6px;color:#4a5160}
.contact .info .label{font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.08em;
  font-size:.76rem;margin-top:18px}
form .field{margin-bottom:16px}
form label{display:block;font-weight:600;font-size:.88rem;color:var(--navy);margin-bottom:6px}
form input,form textarea,form select{
  width:100%;padding:12px 14px;border:1px solid #d8c4cd;border-radius:10px;
  font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);
}
form select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2333203b' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer}
form input:focus,form textarea:focus,form select:focus{outline:2px solid var(--rose);border-color:var(--rose)}
footer{
  /* barely-perceptible rose line-art pattern over plum (inspired by the brand rose motif) */
  background:
    url("assets/footer-roses.png") center/cover no-repeat,
    var(--navy);
  color:#d8c6bd;padding:40px 0;text-align:center;
}
footer .brand{justify-content:center;color:#fff;margin-bottom:10px}
footer .brand img{height:40px;filter:brightness(0) invert(1)}
footer a{color:var(--gold-soft)}
footer .legal{font-size:.84rem;margin-top:10px;color:#b39d93}

/* ---------- Sponsorship ---------- */
.sponsor{background:linear-gradient(180deg,#fff,var(--cream))}
.sponsor .intro{max-width:62ch;margin:0 auto 8px;color:#4a5160;font-size:1.08rem}
.reach{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin:30px 0 8px}
.reach .stat{text-align:center}
.reach .stat strong{display:block;font-family:'Cinzel Decorative','Cormorant Garamond',serif;font-size:2.4rem;color:var(--rose);line-height:1}
.reach .stat span{font-size:.86rem;color:var(--navy-soft);text-transform:uppercase;letter-spacing:.08em}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;text-align:left}
.tier{background:#fff;border:1px solid rgba(51,32,59,.10);border-radius:var(--radius);
  padding:28px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow);position:relative}
.tier.featured{border:2px solid var(--rose);box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.tier .ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--rose);
  color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 14px;border-radius:50px;white-space:nowrap}
.tier h3{color:var(--navy);margin-bottom:2px}
.tier .price{font-family:'Cinzel Decorative','Cormorant Garamond',serif;font-size:2.1rem;color:var(--rose);font-weight:700;line-height:1.1}
.tier .price small{display:block;font-family:'Inter',sans-serif;font-size:.74rem;color:var(--gold-ink);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.tier ul{list-style:none;margin:18px 0 22px;display:grid;gap:10px;flex:1}
.tier ul li{font-size:.93rem;color:#46505f;padding-left:24px;position:relative}
.tier ul li::before{content:"\2713";position:absolute;left:0;color:var(--olive);font-weight:700}
.tier .btn{width:100%;text-align:center}
.sponsor-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.sponsor-note{text-align:center;color:var(--navy-soft);font-size:.9rem;margin-top:16px}

/* ---------- Past Events ---------- */
.past{background:var(--cream)}
.past-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.past-card{background:#fff;border:1px solid rgba(51,32,59,.08);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow)}
.past-card .past-tag{display:inline-block;background:var(--blush);color:var(--rose-deep);
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:50px;margin-bottom:12px}
.past-card h3{font-size:1.3rem;margin-bottom:8px}
.past-card .where{font-size:.86rem;color:var(--navy-soft);margin-bottom:10px}
.past-card p{font-size:.93rem;color:#4a5160;margin-bottom:14px}
.past-card a.link{font-weight:600;font-size:.9rem}
.past-logo{height:110px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.past-logo img{max-height:110px;width:auto;object-fit:contain}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  body{--hero-img:url("assets/hero-community-mobile.jpg");--page-img:url("assets/hero-community-mobile.jpg")}
  .hero{background-attachment:scroll} /* fixed/parallax is janky on mobile */
  .hero-grid,.mission .wrap,.contact .wrap{grid-template-columns:1fr}
  .hero-art{order:-1}
  .quote-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .tier.featured{transform:none}
  .past-grid{grid-template-columns:1fr}
  .nav-links{
    position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;background:var(--cream);
    border-bottom:1px solid rgba(51,32,59,.10);padding:8px 0;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%;text-align:center}
  .nav-links li a:not(.btn){display:block;padding:14px 0}
  .nav-links li .btn{margin:10px auto;display:inline-block}
  .menu-toggle{display:block}
  .section{padding:64px 0}
}
@media (max-width:520px){
  .gallery-grid{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr}
  .reach{gap:24px}
  .hero-badges{gap:16px}
}

/* ---------- Accessibility ---------- */
.primary-nav{display:flex;align-items:center}
/* Skip link for keyboard users */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--rose);color:#fff;padding:10px 16px;border-radius:8px;
  font-weight:600;transition:top .15s ease;
}
.skip-link:focus{top:12px}
/* Visible keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:3px;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero{background-attachment:scroll!important}
  .hero-art img:hover{transform:none}
}

/* ---------- Launch additions (Oct 2026) ---------- */
.next-up{background:#fff;border-bottom:1px solid #eadbd6}
.next-up-inner{display:flex;align-items:center;gap:22px;padding:18px 0;flex-wrap:wrap}
.next-up-inner img{width:84px;height:auto;flex:none}
.next-up-inner p{flex:1 1 360px;margin:0;color:var(--ink);font-size:1.02rem}
.next-up-inner b{color:var(--rose-deep)}
.next-up-card{display:flex;gap:26px;align-items:center;text-align:left;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px;margin:40px auto 0;max-width:820px}
.next-up-card img{width:120px;height:auto;flex:none}
.next-up-card p{color:#4a5160}
.contact-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.contact-card h2{margin-bottom:10px}
.contact-card p{color:#4a5160;margin-bottom:10px}
@media (max-width:600px){.next-up-card{flex-direction:column;text-align:center}.next-up-inner{justify-content:center;text-align:center}}
.intro a,.contact-card p a:not(.btn){text-decoration:underline}