/* ===========================================================
   Pi Sigma Epsilon — Cornell Zeta Alpha Chapter
   Design tokens reverse-engineered from the live cornellpse.com
   (Wix) site on 2026-08-17: colors, fonts, spacing, button shape.
   =========================================================== */

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

:root {
  --purple: #450072;
  --purple-dark: #270539;
  --purple-light: #8a4fc4;
  --black: #000000;
  --white: #ffffff;
  --gray-light: #d5d5d5;
  --text: #1a1a1a;
  --max-width: 1200px;

  --font-heading: 'Raleway', sans-serif;
  --font-button: 'Montserrat', sans-serif;
  --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

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

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- Header / Nav ----------
   Fixed + transparent, matching the live site: the header never actually
   leaves the page as you scroll, it just goes see-through white-on-white
   once you scroll past the hero photo, since the nav text/logo are white
   with no background behind them. Fixed (not sticky) so it floats over
   the hero without reserving layout space, exactly like the original. */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 28px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Once the user scrolls past the hero photo, the header fades/slides away
   entirely (matches the live site) rather than sitting there illegibly
   (white text/logo) over the white page background. main.js toggles this
   class via an IntersectionObserver watching the hero section. */
header.site-header.header-hidden {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

header.site-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-family: var(--font-heading);
  letter-spacing: 3px;
  font-size: 22px;
}

header.site-header .logo img { height: 56px; }

nav.site-nav {
  display: flex;
  gap: 38px;
}

nav.site-nav a {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}

nav.site-nav a.active,
nav.site-nav a:hover {
  border-bottom-color: var(--white);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 28px;
  cursor: pointer;
}

@media (max-width: 860px) {
  nav.site-nav {
    position: fixed;
    inset: 0;
    background: var(--purple-dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
    gap: 28px;
    z-index: 100;
  }
  nav.site-nav.open { display: flex; }
  .nav-toggle { display: block; z-index: 110; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(92,26,134,0.07) 0%, rgba(69,0,114,0.09) 45%, rgba(39,5,57,0.13) 100%),
              url('../assets/photos/hero.jpg') center center / cover no-repeat;
  overflow: hidden;
}

.hero.hero-sub {
  background: linear-gradient(135deg, rgba(92,26,134,0.07) 0%, rgba(69,0,114,0.09) 45%, rgba(39,5,57,0.13) 100%),
              url('../assets/photos/hero.jpg') center 25% / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 55%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  text-align: center;
}

.hero .hero-buttons { justify-content: center; }

.hero h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--white);
  font-size: 80px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}

.hero.hero-sub h1 {
  font-size: 64px;
  text-transform: none;
}

.hero p.subtitle {
  font-family: var(--font-heading);
  color: var(--white);
  font-size: 25px;
  font-weight: 400;
  margin: 0 0 34px;
  letter-spacing: 0.25px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.hero .hero-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-button);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 50px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color .2s ease;
}

.btn:hover { background: #5c1a92; text-decoration: underline; }

.btn-outline {
  background: transparent;
  border-color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.15); text-decoration: underline; }

/* Deactivated state (e.g. Apply button while recruitment isn't open):
   visually muted and not interactive. */
.btn.btn-disabled {
  background: #c9c2ce;
  color: #6d6577;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.btn-disabled:hover { background: #c9c2ce; text-decoration: none; }

/* ---------- Scroll reveal ---------- */
/* Elements fade + rise into place as they scroll into view, matching the
   live site's animation on the stat tiles, value cards, photos, etc.
   initScrollReveal() (main.js) adds "in-view" via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Section basics ---------- */
section { padding: 90px 0; }

.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple);
  font-size: 35px;
  letter-spacing: 0.35px;
  text-align: center;
  margin: 0 0 46px;
}

.section-title.small { font-size: 28px; margin-bottom: 24px; }

.section-lead {
  max-width: 820px;
  margin: 0 auto 46px;
  text-align: center;
  font-size: 17px;
}

/* ---------- Stats bar ---------- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 70px 40px;
  text-align: center;
}

.stats-bar .stat {
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  padding: 34px 16px;
}

.stats-bar .stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  color: var(--purple);
}

.stats-bar .stat-label {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 1px;
  color: #555;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ---------- Who We Are ---------- */
.who-we-are {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 90px 40px;
}

.who-we-are p { font-size: 17px; margin-bottom: 36px; }

/* ---------- Photo carousel (matches the Wix gallery under "Who We Are") ---------- */
.photo-carousel {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto 100px;
  padding: 0 70px;
}

.photo-carousel .carousel-viewport {
  overflow: hidden;
}

.photo-carousel .carousel-track {
  display: flex;
  gap: 40px;
  transition: transform 0.4s ease;
}

.photo-carousel .carousel-item {
  flex: 0 0 calc((100% - 80px) / 3);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

.photo-carousel .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 34px;
  color: var(--purple);
  cursor: pointer;
  padding: 8px;
  line-height: 1;
}

.photo-carousel .carousel-arrow.prev { left: 10px; }
.photo-carousel .carousel-arrow.next { right: 10px; }

.photo-carousel.single .carousel-item { flex: 0 0 100%; }

@media (max-width: 760px) {
  .photo-carousel .carousel-item { flex: 0 0 100%; }
  .photo-carousel { padding: 0 50px; }
}

/* ---------- Fade slider (About > Community) ----------
   Full-width rectangular photos that cross-fade in place, with prev/next
   arrows to jump between them — matches the live site's Community gallery
   (a single big rectangular photo, not the small circular home-page style). */
.fade-slider {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #111;
}
.fade-slider .fade-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.fade-slider .fade-slide.active { opacity: 1; }
.fade-slider .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.35);
  border: none;
  color: var(--white);
  font-size: 30px;
  cursor: pointer;
  padding: 6px 14px;
  line-height: 1;
  z-index: 3;
  border-radius: 4px;
}
.fade-slider .carousel-arrow.prev { left: 12px; }
.fade-slider .carousel-arrow.next { right: 12px; }
.fade-slider .fade-slide-counter {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 14px;
  background: rgba(0,0,0,0.35);
  padding: 3px 10px;
  border-radius: 20px;
}
@media (max-width: 760px) {
  .fade-slider { aspect-ratio: 4 / 3; }
}

/* ---------- Value cards ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.value-card {
  background: var(--white);
  box-shadow: 0 18px 40px rgba(0,0,0,0.16), 0 4px 10px rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.value-card .value-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: center;
  padding: 22px 16px;
  border-bottom: 1px solid #eee;
}

.value-card .value-card-photo {
  height: 220px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  background-size: cover;
  background-position: center;
}

.value-card .value-card-text {
  padding: 24px 22px 30px;
  font-size: 15px;
  color: #333;
}

/* ---------- Where We Work ---------- */
.employers-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 44px;
  align-items: center;
  justify-content: center;
}

.employers-grid span {
  font-family: 'Georgia', serif;
  font-size: 24px;
  font-weight: 700;
  color: #222;
  opacity: 0.85;
}

.employers-grid img.employers-collage-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ---------- Letter / testimonial (dark) sections ---------- */
.letter-section {
  background: var(--purple-dark);
  color: var(--white);
  padding: 90px 0;
}

.letter-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 50px;
  align-items: start;
}

.avatar-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--purple) 0%, #5c1a92 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 54px;
  color: rgba(255,255,255,0.85);
}

.letter-section .section-title { color: var(--white); text-align: left; }

.letter-section p { margin-bottom: 18px; font-size: 16px; color: rgba(255,255,255,0.92); }

.letter-section .signoff { margin-top: 30px; }

@media (max-width: 760px) {
  .letter-grid { grid-template-columns: 1fr; }
  .avatar-photo { max-width: 220px; margin: 0 auto; }
}

/* ---------- People cards (exec board / active brothers) ---------- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: var(--max-width);
  margin: 0 auto 60px;
  padding: 0 40px;
  /* CSS Grid rows default to align-items: stretch, which forces every card
     in a row to match the height of the tallest card in that row. That's
     what caused two separate bugs: (1) a card next to a neighbor with a
     wrapped 2-line name got stretched taller, showing as blank space (or,
     after an earlier fix, extra purple padding) under its own name; and
     (2) opening one card's bio panel (which adds up to 400px of height)
     stretched every OTHER card in the same row too, making the whole row
     look like it "expanded" even though only one card actually had a bio
     showing. align-items: start makes each card's height depend only on
     its own content, so neither situation can cross over to a sibling. */
  align-items: start;
}

.people-grid.compact { grid-template-columns: repeat(4, 1fr); }

.person-card {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,0.14), 0 3px 8px rgba(0,0,0,0.07);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.person-card:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

.person-card .avatar-photo {
  border-radius: 0;
  aspect-ratio: 4 / 3;
  font-size: 40px;
  background-position: top;
  flex-shrink: 0;
}

.person-card .person-info {
  background: var(--purple);
  color: var(--white);
  padding: 20px 22px 26px;
  text-align: center;
  /* flex:1 here is about filling this card's own height only (e.g. keeping
     the purple block centered if the name box above it needs 1 vs 2 lines)
     — with .people-grid using align-items: start, a neighboring card's
     height can never stretch this card, so there's no cross-card space to
     absorb any more. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.person-card .person-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}

.person-card .person-role {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}

/* Click-to-expand bio panel: multiple cards can be open at once (unlike the
   FAQ accordion, which closes others — browsing several bios side by side
   is the natural use case here). */
.person-bio {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--purple);
}

.person-card.open .person-bio { max-height: 400px; }

.person-bio p {
  margin: 0;
  padding: 0 22px 22px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  text-align: left;
}

/* Major + email, shown under the bio when a member has filled out the
   headshot/bio form (both fields are optional and simply omitted when
   a member hasn't responded yet). */
.person-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 22px 22px;
  margin-top: -8px;
  font-size: 12.5px;
  text-align: left;
}

.person-meta-major {
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.3px;
}

.person-meta a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
}
.person-meta a:hover { color: var(--white); }

.pledge-class-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--purple);
  text-align: center;
  margin: 60px 0 26px;
}

/* ---------- Two column intro (About) ---------- */
.two-col {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 70px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.two-col h2 {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1.35;
  margin: 0;
}

.two-col h2 .accent { color: var(--purple); }

.two-col p { font-size: 16px; color: #333; }

.two-col a { color: var(--purple); text-decoration: underline; }

/* Boxed variant: intro copy gets a card with a light shadow, matching the
   live site's treatment of the About-page intro paragraph. */
.two-col.boxed {
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.09), 0 3px 8px rgba(0,0,0,0.05);
  max-width: calc(var(--max-width) - 80px);
  padding: 50px 50px;
}

.highlight-purple { color: var(--purple-light); font-weight: 600; }

@media (max-width: 760px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ---------- Content blocks (History, Alumni, Philanthropy) ---------- */
.content-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 40px;
}

.content-block h2.block-heading {
  font-family: var(--font-heading);
  color: var(--purple);
  font-size: 32px;
  margin-bottom: 8px;
}

.content-block h3.block-subheading {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin: 30px 0 10px;
}

.content-block p { font-size: 16px; color: #333; margin-bottom: 16px; }

.content-block.on-dark {
  background: var(--purple-dark);
  color: var(--white);
  max-width: 100%;
}
.content-block.on-dark .inner { max-width: 900px; margin: 0 auto; }
.content-block.on-dark p { color: rgba(255,255,255,0.9); }
.content-block.on-dark h2.block-heading { color: var(--white); }

/* About hero uses its own distinct photo (not the shared home/brothers/
   recruitment/alumni hero image) */
.hero.hero-about {
  background: linear-gradient(135deg, rgba(92,26,134,0.07) 0%, rgba(69,0,114,0.09) 45%, rgba(39,5,57,0.13) 100%),
              url('../assets/photos/about-hero.jpg') center 30% / cover no-repeat;
}

/* History section: alternating text/photo rows */
.history-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 50px;
}
.history-row.reverse { grid-template-columns: 1fr 1fr; }
.history-row.reverse > *:first-child { order: 1; }
.history-row.reverse > *:last-child { order: 2; }
.history-row img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}
.history-row:not(.reverse) {
  align-items: start;
}
.history-row:not(.reverse) img {
  margin-top: 70px;
}
.history-crest {
  text-align: center;
  background: var(--white);
  border-radius: 4px;
  padding: 24px;
}
.history-crest img { display: inline-block; max-width: 220px; }
.history-crest img.crest-values-img { margin-top: 14px; max-width: 100%; }
@media (max-width: 760px) {
  .history-row, .history-row.reverse { grid-template-columns: 1fr; }
  .history-row.reverse > *:first-child { order: 0; }
  .history-row.reverse > *:last-child { order: 0; }
}

/* Alumni section: text + stacked photos */
.alumni-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: start;
}
.alumni-photos { display: flex; flex-direction: column; gap: 20px; }
.alumni-photos img { width: 100%; height: auto; border-radius: 4px; display: block; }
@media (max-width: 760px) {
  .alumni-row { grid-template-columns: 1fr; }
}

/* Philanthropy reuses .alumni-row/.alumni-photos but its photos should be
   noticeably smaller than the About > Alumni section's, so this scoped
   modifier shrinks and right-aligns just this instance without touching
   the shared base rule. */
.alumni-photos.phil-photos-small {
  max-width: 78%;
  margin-left: auto;
}
@media (max-width: 760px) {
  .alumni-photos.phil-photos-small { max-width: 100%; margin-left: 0; }
}

/* Philanthropy heading + Rach's Hope logo */
.phil-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rachs-hope-logo { width: 100px; height: auto; border-radius: 6px; flex-shrink: 0; }

/* Philanthropy content block: light background (not the dark on-dark
   treatment), two photos side by side, and links to Rach's Hope's pages. */
.phil-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 26px 0;
}
.phil-photos img { width: 100%; height: 220px; object-fit: cover; border-radius: 6px; display: block; }
.phil-links { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.phil-links a { color: var(--purple); text-decoration: underline; font-weight: 600; }
@media (max-width: 760px) {
  .phil-photos { grid-template-columns: 1fr; }
}

/* ---------- Recruitment ---------- */
.recruitment-panel {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: 70px 40px 60px;
}

/* Recruitment timeline: a clean date/event schedule matching the FAQ
   list's row-and-divider treatment rather than a graphical line-and-dot
   timeline, so it reads as one system with the rest of the page. */
.timeline-list {
  text-align: left;
  margin: 0 0 44px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid #e4e4e4;
}

.timeline-row:last-child { border-bottom: none; }

.timeline-date {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple);
  font-size: 15px;
  line-height: 1.5;
}

.timeline-date .timeline-day {
  display: block;
  font-weight: 600;
  color: var(--purple-light);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.timeline-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.timeline-event {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin: 0;
}

.timeline-time {
  color: #666;
  font-size: 14px;
}

.timeline-badge {
  display: inline-block;
  background: var(--purple);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 12px;
  border-radius: 20px;
}

/* Location column: a light pill so an unfilled "TBD" doesn't read as
   urgent, and a real location (once typed into the JSON) still fits the
   same look without any code changes needed. */
.timeline-location {
  justify-self: end;
  text-align: right;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--purple);
  background: rgba(69, 0, 114, 0.08);
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .timeline-row { grid-template-columns: 1fr; gap: 8px; }
  .timeline-date { display: flex; gap: 6px; align-items: baseline; }
  .timeline-date .timeline-day { display: inline; }
  .timeline-location { justify-self: start; }
}

.coffee-chat-section {
  max-width: var(--max-width);
  margin: 0 auto 70px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
  background: #faf7fb;
  border: 1px solid #ecdff2;
  border-radius: 8px;
  overflow: hidden;
}

.coffee-chat-section .coffee-chat-photo {
  width: 100%;
  height: 100%;
  min-height: 260px;
  background-size: cover;
  background-position: center;
}

.coffee-chat-box {
  text-align: left;
  padding: 46px 44px 46px 0;
}

.coffee-chat-box h3 {
  font-family: var(--font-heading);
  color: var(--purple);
  font-size: 24px;
  margin-top: 0;
}

@media (max-width: 760px) {
  .coffee-chat-section { grid-template-columns: 1fr; }
  .coffee-chat-box { text-align: center; padding: 30px 30px 40px; }
  .coffee-chat-section .coffee-chat-photo { min-height: 220px; }
}

/* Educators: stacked circular headshots, name centered underneath each,
   matching the live site (not side-by-side rectangles). */
.educators-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.educator-item { text-align: center; }
.educator-item .avatar-photo {
  border-radius: 50%;
  width: 240px;
  height: 240px;
  font-size: 56px;
  margin: 0 auto 12px;
}
.educator-item .educator-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
}

/* FAQ accordion */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 40px;
}

.faq-item {
  border-bottom: 1px solid #e4e4e4;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  padding: 22px 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question .icon {
  color: var(--purple);
  font-size: 22px;
  transition: transform 0.2s ease;
}

.faq-item.open .faq-question .icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  font-size: 15.5px;
  color: #444;
}

.faq-item.open .faq-answer { max-height: 400px; }

.faq-answer p { padding: 0 4px 20px; margin: 0; }

/* ---------- Alumni ---------- */
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.spotlight-card { text-align: center; }

.spotlight-card .avatar-photo {
  border-radius: 50%;
  margin-bottom: 14px;
  font-size: 30px;
}

.spotlight-card .spotlight-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
}

.spotlight-card .spotlight-position {
  font-size: 13.5px;
  color: #555;
  margin-top: 3px;
}

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--black);
  color: #ccc;
  padding: 60px 40px 30px;
  text-align: center;
}

footer.site-footer .social-icons {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 30px;
}

footer.site-footer .social-icons a {
  color: #bbb;
  border: 1px solid #444;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease, border-color .2s ease;
}
footer.site-footer .social-icons a:hover { color: var(--white); border-color: var(--white); }
footer.site-footer .social-icons svg { width: 20px; height: 20px; fill: currentColor; }

footer.site-footer p { font-size: 13px; max-width: 700px; margin: 0 auto 14px; color: #999; }

footer.site-footer .copyright { font-size: 13px; color: #777; margin-top: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero h1 { font-size: 52px; }
  .hero.hero-sub h1 { font-size: 44px; }
  .value-grid, .people-grid, .spotlight-grid { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .value-grid, .people-grid, .spotlight-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 38px; }
  header.site-header { padding: 20px; }
  .container, .two-col, .content-block, section { padding-left: 20px; padding-right: 20px; }
}