/* ==========================================================
   LYNX ROLEPLAY v5 — requested layout fixes
   - compact administration cards
   - stable FAQ intro while accordions animate
   - blurred launch section with one-config reveal
   - equal JOIN step alignment
   - cinematic hero photo layer
   ========================================================== */

/* 1) HERO — additional image layer, all existing effects stay above it */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,2,2,.72) 0%, rgba(2,2,2,.48) 46%, rgba(2,2,2,.30) 100%),
    linear-gradient(180deg, rgba(4,4,4,.18) 0%, rgba(4,4,4,.08) 55%, rgba(4,4,4,.72) 100%),
    url('lynx01.png') center 43% / cover no-repeat;
  opacity: .6;
  filter: saturate(.88) contrast(1.06);
  transform: scale(1.015);
}

.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 38%, rgba(212,175,55,.11), transparent 30%),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 58%);
  pointer-events: none;
}

/* 2) LAUNCH — privacy/teaser mode controlled by CONFIG.hideLaunchCountdown */
.launch-section {
  min-height: 620px;
}

.launch-content {
  transition: filter .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

.launch-locked-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 48px 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(212,175,55,.09), transparent 34%),
    rgba(3,3,3,.19);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: opacity .5s ease, visibility .5s ease, backdrop-filter .65s ease, -webkit-backdrop-filter .65s ease;
}

.launch-locked-overlay::before,
.launch-locked-overlay::after {
  content: '';
  width: min(640px, 72vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.62), transparent);
  margin: 26px 0;
}

.launch-locked-overlay span {
  color: rgba(244,216,121,.68);
  font: 800 9px/1 'Inter', sans-serif;
  letter-spacing: .32em;
}

.launch-locked-overlay strong {
  margin-top: 18px;
  color: #f4f1e9;
  font: 700 clamp(58px, 8vw, 128px)/.95 'Oswald', sans-serif;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-shadow: 0 12px 60px rgba(0,0,0,.72), 0 0 48px rgba(212,175,55,.10);
}

.launch-locked-overlay small {
  color: #918c82;
  font: 700 8px/1.6 'Inter', sans-serif;
  letter-spacing: .24em;
}

.launch-section.is-obscured .launch-content {
  filter: blur(10px) saturate(.62);
  opacity: .42;
  transform: scale(1.012);
  pointer-events: none;
  user-select: none;
}

.launch-section.is-obscured .launch-locked-overlay {
  opacity: 1;
  visibility: visible;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 3) JOIN — every text block starts on exactly the same baseline */
@media (min-width: 1101px) {
  .join-step {
    grid-template-rows: 24px 172px minmax(0, 1fr);
  }

  .join-icon {
    align-self: center;
    justify-self: start;
  }

  .join-step-body {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .join-step h3 {
    min-height: 76px;
    display: flex;
    align-items: flex-start;
  }

  .join-step p {
    min-height: 0;
    margin-bottom: 30px;
  }

  .join-step-body > .join-link,
  .join-step-body > .join-actions {
    margin-top: auto;
  }
}

/* 4) STAFF — compact, editorial cards closer to the DOPERP rhythm */
.staff-section {
  padding-top: 118px !important;
  padding-bottom: 126px !important;
}

.staff-section::before {
  font-size: 210px;
  bottom: -28px;
}

.staff-orbit {
  width: 470px;
  height: 470px;
  right: -220px;
  top: 84px;
  opacity: .72;
}

.staff-heading {
  margin-bottom: 58px !important;
  grid-template-columns: 1fr .66fr;
  gap: 72px;
}

.staff-heading h2 {
  font-size: clamp(50px, 5.5vw, 74px);
}

.staff-heading-copy .section-lead {
  max-width: 390px;
  font-size: 12px;
  line-height: 1.9;
}

.staff-showcase {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.staff-profile,
.staff-profile:nth-child(1),
.staff-profile:nth-child(2) {
  grid-column: auto !important;
  min-height: 314px !important;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(17,17,16,.97), rgba(6,6,6,.995));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.staff-profile:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.34), inset 0 0 0 1px rgba(212,175,55,.025);
}

.staff-profile::before {
  left: 16px;
  right: 16px;
  top: 14px;
  opacity: .34;
}

.staff-profile-bg {
  background:
    radial-gradient(circle at 50% 22%, rgba(212,175,55,.08), transparent 40%),
    linear-gradient(to bottom, rgba(5,5,5,.04), rgba(5,5,5,.58));
}

.staff-avatar-wrap {
  position: relative !important;
  inset: auto !important;
  height: 142px !important;
  flex: 0 0 142px;
  overflow: visible !important;
  display: grid;
  place-items: center;
  padding-top: 18px;
}

.staff-avatar-wrap::before {
  width: 118px !important;
  height: 118px !important;
  aspect-ratio: auto !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}

.staff-avatar-wrap::after {
  width: 112px !important;
  height: 112px !important;
  aspect-ratio: auto !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}

.staff-avatar-img,
.staff-profile:nth-child(1) .staff-avatar-img,
.staff-profile:nth-child(2) .staff-avatar-img {
  width: 88px !important;
  height: 88px !important;
  border: 2px solid rgba(212,175,55,.72);
  box-shadow: 0 14px 34px rgba(0,0,0,.52), 0 0 24px rgba(212,175,55,.07);
}

.staff-avatar-fallback {
  padding: 20px !important;
}

.staff-profile-content {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto;
  padding: 8px 18px 22px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.staff-profile-meta {
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.staff-profile-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 11px;
  border: 1px solid rgba(212,175,55,.46);
  border-radius: 999px;
  background: rgba(212,175,55,.045);
  font-size: 7px !important;
  letter-spacing: .17em !important;
  line-height: 1;
}

.staff-profile-index {
  display: none;
}

.staff-profile h3 {
  font-size: 17px !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em;
}

.staff-profile p {
  margin-top: 8px !important;
  max-width: 230px;
  min-height: 34px;
  color: #78746d;
  font-size: 9px !important;
  line-height: 1.65 !important;
}

.staff-discord-name {
  margin-top: auto !important;
  padding-top: 10px;
  font-size: 7px !important;
  letter-spacing: .08em;
}

.staff-api-note {
  display: none;
}

/* 5) FAQ — eliminate browser scroll anchoring / sticky-column jumps */
.faq-section,
.faq-layout,
.faq-intro,
.faq-list,
.faq-item,
.faq-answer {
  overflow-anchor: none;
}

.faq-intro {
  position: sticky !important;
  top: 130px !important;
  align-self: start;
  height: max-content;
}

.faq-section.is-toggling .faq-intro {
  transform: none !important;
}

/* responsive refinements */
@media (max-width: 1100px) {
  .staff-showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .staff-profile,
  .staff-profile:nth-child(1),
  .staff-profile:nth-child(2) {
    min-height: 304px !important;
  }

  .faq-intro {
    position: relative !important;
    top: auto !important;
  }

  .join-step {
    grid-template-rows: 1fr;
  }

  .join-step-body {
    align-self: center;
    display: block;
  }
}

@media (max-width: 760px) {
  .hero-photo {
    background-position: 62% 45%;
    opacity: .48;
  }

  .launch-section {
    min-height: 520px;
  }

  .launch-locked-overlay strong {
    font-size: clamp(48px, 15vw, 78px);
  }

  .staff-section {
    padding-top: 96px !important;
    padding-bottom: 100px !important;
  }

  .staff-heading {
    margin-bottom: 44px !important;
  }

  .staff-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .staff-profile,
  .staff-profile:nth-child(1),
  .staff-profile:nth-child(2) {
    min-height: 286px !important;
  }

  .staff-avatar-wrap {
    height: 128px !important;
    flex-basis: 128px;
  }

  .staff-avatar-img,
  .staff-profile:nth-child(1) .staff-avatar-img,
  .staff-profile:nth-child(2) .staff-avatar-img {
    width: 78px !important;
    height: 78px !important;
  }

  .staff-avatar-wrap::before {
    width: 104px !important;
    height: 104px !important;
  }

  .staff-avatar-wrap::after {
    width: 100px !important;
    height: 100px !important;
  }

  .staff-profile-content {
    padding: 6px 12px 18px !important;
  }

  .staff-profile-role {
    font-size: 6px !important;
    padding: 0 8px;
  }

  .staff-profile h3 {
    font-size: 15px !important;
  }

  .staff-profile p {
    font-size: 8px !important;
    min-height: 30px;
  }
}

@media (max-width: 480px) {
  .staff-showcase {
    grid-template-columns: 1fr !important;
    max-width: 330px;
    margin-inline: auto;
  }

  .staff-profile,
  .staff-profile:nth-child(1),
  .staff-profile:nth-child(2) {
    min-height: 286px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .launch-content,
  .launch-locked-overlay {
    transition: none !important;
  }
}