@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600&family=Nunito:wght@400;500;600;700&display=swap');


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --paper: #ffffff;
  --paper-soft: #f5f6fb;

  --navy-deep: #071020;
  --navy: #141d4d;
  --navy-mid: #26317a;

  --indigo-light: #4a5cc9;

  --periwinkle: #5457c4;
  --periwinkle-light: #dedcf7;

  --ink: #12162c;
  --muted: #5b6178;
  --muted-on-navy: #9099c9;

  --hairline: rgba(15, 23, 55, 0.12);
  --hairline-on-navy: rgba(167, 165, 230, 0.2);

  --shadow: 0 20px 50px rgba(15, 23, 55, 0.10);
}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;

  min-height: 100vh;

  display: flex;
  flex-direction: column;

  overflow-x: hidden;

  background: var(--paper);

  color: var(--ink);

  font-family: 'Nunito', sans-serif;

  -webkit-font-smoothing: antialiased;
}

main {
  width: 100%;
}

h1,
h2,
h3,
.serif {
  margin: 0;

  color: var(--navy-deep);

  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.wrap {
  width: min(100% - 64px, 1180px);
  margin: 0 auto;
}

@media (max-width: 640px) {
  .wrap {
    width: min(100% - 40px, 1180px);
  }
}


/* =========================================================
   NAVIGATION
   ========================================================= */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 100;

  padding: 18px 0;

  background: rgba(255, 255, 255, 0.94);

  border-bottom: 1px solid transparent;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition:
    padding 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

header.scrolled {
  padding: 12px 0;

  border-color: var(--hairline);
}

nav.wrap {
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* Brand */

.brand {
  display: flex;
  align-items: center;

  gap: 10px;
}

.brand-mark {
  display: block;
}


/* Navigation links */

.nav-links {
  display: flex;
  align-items: center;

  gap: 34px;

  font-size: 14px;
}

.nav-links a {
  position: relative;

  padding: 5px 0;

  color: var(--muted);

  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active,
.drop-btn:hover,
.drop-btn.active,
.dropdown.open .drop-btn {
  color: var(--navy-deep);
}

.nav-links a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 1px;

  background: var(--periwinkle);

  transition: width 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}


/* CTA */

.nav-cta {
  padding: 11px 24px;

  border-radius: 100px;

  color: white;

  background:
    linear-gradient(
      135deg,
      var(--indigo-light),
      var(--navy-mid)
    );

  font-size: 13px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.nav-cta:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 25px rgba(74, 92, 201, 0.35);
}


/* Mobile menu */

.menu-btn {
  display: none;

  border: 0;

  background: none;

  color: var(--navy-deep);

  font-size: 26px;

  cursor: pointer;
}


/* Dropdown */

.dropdown {
  position: relative;
}

.drop-btn {
  appearance: none;

  padding: 5px 0;

  border: 0;
  background: transparent;

  color: var(--muted);
  font: inherit;

  cursor: pointer;
}

.drop-btn span {
  display: inline-block;
  margin-left: 3px;
  transition: transform 0.2s ease;
}

.dropdown.open .drop-btn span {
  transform: rotate(180deg);
}

.dropdown-content {
  position: absolute;

  top: 100%;
  left: -14px;

  display: none;

  min-width: 165px;

  overflow: hidden;

  border-radius: 10px;

  background: white;

  border: 1px solid var(--hairline);

  box-shadow:
    0 14px 35px rgba(10, 16, 41, 0.14);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content,
.dropdown.open .dropdown-content {
  display: block;
}

.dropdown-content a {
  display: block;

  padding: 12px 16px;
}

.dropdown-content a:hover {
  background: var(--paper-soft);
}


/* Homepage dark nav */

.homepage > #siteHeader {
  position: sticky;

  background: rgba(6, 14, 31, 0.96);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.10);
}

.homepage .nav-links a,
.homepage .drop-btn {
  color: #dce4ff;
}

.homepage .nav-links a:hover,
.homepage .nav-links a.active,
.homepage .drop-btn:hover,
.homepage .drop-btn.active,
.homepage .dropdown.open .drop-btn {
  color: white;
}

.homepage .menu-btn {
  color: white;
}

.homepage .dropdown-content {
  background: #0d1832;

  border-color:
    rgba(255, 255, 255, 0.12);
}

.homepage .dropdown-content a {
  color: #dce4ff;
}

.homepage .dropdown-content a:hover {
  color: white;

  background:
    rgba(84, 87, 196, 0.2);
}


/* Responsive navigation */

@media (max-width: 860px) {

  .nav-links {
    position: fixed;

    top: 0;
    right: 0;

    width: min(80vw, 340px);
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 26px;

    padding: 40px;

    background: white;

    transform: translateX(100%);

    transition: transform 0.35s ease;

    box-shadow:
      -20px 0 50px rgba(15, 23, 55, 0.15);
  }

  .homepage .nav-links {
    background: #071020;
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .menu-btn {
    display: block;

    z-index: 120;
  }

  .nav-cta {
    display: none;
  }

  .dropdown-content {
    position: static;

    display: none;

    margin-top: 10px;

    border: 0;

    background: transparent;

    box-shadow: none;
  }

  .dropdown:hover .dropdown-content,
  .dropdown:focus-within .dropdown-content {
    display: none;
  }

  .dropdown.open .dropdown-content {
    display: block;
  }
}


/* =========================================================
   HOME HERO
   ========================================================= */

.hero-reference {
  position: relative;

  width: 100%;

  height: calc(100svh - 80px);

  min-height: 690px;

  max-height: 1000px;

  padding: 0;

  overflow: hidden;

  isolation: isolate;

  background: #061020;
}

.hero-reference-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center center;

  z-index: 0;
}


/* Slight depth overlay */

.hero-reference::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(2, 7, 20, 0.02),
      rgba(2, 7, 20, 0.12)
    );
}


/* =========================================================
   ANIMATED STARS
   ========================================================= */

.hero-starfield {
  position: absolute;

  inset: -10%;

  z-index: 2;

  pointer-events: none;

  mix-blend-mode: screen;
}

.starfield-one {
  background-image:

    radial-gradient(
      circle at 10% 20%,
      white 0 1px,
      transparent 1.8px
    ),

    radial-gradient(
      circle at 25% 45%,
      #dbe5ff 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 38% 15%,
      white 0 1px,
      transparent 1.8px
    ),

    radial-gradient(
      circle at 56% 36%,
      #d6e0ff 0 1px,
      transparent 1.8px
    ),

    radial-gradient(
      circle at 73% 16%,
      white 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 89% 42%,
      #dbe5ff 0 1px,
      transparent 1.8px
    );

  background-size:
    500px 400px;

  opacity: 0.55;

  animation:
    starDrift 24s linear infinite,
    starTwinkle 5s ease-in-out infinite alternate;
}

.starfield-two {
  background-image:

    radial-gradient(
      circle at 18% 28%,
      white 0 0.8px,
      transparent 1.5px
    ),

    radial-gradient(
      circle at 44% 55%,
      #cedcff 0 1px,
      transparent 1.7px
    ),

    radial-gradient(
      circle at 72% 34%,
      white 0 0.8px,
      transparent 1.5px
    ),

    radial-gradient(
      circle at 90% 64%,
      #d3e1ff 0 1px,
      transparent 1.7px
    );

  background-size:
    360px 310px;

  opacity: 0.4;

  animation:
    starDriftReverse 34s linear infinite,
    starTwinkle 6s ease-in-out infinite alternate;
}


/* Shooting stars */

.shooting-star {
  position: absolute;

  z-index: 3;

  width: 150px;
  height: 1px;

  opacity: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.95)
    );

  filter:
    drop-shadow(
      0 0 5px rgba(200, 215, 255, 0.9)
    );
}

.shooting-star-one {
  top: 25%;
  left: -15%;

  animation:
    shootAcross 10s ease-in-out 2s infinite;
}

.shooting-star-two {
  top: 48%;
  left: -15%;

  transform: scale(0.7);

  animation:
    shootAcross 15s ease-in-out 7s infinite;
}


/* Mars glow */

.mars-glow {
  position: absolute;

  top: -15%;
  right: -10%;

  z-index: 2;

  width: 44vw;
  height: 44vw;

  pointer-events: none;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 151, 99, 0.18),
      rgba(225, 105, 70, 0.07) 40%,
      transparent 70%
    );

  filter: blur(20px);

  animation:
    marsPulse 7s ease-in-out infinite alternate;
}


/* Readable hero content over the supplied event artwork */

.hero-content {
  position: absolute;

  top: 6%;
  bottom: 13%;
  left: 50%;

  z-index: 6;

  width: min(calc(100% - 48px), 690px);

  padding: clamp(30px, 4vw, 48px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(222, 220, 247, 0.24);
  border-radius: 30px;

  color: white;
  background:
    linear-gradient(145deg, rgba(6, 14, 31, 0.93), rgba(16, 25, 65, 0.88));

  text-align: center;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transform: translateX(-50%);
}

.hero-subtitle {
  margin-top: 14px;

  color: #eef1ff;

  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
}

.hero-summary {
  max-width: 560px;

  margin: 14px auto 0;

  color: #b8c1e8;

  font-size: 15px;
  line-height: 1.7;
}

.hero-content .btn-ghost {
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

.hero-content .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
}


/* Animations */

@keyframes starTwinkle {

  from {
    opacity: 0.25;
  }

  to {
    opacity: 0.72;
  }

}

@keyframes starDrift {

  to {
    transform:
      translate3d(
        40px,
        20px,
        0
      );
  }

}

@keyframes starDriftReverse {

  to {
    transform:
      translate3d(
        -35px,
        18px,
        0
      );
  }

}

@keyframes shootAcross {

  0%,
  72% {
    opacity: 0;

    transform:
      translate3d(0, 0, 0)
      rotate(-18deg);
  }

  76% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        125vw,
        -35vh,
        0
      )
      rotate(-18deg);
  }

}

@keyframes marsPulse {

  from {
    opacity: 0.5;

    transform:
      scale(0.97);
  }

  to {
    opacity: 0.9;

    transform:
      scale(1.04);
  }

}


/* =========================================================
   COMMUNITY PHOTOS
   ========================================================= */

.community-strip {
  padding: 85px 0 100px;

  background:
    linear-gradient(
      180deg,
      white,
      #f7f8fc
    );
}

.community-strip-head {
  max-width: 700px;

  margin:
    0 auto 42px;

  text-align: center;
}

.community-strip-head h2 {
  font-size:
    clamp(
      38px,
      5vw,
      56px
    );
}

.community-strip-head p {
  margin-top: 12px;

  color: var(--muted);

  line-height: 1.7;
}

.community-photo-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 18px;
}

.community-photo {
  margin: 0;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  border-radius: 22px;

  background: var(--navy-deep);

  box-shadow:
    0 22px 55px rgba(10, 16, 41, 0.13);
}

.community-photo-wide {
  min-height: 0;
}

.community-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.55s ease;
}

.community-photo:hover img {
  transform: scale(1.03);
}


/* =========================================================
   HOMEPAGE ABOUT
   ========================================================= */

.home-about {
  padding: 105px 0;

  background: white;
}

.home-about-stack {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 58px;
}


/* Video */

.about-video {
  width:
    min(
      100%,
      1120px
    );

  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-radius: 24px;

  background: #071020;

  box-shadow:
    0 28px 70px rgba(10, 16, 41, 0.16);
}

.about-video video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  background: #071020;
}


/* About text */

.about-copy-centered {
  width:
    min(
      100%,
      820px
    );

  margin: 0 auto;

  text-align: center;
}

.kicker {
  margin-bottom: 14px;

  color: var(--periwinkle);

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.05em;
}

.about-title {
  margin-bottom: 26px;

  font-size:
    clamp(
      38px,
      5vw,
      60px
    );

  line-height: 1.05;
}

.about-copy-centered p {
  max-width: 760px;

  margin:
    0 auto 20px;

  color: var(--muted);

  font-size: 17px;

  line-height: 1.85;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-top: 8px;

  color: var(--periwinkle);

  font-size: 14px;
  font-weight: 700;
}

.text-link span {
  transition: transform 0.2s ease;
}

.text-link:hover span {
  transform: translateX(3px);
}


/* =========================================================
   SHARED EDITORIAL LAYOUTS
   ========================================================= */

.page-photo-feature {
  padding: 72px 0;
  background: var(--paper-soft);
}

.page-photo-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 60px;
}

.page-photo-copy h2 {
  font-size: clamp(34px, 4vw, 50px);
}

.page-photo-frame {
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;

  border-radius: 24px;

  background: var(--navy-deep);
  box-shadow: var(--shadow);
}

.page-photo-frame img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.about-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 72px;
  align-items: start;
}

.about-long-copy h2 {
  margin-bottom: 26px;
  font-size: clamp(36px, 4vw, 52px);
}

.about-long-copy p {
  margin-bottom: 20px;

  color: var(--muted);

  font-size: 17px;
  line-height: 1.85;
}

.value-stack {
  display: grid;
  gap: 14px;
}

.value-card,
.info-card {
  padding: 26px;

  border: 1px solid var(--hairline);
  border-radius: 18px;

  background: white;
  box-shadow: 0 14px 35px rgba(15, 23, 55, 0.06);
}

.value-card > span,
.info-card-number {
  display: inline-block;
  margin-bottom: 12px;

  color: var(--periwinkle);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.value-card h3,
.info-card h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.value-card p,
.info-card p {
  color: var(--muted);
  line-height: 1.7;
}

.info-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.info-card {
  min-height: 100%;
}

.info-card .text-link {
  margin-top: 18px;
}

.experience-grid,
.partner-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
}

.experience-grid h2,
.partner-intro h2 {
  font-size: clamp(36px, 4vw, 52px);
}

.experience-copy p,
.partner-intro > p {
  margin-bottom: 20px;

  color: var(--muted);

  font-size: 17px;
  line-height: 1.8;
}

.experience-copy .hero-actions {
  justify-content: flex-start;
}

.partner-section {
  padding: 100px 0;
}

.partner-intro {
  margin-bottom: 48px;
}

.sponsor-card-grid {
  margin-bottom: 36px;
}

.sponsor-cta {
  padding: 36px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;

  border-radius: 22px;

  color: white;
  background:
    linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
}

.sponsor-cta h2 {
  color: white;
  font-size: clamp(28px, 3vw, 38px);
}

.sponsor-cta p {
  max-width: 700px;
  margin-top: 10px;

  color: #b8c1e8;
  line-height: 1.7;
}

.sponsor-cta .kicker {
  color: #aab3ff;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

section {
  padding: 100px 0;
}

section.tight {
  padding: 80px 0;
}

.soft-bg {
  background: var(--paper-soft);
}

.section-head {
  max-width: 640px;

  margin-bottom: 50px;
}

.section-head h2 {
  font-size:
    clamp(
      32px,
      4vw,
      48px
    );
}

.section-head p {
  margin-top: 16px;

  color: var(--muted);

  line-height: 1.75;
}


/* =========================================================
   INTERIOR PAGE HERO
   ========================================================= */

.navy-band {
  position: relative;

  isolation: isolate;

  background: var(--navy-deep);

  color: white;
}

.navy-band .stars {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:

    radial-gradient(
      1px 1px at 20% 30%,
      rgba(255,255,255,.6),
      transparent
    ),

    radial-gradient(
      1px 1px at 70% 65%,
      rgba(255,255,255,.4),
      transparent
    ),

    radial-gradient(
      1px 1px at 45% 15%,
      rgba(255,255,255,.5),
      transparent
    );

  background-size:
    450px 450px;

  opacity: 0.55;
}

.navy-band > * {
  position: relative;

  z-index: 1;
}

.navy-band h1,
.navy-band h2,
.navy-band h3 {
  color: white;
}

.page-hero {
  padding:
    170px 0 80px;
}

.page-hero h1 {
  font-size:
    clamp(
      42px,
      6vw,
      65px
    );
}

.page-hero p {
  max-width: 600px;

  margin-top: 18px;

  color: var(--muted-on-navy);

  line-height: 1.75;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    14px 30px;

  border:
    1px solid transparent;

  border-radius:
    100px;

  font-family:
    'Nunito',
    sans-serif;

  font-size: 14px;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.btn:hover {
  transform:
    translateY(-2px);
}

.btn-solid {
  color: white;

  background:
    linear-gradient(
      135deg,
      var(--indigo-light),
      var(--navy-mid)
    );
}

.btn-solid:hover {
  box-shadow:
    0 14px 30px rgba(74, 92, 201, 0.35);
}

.btn-ghost {
  color: var(--navy-deep);

  border-color: var(--hairline);
}

.navy-band .btn-ghost {
  color: white;

  border-color:
    rgba(255, 255, 255, 0.24);
}

.hero-actions {
  display: flex;
  justify-content: center;

  gap: 16px;

  margin-top: 34px;

  flex-wrap: wrap;
}


/* =========================================================
   WORKSHOP VIDEO
   ========================================================= */

.workshop-video {
  width:
    min(
      100%,
      900px
    );

  overflow: hidden;

  border-radius: 22px;

  background: var(--navy-deep);

  box-shadow: var(--shadow);
}

.workshop-video video {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
   TEAM
   ========================================================= */

.team-roster {
  padding:
    90px 0 110px;
}

.committee-list {
  display: flex;
  flex-direction: column;

  gap: 70px;
}

.committee {
  display: grid;

  grid-template-columns:
    minmax(210px, 0.7fr)
    minmax(0, 2fr);

  gap: 60px;
}

.committee-heading {
  display: flex;
  align-items: center;

  gap: 14px;
}

.committee-number {
  color: var(--periwinkle);

  font-size: 11px;

  font-weight: 600;
}

.team-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 16px;
}

.team-card {
  min-height: 92px;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 17px;

  border:
    1px solid var(--hairline);

  border-radius: 12px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.team-card:hover {
  transform:
    translateY(-3px);

  box-shadow: var(--shadow);
}

.avatar {
  width: 54px;
  height: 54px;

  flex:
    0 0 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: white;

  background:
    linear-gradient(
      150deg,
      var(--indigo-light),
      var(--navy)
    );

  font-family:
    'Fraunces',
    serif;

  font-size: 20px;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.timeline {
  margin-left: 8px;

  border-left:
    1px solid var(--hairline);
}

.tl-item {
  position: relative;

  padding:
    0 0 50px 40px;
}

.tl-item::before {
  content: "";

  position: absolute;

  top: 4px;
  left: -6px;

  width: 11px;
  height: 11px;

  border:
    2px solid var(--periwinkle);

  border-radius: 50%;

  background: white;
}

.tl-year {
  margin-bottom: 8px;

  color: var(--periwinkle);

  font-weight: 600;
}

.tl-item h3 {
  margin-bottom: 8px;

  font-size: 24px;
}

.tl-item p {
  max-width: 600px;

  color: var(--muted);

  line-height: 1.75;
}


/* =========================================================
   PROGRESS CARDS
   ========================================================= */

.progress-section {
  flex: 1;

  padding:
    90px 0 110px;
}

.progress-card {
  max-width: 760px;

  margin: auto;

  padding:
    64px 48px;

  text-align: center;

  border:
    1px solid var(--hairline);

  border-radius: 20px;

  background:
    linear-gradient(
      white,
      var(--paper-soft)
    );

  box-shadow: var(--shadow);
}

.progress-card h2 {
  margin-bottom: 18px;

  font-size:
    clamp(
      38px,
      5vw,
      58px
    );
}

.progress-card p {
  max-width: 560px;

  margin: auto;

  color: var(--muted);

  line-height: 1.75;
}

.progress-pill {
  display: inline-flex;

  margin-top: 28px;

  padding:
    9px 16px;

  border:
    1px solid var(--hairline);

  border-radius:
    100px;

  color: var(--navy-mid);

  font-size: 12px;

  font-weight: 600;
}


/* =========================================================
   JOIN SOCIALS
   ========================================================= */

.join-socials {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);
}

.join-copy {
  max-width: 720px;
  margin-bottom: 46px;
}

.join-copy h2 {
  font-size:
    clamp(
      34px,
      4vw,
      48px
    );
}

.join-copy p {
  margin-top: 16px;

  color: var(--muted);

  font-size: 17px;
  line-height: 1.75;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.social-row a {
  padding: 10px 18px;

  border: 1px solid var(--hairline);
  border-radius: 100px;

  color: var(--navy-deep);
  background: rgba(255,255,255,0.75);

  font-size: 14px;
  font-weight: 700;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.social-row a:hover {
  transform: translateY(-2px);
  border-color: var(--periwinkle);
  color: var(--periwinkle);
}

.social-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.social-preview-card {
  overflow: hidden;

  border: 1px solid var(--hairline);
  border-radius: 18px;

  background: white;
  box-shadow: var(--shadow);
}

.social-window-bar {
  min-height: 54px;
  padding: 0 18px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;

  border-bottom: 1px solid var(--hairline);
  background: #fbfbfe;
}

.window-dots {
  display: flex;
  gap: 6px;
}

.window-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--periwinkle-light);
}

.window-dots span:nth-child(2) {
  background: #b8baf0;
}

.window-dots span:nth-child(3) {
  background: var(--periwinkle);
}

.social-window-title {
  color: var(--navy-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.social-window-bar > a {
  justify-self: end;

  color: var(--periwinkle);
  font-size: 12px;
  font-weight: 700;
}

.social-preview-body {
  height: 500px;
  overflow: auto;

  display: grid;
  place-items: start center;

  padding: 20px;
  background: var(--paper-soft);
}

.social-preview-body blockquote {
  width: 100%;
  margin: 0 !important;
}

.social-preview-body blockquote > a,
.social-preview-body blockquote section > a {
  min-height: 210px;
  padding: 32px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid var(--hairline);
  border-radius: 14px;

  color: var(--navy-deep);
  background: white;

  text-align: center;
}

.social-preview-body blockquote strong {
  font-family: 'Fraunces', serif;
  font-size: 25px;
}

.social-preview-body blockquote span {
  color: var(--muted);
  font-size: 14px;
}

.instagram-media {
  min-width: 0 !important;
  max-width: 100% !important;
}

.tiktok-embed {
  min-width: 0 !important;
  max-width: 100% !important;
}


/* =========================================================
   CTA
   ========================================================= */

.cta-band {
  text-align: center;
}

.cta-band h2 {
  font-size:
    clamp(
      36px,
      5vw,
      52px
    );
}

.cta-band p {
  max-width: 520px;

  margin:
    18px auto 0;

  color: var(--muted-on-navy);

  line-height: 1.75;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  margin-top: auto;

  padding:
    45px 0;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;
}

.foot-links {
  display: flex;

  gap: 24px;

  color: var(--muted-on-navy);

  font-size: 13px;

  flex-wrap: wrap;
}

.foot-links a:hover {
  color: white;
}

.copyline {
  color: var(--muted-on-navy);

  font-size: 12px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .page-photo-feature-grid,
  .about-story-grid,
  .experience-grid,
  .partner-intro {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .info-card-grid {
    grid-template-columns: 1fr;
  }

  .sponsor-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .community-photo-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .community-photo-wide {
    grid-column: auto;
  }

  .committee {
    grid-template-columns: 1fr;
  }

  .social-preview-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 760px) {

  .hero-reference {
    height: 760px;

    min-height: 760px;

    aspect-ratio: auto;
  }

  .hero-reference-image {
    object-position:
      center center;
  }

  .hero-content {
    width: calc(100% - 32px);
    top: 5%;
    bottom: 9%;
    padding: 30px 22px;
    border-radius: 24px;
  }

  .hero-summary {
    font-size: 14px;
  }

  .hero-content .hero-actions {
    gap: 10px;
    margin-top: 24px;
  }

  .hero-content .btn {
    width: 100%;
  }

  .home-about {
    padding:
      75px 0;
  }

  .home-about-stack {
    gap: 40px;
  }

  .about-video {
    border-radius: 16px;
  }

  .team-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (max-width: 600px) {

  section {
    padding:
      65px 0;
  }

  .community-photo-grid {
    grid-template-columns: 1fr;
  }

  .community-photo-wide {
    grid-column: auto;
  }

  .sponsor-cta {
    padding: 28px 24px;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .footer-row {
    flex-direction: column;

    text-align: center;
  }

  .foot-links {
    justify-content: center;
  }

}


/* Respect reduced-motion settings */

@media (prefers-reduced-motion: reduce) {

  .hero-starfield,
  .shooting-star,
  .mars-glow,
  .community-photo img {
    animation: none !important;

    transition: none !important;
  }

}


/* =========================================================
   UPDATED BRAND ASSETS
   ========================================================= */

.brand-mark {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 10px;
}

.footer-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 12px;
}

.hero-logo {
  width: clamp(130px, 16vw, 190px);
  height: auto;
  margin: 0 auto 14px;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}


/* =========================================================
   SPONSORSHIP PACKET VIEWER
   ========================================================= */

.sponsors-page {
  background: var(--navy-deep);
}

.sponsor-contact-section {
  padding: 80px 0;
  background: white;
}

.packet-section {
  min-height: 100vh;
  padding: 128px 24px 36px;
  color: white;
  background:
    radial-gradient(circle at 20% 10%, rgba(74, 92, 201, 0.2), transparent 28%),
    linear-gradient(180deg, #071020 0%, #0d1736 100%);
}

.packet-heading {
  width: min(100%, 1500px);
  margin: 0 auto 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.packet-heading h1 {
  color: white;
  font-size: clamp(38px, 5vw, 64px);
}

.packet-heading .kicker {
  color: #aab3ff;
}

.packet-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.packet-heading-actions .btn-ghost {
  color: white;
  border-color: rgba(255, 255, 255, 0.35);
}

.packet-viewer {
  width: min(100%, 1500px);
  margin: 0 auto;
}

.packet-stage {
  position: relative;
  height: calc(100vh - 270px);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  background:
    radial-gradient(circle at center, rgba(38, 49, 122, 0.35), transparent 55%),
    #030713;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
}

.packet-slide {
  position: absolute;
  inset: 0;
  margin: 0;
}

.packet-slide[hidden] {
  display: none;
}

.packet-slide img {
  position: absolute;
  inset: 22px 96px;
  width: calc(100% - 192px);
  height: calc(100% - 44px);
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.42));
}

.packet-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  color: white;
  background: rgba(7, 16, 32, 0.78);
  font: inherit;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease, transform 0.2s ease;
}

.packet-arrow:hover,
.packet-arrow:focus-visible {
  background: var(--indigo-light);
  transform: translateY(-50%) scale(1.05);
}

.packet-arrow span {
  margin-top: -4px;
  font-size: 46px;
  line-height: 1;
}

.packet-arrow-prev {
  left: 24px;
}

.packet-arrow-next {
  right: 24px;
}

.packet-controls {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #cbd2f1;
}

.packet-status {
  font-size: 14px;
  font-weight: 700;
}

.packet-dots {
  display: flex;
  gap: 9px;
}

.packet-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: width 0.2s ease, border-radius 0.2s ease, background 0.2s ease;
}

.packet-dots button.is-active {
  width: 28px;
  border-radius: 100px;
  background: #aab3ff;
}

@media (max-width: 760px) {
  .brand-mark {
    width: 50px;
    height: 50px;
  }

  .packet-section {
    padding: 112px 14px 24px;
  }

  .packet-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 18px;
  }

  .packet-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .packet-heading-actions .btn {
    flex: 1;
    padding-inline: 18px;
  }

  .packet-stage {
    height: 70svh;
    min-height: 520px;
    border-radius: 18px;
  }

  .packet-slide img {
    inset: 14px 48px;
    width: calc(100% - 96px);
    height: calc(100% - 28px);
  }

  .packet-arrow {
    width: 44px;
    height: 44px;
  }

  .packet-arrow span {
    font-size: 34px;
  }

  .packet-arrow-prev {
    left: 6px;
  }

  .packet-arrow-next {
    right: 6px;
  }
}