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

:root {
  --ink: #171529;
  --muted: #77758b;
  --purple: #7367e8;
  --purple-dark: #5d50d8;
  --lavender: #f1efff;
  --line: #eae8f3;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  background: linear-gradient(145deg, #fff 8%, #f1efff 100%);
}

.page-shell {
  width: min(1100px, calc(100% - 40px));
  margin: auto;
  padding: 105px 0 60px;
}

.page-header { margin-bottom: 34px; text-align: center; }
.eyebrow {
  margin-bottom: 9px;
  color: var(--purple);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.page-header h2 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.06em; }
.intro { margin-top: 12px; color: var(--muted); }

.party-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.party-card {
  display: flex;
  flex-direction: column;
  gap: 17px;
  min-height: 170px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 30px rgba(66, 58, 130, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.party-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(66, 58, 130, .14); }
.party-mark,
.party-placeholder,
.party-image {
  display: grid;
  width: 100%;
  max-width: 512px;
  height: 512px;
  margin: 0 auto;
  place-items: center;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  font-size: 1.35rem;
  font-weight: 800;
}
.party-placeholder {
  color: rgba(255, 255, 255, .75);
  font-size: 1.15rem;
}
.party-image {
  object-fit: contain;
  object-position: center;
}
.party-content { min-width: 0; flex: 1; }
.party-title-row { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.party-card h3 { font-size: 1.1rem; }
.members { flex-shrink: 0; color: var(--purple-dark); font-size: .72rem; font-weight: 700; }
.bio { margin-top: 16px; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.status { grid-column: 1 / -1; padding: 35px; color: var(--muted); text-align: center; }
.status.error { color: #b24759; }
.empty-party-card { align-items: flex-start; grid-column: 1 / -1; max-width: 560px; margin: 0 auto; }
.empty-party-card .bio { margin-top: 10px; }

@media (max-width: 500px) {
  .page-shell { width: min(100% - 28px, 1100px); padding-top: 95px; }
  .party-card { padding: 19px; }
  .party-mark,
  .party-placeholder,
  .party-image {
    height: min(512px, calc(100vw - 66px));
  }
  .party-title-row { display: block; }
  .members { display: block; margin-top: 7px; }
}