:root {
  --gap: 16px;
  --card-radius: 10px;
  --card-padding: 12px;
  --image-area: 120px;    /* height of the logo zone */
  --logo-max-w: 160px;
  --logo-max-h: 95px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.04);
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-title: Georgia, "Times New Roman", serif;
  --platinum:        #C7C9CC; /* main accent */
  --platinum-deep:   #9FA4AA; /* deeper accent */
  --platinum-tint:   #EEF0F2; /* highlight */
  --platinum-bg:     #F7F8F9; /* soft background */
  --golden:   #F0C419;   /* was FFEE5B */
  --silver:   #94A3B8;   /* was C3CED8 */
  --bronze:   #C08A3E;   /* was DBBE80 */
  --academic: #39BEE6;   /* was 94DBF3 */
}

/*
body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.4;
  background: #f7f7f8;
  color: #1f2937;
}
  */

#members.container {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 16px;
}

h1 {
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* ===== TIER ROW ===== */
.tier {
  margin-bottom: 40px;
}
.tier-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.badge {
  display: inline-block;
  font: 600 12px/1 var(--font-body);
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: .25px;
  border: 1px solid transparent;
  background: #fff;
}
/* badge */
.badge.platinum { background: #ffffff; border-color: var(--platinum); }
.badge.golden   { background: color-mix(in srgb, var(--golden)   25%, #fff); border-color: var(--golden); }
.badge.silver   { background: color-mix(in srgb, var(--silver)   20%, #fff); border-color: var(--silver); }
.badge.bronze   { background: color-mix(in srgb, var(--bronze)   20%, #fff); border-color: var(--bronze); }
.badge.academic { background: color-mix(in srgb, var(--academic) 20%, #fff); border-color: var(--academic); }

.tier-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

/* The card grid for each tier */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  /* justify-content: center; */ /* <- this centers rows when there’s extra space */
}

/* ===== CARD ===== */
.card {
  /* 4 per row desktop, 3 on tablets, 2 on phones */
  flex: 0 1 calc(25% - var(--gap));
  display: flex;
}
@media (max-width: 1024px) { .card { flex-basis: calc(33.333% - var(--gap)); } }
@media (max-width: 640px)  { .card { flex-basis: calc(50% - var(--gap)); } }

.card-inner {
  background: #fff;
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow);
  border: 1px solid transparent; /* colored per tier below */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* card */
.platinum .card-inner{
  border-color: var(--platinum);
  background: linear-gradient(180deg, var(--platinum-bg), #fff);
  box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    0 6px 20px rgba(0,0,0,.05),
    inset 0 0 0 1px rgba(199,201,204,.45);
  color: var(--platinum-deep); /* used by the ::before rule below */
}

/* optional: metallic top rule */
.platinum .card-inner::before{
  content:"";
  display:block;
  height:4px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  margin-top: calc(-1 * var(--card-padding));
  margin-left: calc(-1 * var(--card-padding));
  margin-right: calc(-1 * var(--card-padding));
  background: linear-gradient(90deg, #E6E8EB, #C7C9CC 40%, #E6E8EB 80%);
  opacity:.95;
}
.golden .card-inner {
  border-color: var(--golden);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05), inset 0 0 0 1px color-mix(in srgb, var(--golden) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--golden) 12%, #fff), #fff);
}
.silver .card-inner {
  border-color: var(--silver);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05), inset 0 0 0 1px color-mix(in srgb, var(--silver) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--silver) 10%, #fff), #fff);
}
.bronze .card-inner {
  border-color: var(--bronze);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05), inset 0 0 0 1px color-mix(in srgb, var(--bronze) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bronze) 12%, #fff), #fff);
}
.academic .card-inner {
  border-color: var(--academic);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05), inset 0 0 0 1px color-mix(in srgb, var(--academic) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--academic) 10%, #fff), #fff);
}

/* Image area: keep it uniform height, center the logo */
.logo {
  height: var(--image-area);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: #fafafa;
}
/* Your “same line” preference: wrapper + img on one line is fine in HTML. */

.logo img {
  display: block;
  max-width: var(--logo-max-w);
  max-height: var(--logo-max-h);
  width: auto;
  height: auto;
}

.name {
  margin-top: 10px;
  font-family: var(--font-title);
  font-size: 14px;
  text-align: center;
  word-break: break-word;
}
.name.large { font-size: 15px; font-weight: 600; }