/* Society page scoped styles - do NOT use global selectors */
.society-page {
  box-sizing: border-box;
}



/* SOCIETY — Membership layout and alignment (scoped) */
.society-page .society-membership-grid {
  max-width: 1100px;
  margin: 120px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: center; /* vertical centering */
  padding: 0 24px;
}

.society-page .society-membership-left {
  max-width: 520px;
  text-align: left;
}

.society-page .society-membership-right {
  display: flex;
  justify-content: center; /* center list within right half */
}



@media (max-width: 768px) {
  .society-page .society-membership-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .society-page .society-membership-right {
    justify-content: flex-start;
  }
}

/* SOCIETY — Final CTA centering (scoped) */

.society-page .story-experience .experience-buttons {
  display: flex;
  justify-content: center;
}

/* OVERRIDE: ensure membership bullets sit to the right half visually */
.society-page .society-membership-right {
  display: flex;
  justify-content: flex-end;
}

.society-page .society-membership-right .society-list {
  width: 420px;
  margin: 0;
  padding-left: 1.25em;
}

/* SOCIETY — HOW section alignment scoped to Society only */
.society-page .story-content.society-how {
  max-width: 1100px;
  margin: 0 auto 80px;
  padding: 0 24px;
}

/* SOCIETY — Membership two-column grid (scoped) */
.society-page .society-membership-grid {
  max-width: 1100px;
  margin: 120px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: center;
  padding: 0 24px;
}

.society-page .society-membership-left {
  text-align: left;
}

.society-page .society-membership-right {
  display: flex;
  justify-content: center;
}

.society-page .society-list {
  max-width: 420px;
  margin: 0 auto;
  padding-left: 1.25em;
}

@media (max-width: 768px) {
  .society-page .society-membership-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .society-page .society-membership-right {
    justify-content: flex-start;
  }
}

/* Ensure HOW grid items stretch to equal height (already scoped) */
.society-page .society-how .philosophy-grid {
  align-items: stretch;
}

.society-page .society-how .philosophy-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* SOCIETY — lock HOW section width and alignment (scoped) */
.society-page .story-content.society-how {
  max-width: 1100px;
  margin: 0 auto 80px;
  padding: 0 24px;
}

.society-page .society-how {
  text-align: left;
}

.society-page .society-how .philosophy-label {
  display: block;
  margin-bottom: 12px;
}

.society-page .society-how h2 {
  margin-top: 0;
}

/* Ensure equal-height grid for philosophy items (fills grid cell) */
.society-page .society-how .philosophy-grid {
  align-items: stretch;
}

.society-page .society-how .philosophy-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .society-page .society-membership-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .society-page .society-membership-right {
    justify-content: flex-start;
  }
}



/* SOCIETY — Membership layout */
.society-page .society-membership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.society-page .society-membership-left {
  max-width: 520px;
}

.society-page .society-membership-right {
  display: flex;
  justify-content: center;
}

.society-page .society-membership-right .society-list {
  margin: 0 auto;
  padding-left: 1.25em;
}

@media (max-width: 768px) {
  .society-page .society-membership-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .society-page .society-membership-right {
    justify-content: flex-start;
  }
}

/* SOCIETY — Final CTA centering */
.society-page .story-experience .experience-buttons {
  display: flex;
  justify-content: center;
}


/* Align society intro block to site content width */
.society-how,
.story-header.society-hero,
.society-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}


/* Ensure heading alignment */
.society-intro,
.story-header.society-hero {
  text-align: left;
}


/* 4-column grid desktop */
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
}


/* Clean card styling */
.philosophy-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: left;
  transition: all 0.3s ease;
}


.philosophy-item h3 {
  font-size: 20px;
  margin-bottom: 12px;
}


.philosophy-item p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}


/* Tablet → 2 columns */
@media (max-width: 1024px) {
  .philosophy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Mobile → 1 column */
@media (max-width: 640px) {
  .philosophy-grid {
    grid-template-columns: 1fr;
  }
}


/* Membership two-column layout */
.society-section.membership-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
  margin-top: 100px;
}


.society-section.membership-layout ul {
  margin-top: 12px;
}


@media (max-width: 900px) {
  .society-section.membership-layout {
    grid-template-columns: 1fr;
  }
}


.society-closer {
  margin-top: 80px;
}


.society-closer h2,
.society-closer h1 {
  margin-top: 40px;
}

/* Add breathing space between main society heading and grid */
.society-intro h2 {
  margin-bottom: 24px; /* adjust to 32px if more spacing needed */
}

/* If .society-intro doesn't wrap the heading, apply to section headings */
.story-header.society-hero h1,
.society-section h2 {
  margin-bottom: 24px;
}

/* End society refinements */


/* ================================
   Society Hero Header System
   ================================ */


.society-eyebrow {
  font-family: 'Satoshi', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  text-align: left;
}


.society-title {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  line-height: 1.1;
  margin-bottom: 18px;
  text-align: left;
}


.society-description {
  font-family: 'Satoshi', sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 760px;
  text-align: left;
}


/* Override inline template sizing to align hero with site content width
   (scoped to Society page only) */
.society-page .story-header.society-hero {
  /* match the site's main container so hero aligns with logo/content */
  max-width: var(--container-width) !important;
  margin: 60px auto 20px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  text-align: left !important;
}

/* Ensure the hero title itself is forcibly left-aligned within the hero */
.society-page .story-header.society-hero .society-title {
  text-align: left !important;
  margin-left: 0 !important;
}