/* === Extracted from index.html (style id="no-hscroll") === */html, body { overflow-x: clip; }/* Prevent any inherited filters from altering sponsor colors */.sponsor-marquee, .sponsor-viewport, .sponsor-logo, .sponsor-logo img { filter: none !important; }/* Strong guard: never alter sponsor colors inside the marquee */.sponsor-marquee .sponsor-logo,
.sponsor-marquee .sponsor-logo img { filter: none !important; opacity: 1 !important; }/* === Extracted from index.html (style id="nav-core") === */.logo{ width:81px; height:73px; background:url('../images/logo.png') center/cover no-repeat; margin-right:20px; }/* --- Mobile overflow fixes --- */html { overflow-x: clip; }body { overflow-x: hidden; }img, svg, video { max-width: 100%; height: auto; }.support-why h2,
.support-how h2,
.support-tiers-title,
.carousel-title {
  overflow: clip;
}@media (max-width: 600px) {
  :root { --support-underline-overhang: 0; }
}.sponsor-marquee { overflow-x: hidden; }/* === Extracted from index.html === */:root {
      --hero-text-size: 48px;
      --bar-radius: 12px;
      --stats-bar-max-width: 900px;
      --stats-bar-height: 150px;
      --stats-bar-gap: 2rem;
      --stats-number-size: 48px;
      --stats-label-size: 18px;
      --stats-item-gap: 0.5rem;
      --stats-number-color: #000;
      --stats-label-color: #000;
      --stats-gradient: linear-gradient(90deg,rgba(249,203,34,0.9) 23%,rgba(239,118,22,0.9) 50%,rgba(240,17,95,0.9) 77%);
      --partnerships-text-size: 72px;
      --partnerships-underline-height: 10px;
      --partnerships-underline-radius: 1000px;
      --partnerships-underline-offset: 0.5rem;
      --partnerships-underline-overhang: 5rem;
      --partner-logo-width: 120px;
      --partner-logo-gap: 2rem;
    }* { margin:0; padding:0; box-sizing:border-box; }html, body { width:100%; }body {
      background:#000; color:#fff;
      font-family:'Instrument Sans',sans-serif;
      line-height:1.4; overflow-x:hidden;
    }a { text-decoration:none; color:inherit; }/* — Sticky Nav — */.logo { width:81px; height:73px; background:url('../images/logo.png') center/cover no-repeat; margin-right:20px; }nav a:hover { opacity:.7; }/* Responsive nav for mobile and tablets *//* HERO 1 */.hero-1 {
      width: 100%;
      min-height: 320px;
      height: 675px;
      position: relative;
      display: block; /* Remove flex */
    }.subhead {
      position: absolute;
      left: 10%;
      bottom: 5rem;
      right: auto;
      top: auto;
      background: rgba(0,0,0,0.8);
      padding: 1.2em 1.5em;
      max-width: 450px;
      z-index: 2;
      margin: 0;
    }.btn-img img { height:40px; display:block; }/* STATS BAR IMAGE */.stats-btn img {
      max-width: 900px;
      width: 100%;
      height: auto;
      display: inline-block;
      transition: transform 0.3s ease;
    }.stats-btn:hover img {
      transform: scale(1.05);
    }/* HERO 2 + ABOUT */.hero-2 {
      position:relative; width:100%; min-height:320px; height: auto; padding: 1px 0;
      background:url('../images/Flag.png') center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
    }.hero-2::after {
      content:''; position:absolute; inset:0;
      background:linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 50%,#000 100%);
      z-index:1;
      pointer-events: none;
    }.about {
      position: relative;
      width: 100%;
      max-width: 900px;
      margin: 0 auto 0 5%;
      padding: 60px 40px;
      background:rgba(0,0,0,0.75);
      z-index:2;
      box-sizing:border-box;
      border-radius: 12px;
    }.about .inner { max-width:900px; margin:0 auto; align-content: flex-start;}.about h2 {
      font:40px 'Tilt Warp',sans-serif; margin-bottom:16px;
    }.about p { font-size:18px; line-height:22px; margin-bottom:24px; }.founder {
      display:flex; align-items:center; gap:24px; flex-wrap:wrap;
    }.photo {
      width:140px; height:178px;
      background:url('../images/Winnie.png') center/cover no-repeat;
      flex-shrink:0;
    }.signature {
      width:312px; height:79px;
      background:url('../images/signature.png') center/cover no-repeat;
      margin-bottom:8px;
    }.name { font-size:24px; font-weight:700; }/* FOOTER *//* Use grid so the center column can be perfectly centered vertically *//* keep the donate + socials centered as a group *//* Mobile: stack and hard-center everything */.btn-img:hover img {
      transform: scale(1.05);
      transition: transform 0.3s ease;
    }.logo-link:hover .logo {
      transform: scale(1.05);
    }.btn-img img {
      display: block;
      transition: transform 0.3s ease;
    }/* Responsive Fixes *//* 1) Nav-bar logo stays colored *//* 1) Nav‐bar logo stays colored *//* 1) Force the nav‐bar logo image *//* 2) Ensure footer logo stays white *//* 2) On hover, apply grayscale + slight dim *//* SECTION + TITLE */.sponsor-carousel-section {
  margin: 4rem 8%;
  text-align: center;
}.carousel-title {
  display: inline-block;
  position: relative;
  font-family: 'Tilt Warp', sans-serif;
  font-size: 2.5rem;
  color: #fff;
  padding-bottom: 0.5em;
  margin-bottom: 1.5rem;
}.sponsor-carousel-section .carousel-title::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--support-underline-overhang));
  right: calc(-1 * var(--support-underline-overhang));
  bottom: 0;
  height: var(--support-underline-height);
  background: var(--support-gradient);
  border-radius: var(--support-underline-radius);
}/* ensure only horizontal clipping; logos can overflow vertically on pop *//* let pop‐scale overflow vertically */.sponsor-marquee {
  overflow-x: hidden;
  overflow-y: visible;
}.sponsor-marquee::-webkit-scrollbar { display: none; }.sponsor-marquee { scrollbar-width: none; }/* horizontal flex + looping animation */.marquee {
  display: flex;
  gap: 1.5rem;
  padding: 0; margin: 0;
  list-style: none;
  
  overflow: visible;                /* ensure children aren’t clipped */
  padding-left: var(--s-gap, 1.5rem); padding-right: var(--s-gap, 1.5rem);
}to   { transform: translateX(-50%); }/* pause on hover *//* uniform box + button behavior */.sponsor-logo {
  margin-top: 12px;
  display: inline-block;
  flex: 0 0 auto;
  width: 150px;    /* your fixed size */
  height: 100px;
  border: 3px solid;
  border-radius: 8px;
  background: transparent;
  position: relative;
  z-index: 9;
  transition: transform 0.25s ease;
  overflow: visible;                /* child img can overflow */
}.sponsor-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}/* pop & lift on hover */.sponsor-logo:hover { transform: translateY(0px) scale(1.1); box-shadow: 0 8px 20px rgba(0,0,0,.35); z-index: 10; filter: none !important; }/* outlines */.tier-gold { border-color: #F9CB22; }.tier-amber { border-color: #EF7616; }.tier-pink   { border-color: #F0115F; }/* center title & gradient underline */.carousel-title {
  display: inline-block;
  position: relative;
  color: #fff;
  font-family: 'Tilt Warp', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5em;
}.carousel-title::after {
  content:""; position:absolute;
  left: calc(-1 * var(--support-underline-overhang));
  right: calc(-1 * var(--support-underline-overhang));
  bottom:0; height: var(--support-underline-height);
  background: var(--support-gradient);
  border-radius: var(--support-underline-radius);
}/* make the title an inline‐block and give it room for the underline */.sponsor-carousel-section .carousel-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5em; /* space for the bar */
}/* draw the gradient bar */.sponsor-carousel-section .carousel-title::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--partnerships-underline-overhang));
  right: calc(-1 * var(--partnerships-underline-overhang));
  bottom: 0;
  height: var(--partnerships-underline-height);
  border-radius: var(--partnerships-underline-radius);
  background: linear-gradient(
    90deg,
    rgba(249,203,34,0.9) 23%,
    rgba(239,118,22,0.9) 50%,
    rgba(240,17,95,0.9) 77%
  );
}.hero-text {
  font-family: 'Tilt Warp', sans-serif;
  font-weight: 100;
  font-size: 48px;
  line-height: 1.1;
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 700px;
  text-align: center;
  color: #fff;
  z-index: 2;
}
@media (max-width: 600px) {
  .hero-text {
    font-size: 32px; /* smaller on phones */
  }
}@media (max-width: 640px) {
  .hero-text {
    font-size: 28px; /* smaller on phones */
    align-self: center;
  }
}@media (max-width: 900px) {
  .hero-text {
    font-size: 40px; /* smaller on phones */
  }
}.subhead p {
  font-size: 1.5rem;   /* smaller default size */
  margin-bottom: 5px;
}@media (max-width: 600px) {
  .subhead p {
    font-size: 1rem;  /* even smaller on phones */
  }
  .subhead {
    max-width: 90%;   /* fit better on small screens */
    margin-right: 7vw;
    margin-left: 0vw;
  }
}.logo {
  width: 81px;
  height: 73px;
  background: url('../images/logo.png') center/cover no-repeat;
  margin-right: 20px;
}/* === Sponsor viewport shows 3 logos at a time === */.sponsor-viewport {
  --s-logo-w: 100vw;
  --s-gap: 1.5rem;
  /* exact 3 logos + 2 gaps area inside the padding */
  width: calc(4 * var(--s-logo-w) + 1 * var(--s-gap));
  max-width: 100%;
  margin: 0 auto;
   /* gutters so edge logos aren't clipped */
  box-sizing: content-box;       /* keep inner visible area equal to width above */
  overflow: hidden; /* ensure only 3 are visible */

}/* Make the track GPU-friendly and driven by JS (no CSS keyframes) */.marquee {
  display: flex;
  gap: var(--s-gap, 1.5rem);
  padding: 0; margin: 0; list-style: none;
  will-change: transform;
  transform: translate3d(0,0,0);
}/* Keep logos in fixed boxes, but scale the IMG on hover so it never gets cropped by the box */.sponsor-logo {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--s-logo-w, 150px);
  height: 100px;
  margin-top: 12px;      /* <-- pushes the whole box down */
  padding: 10px;
  border: 3px solid;
  border-radius: 12px;
  background: transparent;
  position: relative;
  z-index: 1;
  overflow: visible;     /* allow hover scaling to show */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}.sponsor-logo {
  display: inline-block;
  flex: 0 0 auto;
  width: 325px;
  height: 325px;
  margin-top: 12px;      /* <-- pushes the whole box down */
  padding: 10px;
  border: 3px solid;
  border-radius: 12px;
  background: transparent;
  position: relative;
  z-index: 1;
  overflow: visible;     /* allow hover scaling to show */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}/* Keep logos true to original colors */.sponsor-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  transition: transform 0.25s ease;
  filter: none !important;   /* force original colors */
}.sponsor-logo:hover img { transform: none; }/* Mobile tweak: show 2 at a time on very small screens for breathing room */@media (max-width: 520px) {
  .sponsor-viewport {
    width: calc(2 * var(--s-logo-w) + 1 * var(--s-gap));
  }
}/* --- Tier border colors (last in cascade) --- */.sponsor-logo.tier-onyx { border-color: #2A2A2A !important; }.sponsor-logo.tier-amber { border-color: #EF7616 !important; }.sponsor-logo.tier-pink { border-color: #F0115F !important; } .sponsor-logo.tier-gold { border-color: #FFD700 !important; }/* === Extracted from index.html (style id="nav-left-hotfix") === *//* === NAV alignment + size hotfix (match index fix) === */


/* ====== Founder mobile alignment & spacing (combined fix) ====== */
@media (max-width: 700px) {
  .founder {
    justify-content: center;
    text-align: center;
  }
  .founder .photo,
  .founder .signature,
  .founder .name {
    margin-left: auto;
    margin-right: auto;
  }
}
.stats-section {
  text-align: center;
  margin: 4rem 0;
  position: relative;
}

.stats-gradient {
  height: 6px; /* line thickness */
  background: linear-gradient(
    90deg,
    rgba(249,203,34,0.9) 23%,
    rgba(239,118,22,0.9) 50%,
    rgba(240,17,95,0.9) 77%
  );
  border-radius: 1000px;
}
.site-footer .logo {
  background: url('../images/logo.png') center/cover no-repeat;
}
.site-footer .footer-copy {
  font-size: 24px;
  font-weight: 1000 !important;
  margin: 0 0 8px 0;
}
.site-footer .footer-sub {
  font-size: 18x;
  font-weight: 1200 !important;
  line-height: 16px;
  opacity: 0.8;
  margin-right: 2px;
}
/* ===== HERO SPLIT: 80% hero content + 20% newsletter ===== */
.hero-1.hero-split{
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(260px, 1fr);
  min-height: 675px;   /* keep minimum height */
  height: auto;        /* allow newsletter to extend hero */
  gap: 0;
}

/* Left column keeps your existing absolute placements */
.hero-1 .hero-main{
  position: relative;
  height: 100%;
  min-width: 0;
}

/* Right column becomes a normal grid cell (no overlay) */
.hero-1.hero-split .discord-panel{
  position: relative;     /* <- not absolute */
  top: auto;
  right: auto;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.92);
  border-radius: 0;       /* looks like a clean right rail */
  padding: 18px 16px;

  z-index: 3;
}

/* Header stays fixed, list scrolls */
.hero-1.hero-split .discord-panel h3{
  flex: 0 0 auto;
}

/* Keep your existing inner styles (these can stay) */
.discord-panel h3{
  margin: 0 0 12px 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}

.discord-announcements{
  display: flex;
  gap: 14px;
  color: #fff;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 6px;
  scroll-behavior: smooth;
}

.discord-post{
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 12px;
}

.discord-post:first-child{
  border-top: none;
  padding-top: 0;
}

.discord-text{
  margin: 0 0 8px 0;
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.35;
}

.discord-time{
  display: block;
  font-size: 12px;
  opacity: 0.75;
}

/* Mobile: stack newsletter below hero */
@media (max-width: 900px){
  .hero-1.hero-split{
    grid-template-columns: 1fr;
    height: auto; /* let hero grow naturally */
  }

  .hero-1 .hero-main{
    height: 675px; /* keep hero image height */
  }

  .hero-1.hero-split .discord-panel{
    width: 100%;
    margin: 0;
    border-radius: 0;
    height: auto;
    max-height: none;
    padding: 18px 16px;
  }

  .hero-1 .subhead{
    bottom: 0.25rem;   /* was 5rem */
  }
}

.discord-panel a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.discord-panel a:hover{
  opacity: 0.85;
}

.discord-post .discord-text{
  max-height: 8.5em;     /* about ~6 lines */
  overflow: hidden;
}

@media (max-width: 900px){
  .hero-1.hero-split{
    background-position: center 70%;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.hero-1 img {
  object-position: 100% center; /* shift the crop toward the right */
}

.discord-images{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0 8px;
  align-items: start; /* helps height:100% behave predictably */
}

/* Give each grid item a max height so children can use height: 100% */
.discord-images > *{
  max-height: 250px;
}

/* If your images are wrapped in <a>, make the wrapper behave like a grid item */
.discord-images > a{
  display: block;
}

/* Images + GIFs */
.discord-img,
.discord-gif{
  width: 100%;
  height: 200px;
  max-height: 250px;
  max-width: 100%;
  display: block;
  border-radius: 10px;
  object-fit: contain;
}

/* Videos MUST have width */
.discord-video{
  width: 100%;
  height: auto;
  max-height: 500px;
  max-width: 100%;
  display: block;
  border-radius: 10px;
  background: #000;
  object-fit: contain;
}

/* Videos take the full row (optional, but usually looks best) */
.discord-images video{
  width: 100%;
  height: auto;
  max-height: 500px;
  border-radius: 10px;
  display: block;
  background: #000;
  object-fit: contain;
  grid-column: 1 / -1;  /* <- full width row */
}

/* Desktop tweaks */
@media (min-width: 900px){
  .discord-images{
    grid-template-columns: 1fr 1fr;
  }

  .discord-images > *{
    max-height: 180px;
  }

  .discord-img,
  .discord-gif,
  .discord-video{
    max-height: 180px;
  }
}

/* The right newsletter rail */
.hero-1.hero-split .discord-panel{
  display: flex;
  flex-direction: column;
  min-height: 0;            /* IMPORTANT: allows the child to scroll */
}

/* The scrolling list */
.discord-announcements{
  flex: 1 1 auto;
  min-height: 0;            /* IMPORTANT: allows overflow scrolling */
  overflow-y: auto;
  overflow-x: hidden;

  /* choose one of these height caps */
  max-height: 520px;        /* fixed cap */
  /* OR: max-height: 70vh;  viewport-based cap */

  padding-right: 6px;
  scroll-behavior: smooth;
}

.discord-announcements::-webkit-scrollbar{
  width: 10px;
}
.discord-announcements::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}
.discord-announcements::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.28);
}

/* MP4/WebM "GIFs" */
.discord-gif-video{
  width: 100%;
  height: 200px;
  max-height: 250px;
  object-fit: contain;
  border-radius: 10px;
  background: transparent;
  pointer-events: none; /* behaves like a GIF */
}

.discord-file{
  display: inline-block;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
}

.discord-file:hover{
  background: rgba(255,255,255,0.10);
}

/* File attachments should span full width */
.discord-images .discord-file{
  grid-column: 1 / -1;
}

.discord-file{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;

  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;

  font-size: 14px;
  line-height: 1.3;

  /* wrapping behavior */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* File icon */
.discord-file::before{
  content: "📄";
  font-size: 20px;
  flex-shrink: 0;
}

.discord-file:hover{
  background: rgba(255,255,255,0.14);
}

.hero-1{
  background: none; /* IMPORTANT: stop sizing against full section height */
}

.hero-1 .hero-main{
  background: url('../images/Landing.png') no-repeat center 70% / cover;
}