/* =========================================================
   Philanthropic Playlist Site Styles
   ---------------------------------------------------------
   Sections:
   1. Imports, Variables, Reset
   2. Base Page Background
   3. React Blob Background
   4. Page Transition Curtain
   5. Main Site Layout
   6. Sidebar Navigation
   7. Main Content Typography
   8. Feature Card
   9. Bottom Contact Bar
   10. Homepage Mission Rotator
   11. Homepage Action Buttons
   12. About Page Layout
   13. About Connector Path
   14. Text Reveal Utility
   15. Animations
   16. Responsive Styles
   17. Reduced Motion
   18. About Floating Boxes
   19. Floating Letters
   20. Home Page Floating Music Notes
   21. Footer: Icon Links + Logo Lockup
   22. Recent Performance Feature Card
   23. Center About Page Title
   24. Sidebar Logo Image
   25. Page Enter/Exit Animation
   26. Team Page: No Connector Line
   27. About Page: Current Viewing Highlight
   28. Team Page Cards
   29. Events Page
   30. Active Box: Playful Multi-Layer Outline
   31. FINAL MOBILE POLISH
========================================================= */


/* =========================================================
   1. Imports, Variables, Reset
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Pacifico&family=Space+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Palette+Mosaic&family=Nunito:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

@font-face {
  font-family: "Variex";
  src: url("../fonts/variex.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

:root {
  --tan: #f3e8e4;
  --tan-light: #fff7f2;

  --blue: #246783;
  --blue-dark: #17475f;
  --blue-soft: #a8d8ee;

  --peach: #f8bf72;
  --pink: #f4cbd0;
  --white: #fffaf6;
  --muted: #5d7f8f;

  --line: rgba(36, 103, 131, 0.22);
  --soft-line: rgba(36, 103, 131, 0.13);
  --card-bg: rgba(255, 250, 246, 0.62);

  --font-title: 'Palette Mosaic', system-ui, sans-serif;
  --font-body: 'Nunito', Arial, sans-serif;
  --font-mono: 'Space Mono', monospace;
}

@font-face {
  font-family: "Variex";
  src: url("../fonts/variex.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   2. Base Page Background
========================================================= */

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--blue);
  background:
    radial-gradient(circle at 14% 78%, rgba(248, 191, 114, 0.35), transparent 18%),
    radial-gradient(circle at 88% 18%, rgba(248, 191, 114, 0.35), transparent 14%),
    radial-gradient(circle at 8% 46%, rgba(244, 203, 208, 0.45), transparent 14%),
    radial-gradient(circle at 92% 60%, rgba(244, 203, 208, 0.45), transparent 12%),
    var(--tan);
}

/* Soft decorative arcs behind the main site frame */
html::before,
html::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0.38;
  border: 4px solid var(--blue);
  border-left: 0;
  border-bottom: 0;
  border-radius: 50%;
}

html::before {
  width: 420px;
  height: 420px;
  top: -170px;
  right: -110px;
  transform: rotate(24deg);
}

html::after {
  width: 380px;
  height: 380px;
  left: -190px;
  bottom: -100px;
  transform: rotate(-20deg);
}


/* =========================================================
   3. React Blob Background
   ---------------------------------------------------------
   These styles support assets/js/blob-background.js.
========================================================= */

#blob-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.react-blob-layer {
  position: absolute;
  inset: 0;
}

.react-blob {
  position: absolute;
  opacity: 0.72;
  filter: blur(0.5px);
  will-change: transform, border-radius;
  transition: border-radius 0.25s ease;
}


/* =========================================================
   4. Page Transition Curtain
   ---------------------------------------------------------
   The .is-transitioning class is added by transitions.js.
========================================================= */

.page-stage {
  animation: pageEnter 0.75s cubic-bezier(.76, 0, .24, 1) both;
  transition:
    opacity 0.75s cubic-bezier(.76, 0, .24, 1),
    transform 0.75s cubic-bezier(.76, 0, .24, 1);
}

.transition-curtain {
  opacity: 0;
  transform: none;
  background: transparent;
  transition: none;
}

body.is-transitioning .transition-curtain {
  opacity: 0;
  transform: none;
}

body.is-transitioning .page-stage {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
}

/* =========================================================
   5. Main Site Layout
========================================================= */

.site-frame {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 4rem);
  margin: 2rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 210px 1fr 360px;
  grid-template-rows: 1fr auto;
  gap: 2rem;
  overflow: hidden;
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  border: 2px solid rgba(36, 103, 131, 0.15);
  border-radius: 34px;
  box-shadow: 0 22px 70px rgba(36, 103, 131, 0.12);
}

/* Used on pages with hide_feature: true */
.site-frame.no-feature {
  grid-template-columns: 280px minmax(0, 1fr);
}

.site-frame.no-feature .main-content {
  width: 100%;
  max-width: 1450px;
  align-self: start;
}



/* =========================================================
   6. Sidebar Navigation
========================================================= */

.sidebar {
  padding: 1rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin-bottom: 4.5rem;
  color: var(--white);
  background: var(--blue);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 900;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(36, 103, 131, 0.18);
}

.sidebar-label,
.feature-label {
  margin-bottom: 1.6rem;
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sidebar-nav a {
  width: fit-content;
  padding: 0.65rem 1.05rem;
  color: var(--blue);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1.28rem;
  font-weight: 800;
  border-radius: 999px;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.sidebar-nav a:hover {
  color: var(--white);
  background: var(--blue);
  transform: translateX(6px);
}

/* =========================================================
   7. Main Content Typography
========================================================= */

.main-content {
  align-self: center;
  max-width: 870px;
}

.main-content h1 {
  margin: 0 0 1.5rem;
  color: var(--blue);
  font-family: "Variex", var(--font-title), cursive;
  font-size: clamp(4.4rem, 9vw, 9rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.02em;
}

/* Smaller page title on no-feature subpages */
.site-frame.no-feature .main-content h1 {
  margin-top: 2rem;
  margin-bottom: 3rem;
  font-size: clamp(4rem, 8vw, 7.5rem);
  line-height: 0.88;
}

.main-content strong {
  display: block;
  margin-bottom: 2rem;
  color: var(--blue-dark);
  font-family: var(--font-body);
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.05;
}

.main-content h2 {
  margin: 2rem 0 0.75rem;
  color: var(--blue-dark);
  font-family: var(--font-body);
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
}

.main-content p {
  max-width: 760px;
  color: var(--blue-dark);
  font-family: var(--font-body);
  font-size: 1.13rem;
  font-weight: 600;
  line-height: 1.55;
}

.main-content a {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.85rem 1.25rem;
  color: var(--white);
  background: var(--blue);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 900;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(36, 103, 131, 0.16);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.main-content a:hover {
  color: var(--blue-dark);
  background: var(--peach);
  transform: translateY(-3px);
}


/* =========================================================
   8. Feature Card
   ---------------------------------------------------------
   Hidden on pages where the layout uses:
   {% unless page.hide_feature %}
========================================================= */

.feature-panel {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 22rem;
}

.feature-card {
  position: relative;
  width: 100%;
  min-height: 420px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 16%, rgba(248, 191, 114, 0.8), transparent 18%),
    radial-gradient(circle at 18% 20%, rgba(168, 216, 238, 0.9), transparent 25%),
    radial-gradient(circle at 88% 82%, rgba(244, 203, 208, 0.85), transparent 22%),
    var(--tan-light);
  border: 2px solid var(--soft-line);
  border-radius: 28px;
  box-shadow: 0 14px 40px rgba(36, 103, 131, 0.11);
}

.feature-card::before,
.feature-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.feature-card::before {
  width: 160px;
  height: 120px;
  left: -24px;
  top: -18px;
  background: var(--blue);
  border-radius: 61% 39% 65% 35% / 58% 43% 57% 42%;
  opacity: 0.95;
  box-shadow:
    -24px 18px 0 -14px rgba(36, 103, 131, 0.95),
    -8px 54px 0 -20px rgba(36, 103, 131, 0.95),
    18px 88px 0 -26px rgba(36, 103, 131, 0.95);
  animation:
    blobMorphMini 10s ease-in-out infinite,
    blobWobbleMini 8s ease-in-out infinite alternate;
}

.feature-card::after {
  width: 200px;
  height: 200px;
  right: -70px;
  bottom: -55px;
  border: 8px solid rgba(36, 103, 131, 0.34);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-18deg);
}

.feature-card > * {
  position: relative;
  z-index: 1;
}

.feature-card h2 {
  margin: 0 0 1rem;
  color: var(--blue);
  font-family: var(--font-body);
  font-size: 2.05rem;
  font-weight: 900;
  line-height: 1;
}

.feature-card p {
  color: var(--blue-dark);
  font-weight: 700;
  line-height: 1.5;
}


/* =========================================================
   9. Bottom Contact Bar
========================================================= */

.bottom-bar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border-top: 2px solid var(--soft-line);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.contact-links a {
  padding: 0.45rem 0.7rem;
  color: var(--blue);
  background: rgba(168, 216, 238, 0.42);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.contact-links a:hover {
  color: var(--white);
  background: var(--blue);
  transform: translateY(-2px);
}


/* =========================================================
   10. Homepage Mission Rotator
   ---------------------------------------------------------
   Supports the mission-line rotation in scroll.js.
========================================================= */

.mission-rotator-section {
  position: relative;
  max-width: 980px;
  min-height: 240px;
  margin: 5rem 0 2.5rem;
  padding: 1.75rem 2rem;
  overflow: hidden;
  background: rgba(255, 250, 246, 0.58);
  border: 2px solid var(--soft-line);
  border-radius: 28px;
  box-shadow: 0 12px 32px rgba(36, 103, 131, 0.08);
}

.mission-label {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mission-rotator {
  position: relative;
  z-index: 1;
  min-height: 145px;
}

.mission-line {
  position: absolute;
  inset: 0 auto auto 0;
  max-width: 880px;
  visibility: hidden;
  color: var(--blue-dark);
  font-family: var(--font-body);
  font-size: clamp(1.55rem, 3vw, 3rem);
  font-weight: 900;
  line-height: 1.12;
}


/* =========================================================
   11. Homepage Action Buttons
========================================================= */

.home-actions {
  max-width: 980px;          /* match mission box width */
  margin: 2rem auto 0;       /* center the whole button row */
  display: flex;
  justify-content: center;   /* center buttons inside the row */
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.home-actions a {
  margin-top: 0;
}


/* =========================================================
   12. About Page Layout
   ---------------------------------------------------------
   Use on about.md:
   <section class="about-flow">
     <div class="about-block align-left">...</div>
     <div class="about-block align-right">...</div>
   </section>
========================================================= */

.about-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  margin-top: 2rem;
  padding-bottom: 5rem;
}

.about-block {
  position: relative;
  z-index: 2;
  width: min(1050px, 100%);
  padding: 2.25rem 2.75rem;
  background: var(--card-bg);
  border: 2px solid rgba(36, 103, 131, 0.14);
  border-radius: 30px;
  box-shadow: 0 14px 36px rgba(36, 103, 131, 0.08);
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    background 0.45s ease;
}

.about-block.align-left {
  align-self: flex-start;
}

.about-block.align-right {
  align-self: flex-end;
}

.about-kicker {
  margin: 0 0 0.9rem;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-block h2 {
  margin: 0 0 1rem;
  color: var(--blue-dark);
  font-size: clamp(1.8rem, 3.1vw, 3rem);
  line-height: 1.05;
}

.about-block p {
  color: var(--blue-dark);
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.6;
}

.about-block.is-connected {
  background: rgba(255, 250, 246, 0.82);
  box-shadow: 0 20px 52px rgba(36, 103, 131, 0.16);
  transform: translateY(-6px);
}


/* =========================================================
   13. About Connector Path
   ---------------------------------------------------------
   The SVG path is generated by scroll.js.
========================================================= */

.about-connector-svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.about-connector-path {
  fill: none;
  stroke: rgba(36, 103, 131, 0.22);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 16;
}

.about-connector-dot {
  fill: var(--blue);
  opacity: 0.22;
}


/* =========================================================
   14. Text Reveal Utility
   ---------------------------------------------------------
   Used by SplitType / GSAP reveal animations.
========================================================= */

.line-wrapper {
  overflow: hidden;
}


/* =========================================================
   15. Animations
========================================================= */

@keyframes blobMorphMini {
  0%, 100% {
    border-radius: 61% 39% 65% 35% / 58% 43% 57% 42%;
  }

  50% {
    border-radius: 42% 58% 44% 56% / 36% 64% 36% 64%;
  }
}

@keyframes blobWobbleMini {
  0% {
    transform: rotate(-8deg) translateY(0);
  }

  100% {
    transform: rotate(4deg) translateY(8px);
  }
}


/* =========================================================
   16. Responsive Styles
========================================================= */

@media (max-width: 1000px) {
  .site-frame,
  .site-frame.no-feature {
    grid-template-columns: 1fr;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .brand {
    margin-bottom: 2rem;
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .feature-panel {
    display: none;
  }

  .bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 900px) {
  .about-connector-svg {
    display: none;
  }

  .about-block,
  .about-block.align-left,
  .about-block.align-right {
    align-self: stretch;
    width: 100%;
  }

  .about-block.is-connected {
    transform: none;
  }

  .about-flow {
    gap: 2rem;
  }
}

@media (max-width: 650px) {
  .site-frame {
    gap: 1.5rem;
    padding: 1rem;
  }

  .main-content h1 {
    font-size: clamp(3.2rem, 18vw, 5rem);
  }

  .site-frame.no-feature .main-content h1 {
    font-size: clamp(3.2rem, 16vw, 5rem);
  }

  .main-content strong {
    font-size: clamp(1.45rem, 9vw, 2.4rem);
  }

  .main-content h2 {
    font-size: 1.6rem;
  }

  .mission-rotator-section {
    min-height: 210px;
    margin-top: 3rem;
    padding: 1.4rem;
  }

  .mission-line {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .about-block {
    padding: 1.5rem;
  }

  .contact-links {
    gap: 0.7rem;
  }
}


/* =========================================================
   17. Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
  18. About Cards: Continuous Floating Motion
========================================================= */

.about-block {
  animation: aboutCardFloat 7s ease-in-out infinite;
  will-change: transform;
}

/* Offset timing so all cards float together, but not in sync */
.about-block:nth-of-type(1) {
  animation-delay: 0s;
}

.about-block:nth-of-type(2) {
  animation-delay: -1.4s;
}

.about-block:nth-of-type(3) {
  animation-delay: -2.8s;
}

.about-block:nth-of-type(4) {
  animation-delay: -4.2s;
}

.about-block:nth-of-type(5) {
  animation-delay: -5.6s;
}

/* Keep the highlight effect, but do NOT stop the float animation */
.about-block.is-connected {
  background: rgba(255, 250, 246, 0.84);
  box-shadow: 0 22px 56px rgba(36, 103, 131, 0.16);
}

/* Subtle universal floating movement */
@keyframes aboutCardFloat {
  0%, 100% {
    transform: translateY(0px);
  }

  25% {
    transform: translateY(-4px);
  }

  50% {
    transform: translateY(-8px);
  }

  75% {
    transform: translateY(-3px);
  }
}

/* =========================================================
  19. Floating Colored H1 Letters
========================================================= */

.floating-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.04em;
}

.floating-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.18em;
  row-gap: 0;
}

.floating-word {
  display: inline-flex;
  white-space: nowrap;
}

.floating-letter {
  display: inline-block;
  color: var(--letter-color);
  animation: titleLetterFloat 6s ease-in-out infinite;
  animation-delay: var(--float-delay);
  transform-origin: center;
  will-change: transform;
  -webkit-text-stroke: 0.8px var(--letter-color);
  text-shadow:
    0.6px 0 var(--letter-color),
    -0.6px 0 var(--letter-color),
    0 0.6px var(--letter-color),
    0 -0.6px var(--letter-color);
}

.floating-letter:hover {
  color: var(--peach);
  transform: translateY(-10px) rotate(4deg) scale(1.06);
}

@keyframes titleLetterFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(calc(var(--float-distance) * -1)) rotate(var(--rotate-amount));
  }
}

/* =========================================================
  OVERRIDE: Floating H1: Chunky Playful Font Override
========================================================= */

.main-content h1,
.floating-title,
.floating-title-line,
.floating-word,
.floating-letter {
  font-family: "Palette Mosaic", system-ui, sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.035em;
}

.main-content h1 {
  font-size: clamp(3.7rem, 7.8vw, 8rem);
  line-height: 0.95;
}

/* =========================================================
  20. Home Page Floating Music Notes
========================================================= */

.home-title-wrap {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
}

.music-notes {
  position: absolute;
  right: 100px;
  top: 88%;
  width: 150px;
  height: 120px;
  pointer-events: none;
  transform: translateY(-50%);
}

.music-note {
  position: absolute;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 900;
  line-height: 1;
  opacity: 0.75;
  will-change: transform;
  animation: musicNoteFloat 5.5s ease-in-out infinite;
}

/* Keep them clustered instead of scattered */
.note-1 {
  top: 8px;
  left: 18px;
  font-size: 1.9rem;
  color: var(--blue);
  animation-delay: 0s;
}

.note-2 {
  top: 44px;
  left: 64px;
  font-size: 2.25rem;
  color: var(--peach);
  animation-delay: -1.3s;
}

.note-3 {
  top: 76px;
  left: 26px;
  font-size: 1.55rem;
  color: var(--blue-soft);
  animation-delay: -2.2s;
}

.note-4 {
  top: 0;
  left: 98px;
  font-size: 1.65rem;
  color: var(--pink);
  animation-delay: -3.1s;
}

@keyframes musicNoteFloat {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }

  25% {
    transform: translateY(-5px) translateX(2px) rotate(-4deg);
  }

  50% {
    transform: translateY(-10px) translateX(-2px) rotate(3deg);
  }

  75% {
    transform: translateY(-4px) translateX(1px) rotate(-2deg);
  }
}

@media (max-width: 1100px) {
  .music-notes {
    right: -90px;
    top: 52%;
    transform: translateY(-50%) scale(0.85);
  }
}

@media (max-width: 800px) {
  .music-notes {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin-top: 0.5rem;
    margin-left: 1rem;
  }
}

/* =========================================================
  21. Footer: Icon Links + Logo Lockup
========================================================= */

.bottom-bar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 2px solid var(--soft-line);
}

.icon-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.icon-link {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: rgba(168, 216, 238, 0.42);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(36, 103, 131, 0.08);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.icon-link:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
}

.footer-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.footer-brand-lockup {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.footer-school-logo {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-divider-x {
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.footer-rso-logo {
  height: 34px;
  width: auto;
  display: block;
  object-fit: contain;
  max-width: 240px;
}

/* Optional if your logo file is tall instead of wide */
.footer-rso-logo.tall-logo {
  height: 44px;
}

@media (max-width: 900px) {
  .bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-brand-lockup {
    justify-content: flex-start;
  }
}

.footer-icon-img {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}

/* =========================================================
  OVERRIDE: Footer Size Increase
========================================================= */

.bottom-bar {
  min-height: 92px;
  padding-top: 1.35rem;
  padding-bottom: 0.35rem;
  align-items: center;
}

.icon-links {
  gap: 1.2rem;
}

.icon-link {
  width: 68px;
  height: 68px;
}

.footer-icon {
  width: 30px;
  height: 30px;
}

.footer-icon-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.footer-brand-lockup {
  gap: 1rem;
}

.footer-school-logo {
  height: 44px;
  width: auto;
}

.footer-divider-x {
  font-size: 1.45rem;
}

.footer-rso-logo {
  height: 48px;
  width: auto;
  max-width: 300px;
}

/* =========================================================
  22. Recent Performance Feature Card
========================================================= */

.performance-card {
  min-height: auto;
  padding: 1rem;
  justify-content: flex-start;
  gap: 1.25rem;
  background: rgba(255, 250, 246, 0.72);
}

.performance-card::before,
.performance-card::after {
  display: none;
}

.performance-image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
  border: 2px solid rgba(36, 103, 131, 0.13);
  background: var(--tan-light);
}

.performance-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.performance-card-content {
  padding: 0.5rem 0.75rem 1rem;
}

.performance-card-content .feature-label {
  margin-bottom: 0.75rem;
}

.performance-card-content h2 {
  margin: 0 0 1rem;
  color: var(--blue);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1;
}

.performance-card-content p {
  color: var(--blue-dark);
  font-weight: 700;
  line-height: 1.5;
}

/* =========================================================
  23. Center About Page Title
========================================================= */

.site-frame.no-feature .main-content h1 {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.site-frame.no-feature .floating-title {
  align-items: center;
}

.site-frame.no-feature .floating-title-line {
  justify-content: center;
  width: 100%;
}

/* =========================================================
  24. Sidebar Logo Image
========================================================= */

.brand-image-link {
  padding: 0.6rem;
  overflow: hidden;
  background: var(--blue);
}

.brand-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* =========================================================
  25. Page Enter/Exit Animation
========================================================= */

.page-stage {
  animation: pageEnter 0.75s cubic-bezier(.76, 0, .24, 1) both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body.is-transitioning .page-stage {
  transform: scale(1.025) translateY(26px);
  opacity: 0;
}

body.is-transitioning .transition-curtain {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
  OVERRIDE: Clean Matching Fade Transition
========================================================= */

.page-stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  animation: pageEnter 0.85s cubic-bezier(.76, 0, .24, 1) both;
  transition: opacity 0.85s cubic-bezier(.76, 0, .24, 1);
}

@keyframes pageEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.transition-curtain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transform: none;
  background: var(--tan);
  transition: opacity 0.85s cubic-bezier(.76, 0, .24, 1);
}

body.is-transitioning .page-stage {
  opacity: 0;
  transform: none;
}

body.is-transitioning .transition-curtain {
  opacity: 1;
  transform: none;
}

/* =========================================================
  26. Team Page: No Connector Line
========================================================= */

.team-flow > .about-connector-svg {
  display: none;
}

/* =========================================================
  27. About Page: Current Viewing Highlight
========================================================= */

.about-block {
  transition:
    background 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    opacity 0.45s ease;
}

.about-flow .about-block {
  opacity: 0.88;
}

.about-flow .about-block.is-viewing {
  opacity: 1;
  background: rgba(255, 250, 246, 0.92);
  border-color: rgba(36, 103, 131, 0.3);
  box-shadow: 0 24px 62px rgba(36, 103, 131, 0.18);
}

/* =========================================================
  28. Team Page Cards
========================================================= */

.team-flow > .about-connector-svg {
  display: none;
}

.team-card {
  width: min(1120px, 100%);
  padding: 2.75rem 3.25rem;
}

.team-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3rem;
  align-items: center;
}

.team-profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-card .about-kicker {
  margin-bottom: 0.9rem;
}

.team-card h2 {
  margin: 0 0 2rem;
}

.team-member-details {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--blue-dark);
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.65;
}

.team-member-details li {
  margin-bottom: 0.55rem;
}

.team-member-details strong {
  display: inline !important;
  margin: 0 !important;
  color: var(--blue);
  font-size: inherit !important;
  font-weight: 900;
  line-height: inherit;
}

.team-member-photo {
  width: 360px;
  height: 360px;
  display: block;
  object-fit: cover;
  border-radius: 32px;
  border: 2px solid rgba(36, 103, 131, 0.16);
  box-shadow: 0 16px 34px rgba(36, 103, 131, 0.13);
  background: var(--tan-light);
  justify-self: end;
}

@media (max-width: 850px) {
  .team-profile-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .team-member-photo {
    width: 100%;
    max-width: 320px;
    height: 320px;
    justify-self: center;
    order: -1;
  }

  .team-member-details,
  .team-member-details strong {
    font-size: 1rem !important;
  }
}

/* =========================================================
  OVERRIDE: Updated Home Page Lettering
========================================================= */

.home-title-wrap {
  position: relative;
  display: inline-block;
}

/* Floating angled "The" */
.home-title-the {
  position: absolute;
  top: -3rem;
  left: -2.8rem; /* adjust this until it sits above/right of the P */
  z-index: 5;
  pointer-events: none;

  font-family: 'Comforter Brush', cursive; /* or another accent font */
  font-size: clamp(2.2rem, 3.6vw, 4.1rem);
  line-height: 1;
  color: var(--peach);
  letter-spacing: 0.02em;

  transform: rotate(-45deg);
  transform-origin: center;
  opacity: 0.95;

  animation: float-the 4.8s ease-in-out infinite;
}

@keyframes float-the {
  0%, 100% {
    transform: rotate(-17deg) translateY(0px);
  }
  50% {
    transform: rotate(-17deg) translateY(-8px);
  }
}

/* =========================================================
  29. Events Page
========================================================= */

.events-flow > .about-connector-svg {
  display: none;
}

.calendar-block {
  width: min(1150px, 100%);
}

.calendar-wrap {
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  overflow: hidden;
  background: rgba(255, 250, 246, 0.78);
  border: 2px solid rgba(36, 103, 131, 0.13);
  border-radius: 26px;
  box-shadow: 0 12px 30px rgba(36, 103, 131, 0.08);
}

.calendar-wrap iframe {
  width: 100%;
  height: 650px;
  display: block;
  border-radius: 20px;
  background: var(--tan-light);
}

@media (max-width: 800px) {
  .calendar-wrap {
    padding: 0.5rem;
    border-radius: 20px;
  }

  .calendar-wrap iframe {
    height: 520px;
    border-radius: 16px;
  }
}

/* =========================================================
  30. Active Box: Playful Multi-Layer Outline
========================================================= */

.about-block {
  position: relative;
  isolation: isolate;
}

.about-block::before,
.about-block::after {
  content: "";
  position: absolute;
  inset: -10px;
  pointer-events: none;
  border-radius: 34px;
  opacity: 0;
  z-index: -1;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.about-block::before {
  border: 3px solid rgba(168, 216, 238, 0.7);
  transform: rotate(-1.2deg) scale(0.985);
}

.about-block::after {
  inset: -17px;
  border: 3px dashed rgba(248, 191, 114, 0.7);
  transform: rotate(1.4deg) scale(0.98);
}

.about-flow .about-block.is-viewing::before,
.about-flow .about-block.is-viewing::after {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* =========================================================
   Secret Treasurer Link
   ---------------------------------------------------------
   Looks exactly like the other role labels,
   but turns peach on hover.
========================================================= */

.about-kicker .secret-role-link {
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;

  display: inline !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;

  cursor: pointer;
  transition: color 0.2s ease;
}

.about-kicker .secret-role-link:hover {
  color: var(--peach) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* =========================================================
   Secret Snake Game Page
========================================================= */

.secret-game-flow > .about-connector-svg {
  display: none;
}

.secret-game-card {
  width: min(900px, 100%);
}

.snake-game-wrap {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

#snakeGame {
  width: min(420px, 100%);
  height: auto;
  display: block;
  background: var(--tan-light);
  border: 3px solid rgba(36, 103, 131, 0.2);
  border-radius: 26px;
  box-shadow: 0 16px 36px rgba(36, 103, 131, 0.12);
}

.snake-game-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.snake-score {
  margin: 0;
  color: var(--blue-dark);
  font-size: 1.1rem;
  font-weight: 900;
}

.snake-button {
  border: 0;
  padding: 0.75rem 1.1rem;
  color: var(--white);
  background: var(--blue);
  font-family: var(--font-body);
  font-weight: 900;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(36, 103, 131, 0.16);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.snake-button:hover {
  color: var(--blue-dark);
  background: var(--peach);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .snake-game-info {
    flex-direction: column;
  }
}

/* =========================================================
  31. FINAL MOBILE POLISH
   ---------------------------------------------------------
   Add this at the VERY bottom of style.css.
========================================================= */

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    background:
      radial-gradient(circle at 20% 12%, rgba(168, 216, 238, 0.32), transparent 24%),
      radial-gradient(circle at 86% 28%, rgba(248, 191, 114, 0.26), transparent 22%),
      radial-gradient(circle at 22% 82%, rgba(244, 203, 208, 0.34), transparent 24%),
      var(--tan);
  }

  html::before,
  html::after {
    opacity: 0.16;
    transform: scale(0.7);
  }

  .react-blob {
    opacity: 0.38;
  }

  /* Main frame becomes an intentional mobile card/page */
  .site-frame,
  .site-frame.no-feature {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    margin: 0;
    min-height: 100vh;
    padding: 1rem;
    gap: 1.5rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    overflow: hidden;
  }

  /* Header/nav */
  .sidebar {
    padding: 0.35rem 0 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .brand {
    width: 54px;
    height: 54px;
    margin-bottom: 0;
    flex: 0 0 auto;
  }

  .brand-image-link {
    padding: 0.45rem;
  }

  .sidebar-section {
    flex: 1;
    min-width: 0;
  }

  .sidebar-label {
    display: none;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .sidebar-nav a {
    min-height: 40px;
    padding: 0.45rem 0.68rem;
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    background: rgba(168, 216, 238, 0.32);
    transform: none;
  }

  .sidebar-nav a:hover {
    transform: translateY(-2px);
  }

  /* Main content */
  .main-content,
  .site-frame.no-feature .main-content {
    width: 100%;
    max-width: 100%;
    align-self: start;
  }

  .main-content h1,
  .site-frame.no-feature .main-content h1 {
    margin-top: 0.7rem;
    margin-bottom: 1.8rem;
    font-size: clamp(2.9rem, 14vw, 5rem);
    line-height: 0.95;
    overflow-wrap: normal;
  }

  .floating-title {
    align-items: flex-start;
  }

  .site-frame.no-feature .floating-title {
    align-items: center;
  }

  .floating-title-line {
    max-width: 100%;
  }

  .floating-word {
    white-space: nowrap;
  }

  /* Home title extras */
  .home-title-wrap {
    max-width: 100%;
  }

  .home-title-the {
    top: -1.8rem;
    left: -1rem;
    font-size: clamp(2rem, 8vw, 3.4rem);
  }

  .music-notes {
    position: relative;
    right: auto;
    top: auto;
    width: 105px;
    height: 72px;
    margin: -0.5rem 0 0.75rem 0.5rem;
    transform: none;
  }

  .note-1 {
    font-size: 1.2rem;
    top: 0;
    left: 0;
  }

  .note-2 {
    font-size: 1.55rem;
    top: 24px;
    left: 38px;
  }

  .note-3 {
    font-size: 1.1rem;
    top: 48px;
    left: 8px;
  }

  .note-4 {
    font-size: 1.25rem;
    top: 2px;
    left: 72px;
  }

  /* Home mission area */
  .mission-rotator-section {
    width: 100%;
    min-height: 175px;
    margin: 2rem 0 1.2rem;
    padding: 1.15rem;
    border-radius: 24px;
  }

  .mission-rotator {
    min-height: 100px;
  }

  .mission-line {
    max-width: 100%;
    font-size: clamp(1.35rem, 7.5vw, 2.15rem);
    line-height: 1.1;
  }

  .home-actions {
    width: 100%;
    max-width: 100%;
    margin: 1.4rem auto 0;
    gap: 0.65rem;
  }

  .home-actions a {
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Show the homepage feature card on mobile instead of hiding it */
  .feature-panel {
    display: flex;
    padding-top: 0;
    justify-content: center;
  }

  .feature-card,
  .performance-card {
    width: 100%;
    max-width: 460px;
    min-height: auto;
    margin: 0 auto;
  }

  .performance-image-wrap {
    aspect-ratio: 16 / 10;
  }

  /* Reusable content boxes */
  .about-flow {
    gap: 1.65rem;
    margin-top: 0.5rem;
    padding-bottom: 2rem;
  }

  .about-block,
  .about-block.align-left,
  .about-block.align-right {
    width: 100%;
    align-self: stretch;
    padding: 1.35rem;
    border-radius: 24px;
  }

  .about-block h2 {
    font-size: clamp(1.45rem, 8vw, 2.15rem);
    line-height: 1.08;
  }

  .about-block p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .about-kicker {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .about-connector-svg {
    display: none;
  }

  /* Your active outline is great, but shrink it so it does not clip on mobile */
  .about-block::before {
    inset: -6px;
    border-width: 2px;
    border-radius: 28px;
  }

  .about-block::after {
    inset: -10px;
    border-width: 2px;
    border-radius: 30px;
  }

  /* Team cards */
  .team-card {
    padding: 1.35rem;
  }

  .team-profile-layout {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  .team-member-photo {
    order: -1;
    width: 100%;
    max-width: 300px;
    height: 300px;
    justify-self: center;
    border-radius: 26px;
  }

  .team-card h2 {
    margin-bottom: 1.2rem;
  }

  .team-member-details {
    font-size: 1rem;
    line-height: 1.55;
    padding-left: 1.1rem;
  }

  .team-member-details strong {
    font-size: inherit !important;
  }

  /* Calendar */
  .calendar-block {
    width: 100%;
  }

  .calendar-wrap {
    margin-top: 1rem;
    padding: 0.4rem;
    border-radius: 20px;
  }

  .calendar-wrap iframe {
    height: 520px;
    border-radius: 16px;
  }

  /* Footer */
  .bottom-bar {
    min-height: auto;
    padding-top: 1.2rem;
    padding-bottom: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
  }

  .icon-links {
    justify-content: center;
    gap: 0.75rem;
  }

  .icon-link {
    width: 54px;
    height: 54px;
  }

  .footer-icon,
  .footer-icon-img {
    width: 27px;
    height: 27px;
  }

  .footer-brand-lockup {
    justify-content: center;
    gap: 0.65rem;
  }

  .footer-school-logo {
    height: 34px;
  }

  .footer-divider-x {
    font-size: 1.05rem;
  }

  .footer-rso-logo {
    height: 36px;
    max-width: 210px;
  }

  /* Snake page */
  #snakeGame {
    width: min(340px, 100%);
  }
}

@media (max-width: 520px) {
  .site-frame,
  .site-frame.no-feature {
    padding: 0.8rem;
  }

  .sidebar {
    align-items: flex-start;
  }

  .brand {
    width: 48px;
    height: 48px;
  }

  .sidebar-nav {
    justify-content: flex-start;
    gap: 0.35rem;
  }

  .sidebar-nav a {
    font-size: 0.82rem;
    padding: 0.38rem 0.54rem;
  }

  .main-content h1,
  .site-frame.no-feature .main-content h1 {
    font-size: clamp(2.55rem, 16vw, 4.35rem);
  }

  .mission-rotator-section {
    min-height: 165px;
  }

  .mission-line {
    font-size: clamp(1.25rem, 8vw, 1.85rem);
  }

  .home-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-actions a {
    width: 100%;
  }

  .team-member-photo {
    max-width: 260px;
    height: 260px;
  }

  .calendar-wrap iframe {
    height: 460px;
  }

  .footer-rso-logo {
    max-width: 175px;
  }
}

/* =========================================================
   HARD FIX: Homepage Mobile Width Overflow
   ---------------------------------------------------------
   Stops the home page from being slightly wider than phone
   while keeping the angled "The" visible.
========================================================= */

@media (max-width: 900px) {
  .site-frame {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .main-content {
    min-width: 0;
    overflow-x: hidden;
  }

  .home-title-wrap {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow: visible;
    padding-top: 2.1rem;
  }

  .home-title-the {
    display: block;
    top: 0.2rem;
    left: 0.15rem;
    font-size: clamp(1.7rem, 7vw, 2.8rem);
    z-index: 10;
  }

  .main-content h1.home-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2.25rem, 12vw, 3.65rem);
    line-height: 1;
    letter-spacing: 0.005em;
  }

  .home-title .floating-title,
  .home-title .floating-title-line,
  .home-title .floating-word {
    max-width: 100%;
  }

  .home-title .floating-word {
    white-space: normal;
  }

  .mission-rotator-section {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .mission-rotator {
    width: 100%;
    max-width: 100%;
  }

  .mission-line {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    font-size: clamp(1.02rem, 6vw, 1.45rem);
    line-height: 1.18;
  }

  .home-actions {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .home-actions a {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 520px) {
  .home-title-wrap {
    padding-top: 2rem;
  }

  .home-title-the {
    top: 0.25rem;
    left: 0.05rem;
    font-size: clamp(1.65rem, 7vw, 2.5rem);
  }

  .main-content h1.home-title {
    font-size: clamp(2.05rem, 11.5vw, 3.25rem);
  }

  .mission-line {
    font-size: clamp(0.98rem, 5.7vw, 1.35rem);
  }

  .music-notes {
    transform: scale(0.72);
    transform-origin: left top;
  }
}