/* ============================================================
   Chapter Roster page
   ============================================================ */

.roster-hero {
  background: var(--forest-dark); color: #fff;
  padding: 160px 0 84px; position: relative; overflow: hidden;
}
.roster-hero .ghost-letters {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  font-family: var(--serif); font-weight: 700; font-size: 56vh; color: rgba(255,255,255,.04);
  letter-spacing: -0.02em; pointer-events: none; user-select: none; padding-right: 4%;
}
.roster-hero .inner { position: relative; max-width: 820px; }
.roster-hero .badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.16);
}
.roster-hero h1 { font-size: clamp(46px, 7vw, 92px); line-height: 0.97; letter-spacing: -0.03em; margin: 24px 0 22px; }
.roster-hero h1 .accent-text { color: var(--accent); font-style: italic; }
.roster-hero p { color: rgba(255,255,255,.74); font-size: clamp(17px,1.5vw,20px); line-height: 1.55; max-width: 54ch; }

/* class jump nav */
.class-jump { position: relative; z-index: 2; border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--paper), transparent 8%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.class-jump-inner { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 0; }
.class-jump a {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  transition: all .2s var(--ease);
}
.class-jump a:hover { color: var(--forest-dark); border-color: var(--forest); background: color-mix(in oklab, var(--forest), transparent 92%); transform: translateY(-2px); }

/* class block */
.class-block { padding: 72px 0; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.class-block:last-of-type { border-bottom: 0; }

.class-photo {
  position: relative; margin: 0 0 38px; border-radius: 22px; overflow: hidden;
  aspect-ratio: 16/9; background: var(--paper-2); border: 1px solid var(--line);
}
.class-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.class-photo .overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  background: linear-gradient(to top, rgba(8,28,20,.82) 0%, rgba(8,28,20,.18) 42%, transparent 70%);
  padding: 34px 38px;
}
.class-photo .overlay-inner { color: #fff; }
.class-photo .greek { font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 6vw, 78px); line-height: 0.9; letter-spacing: -0.02em; }
.class-photo .greek .accent-text { color: var(--gold-light); }
.class-photo .sub { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.class-photo .sub .dot { color: rgba(255,255,255,.4); }

/* names grid */
.roster-names {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 28px;
}
.roster-names li {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 16px; color: var(--ink); font-weight: 500;
}
.roster-names li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in oklab, var(--forest-light), transparent 40%); flex: none; }
.roster-names li.is-officer { font-weight: 700; color: var(--forest-dark); }
.roster-names li.is-officer::before { background: var(--forest); }

@media (max-width: 700px) {
  .class-photo { aspect-ratio: 4/3; }
  .class-photo .overlay { padding: 22px 22px; }
  .class-block { padding: 52px 0; }
}

/* nav dropdown styles live in components.css (shared by all pages) */