.rankings-page { padding-bottom: 80px; }
/* Four columns need much less width than the landing's 1080px wrap, and a
   680px table parked at the left edge of a 1080px column reads as a mistake.
   The page is its own narrower centred column instead, so the heading, the
   pills and the board all share one axis. */
.rankings-page .wrap { max-width: 780px; margin-inline: auto; }
.rhead { padding: 48px 0 8px; text-align: center; }
.rhome { display: inline-block; margin-bottom: 28px; opacity: .9; }
.rhome:hover { opacity: 1; }
.rhead h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 500; letter-spacing: -0.01em; }
.rhead .sub { max-width: 62ch; margin: 12px auto 0; color: var(--text-3); font-size: 16px;
  font-weight: 300; line-height: 1.6; }
.mailnote { margin: 24px auto 0; max-width: 62ch; padding: 14px 18px;
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  background: var(--accent-soft); border-radius: 4px; }
.mailnote p { font-size: 15px; color: var(--text-2); font-weight: 300; }

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 32px 0 8px; }
.pill { font: inherit; font-size: 14px; font-weight: 300; color: var(--text-3);
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 16px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.pill:hover { color: var(--text); border-color: var(--text-4); }
.pill[aria-pressed="true"] { color: #0b0b0b; background: var(--accent); border-color: var(--accent); }

/* Four columns need far less room than six, so the board no longer stretches the
   full wrap. It scrolls inside its own box rather than making the whole document
   scroll sideways. */
main.wrap { overflow-x: auto; }
/* Hidden from sight, kept for assistive tech. display:none would drop the
   headers out of the accessibility tree too, leaving four unlabelled columns. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0; }
/* Rows read as separate cards, not as ruled table lines: border-spacing gives
   them the gap, and the radius has to be applied to the end cells because a
   <tr> cannot carry one. */
.rboard { width: 100%; min-width: 420px; border-collapse: separate;
  border-spacing: 0 5px; margin: 8px auto 0; }
.rboard th.num, .rboard td.num { text-align: right; }
.rboard th.conf, .rboard td.conf { text-align: center; width: 92px; }
.rboard th.rank, .rboard td.rank { text-align: left; }
.rboard td { padding: 12px; font-size: 15px; font-weight: 300;
  background: var(--panel); }
.rboard td:first-child { border-radius: 8px 0 0 8px; }
.rboard td:last-child { border-radius: 0 8px 8px 0; }
/* The brand wash is a FLAT tint across the row, not the left-to-right fade the
   landing's boards use. A gradient has to live on the cells (a row's background
   paints underneath them, so the rounded corners the end cells carry would show
   square behind it) — and a per-cell gradient restarts at every cell boundary,
   which puts a visible seam between the school and conference columns. Flat has
   no origin to restart from. */
/* Panel underneath, flat wash layered over it, so a school with no colour on
   file still gets a card rather than a hole. */
.rboard tbody td { background-color: var(--panel);
  background-image: linear-gradient(var(--brand-wash, transparent), var(--brand-wash, transparent)); }
.rboard tbody tr:hover td { background-color: var(--panel-2);
  background-image: linear-gradient(var(--brand-wash, transparent), var(--brand-wash, transparent)); }
.rboard td.rank { color: var(--text-4); font-size: 13px; width: 46px; font-variant-numeric: tabular-nums; }
.rboard td.school { white-space: nowrap; }
.rboard td.conf { color: var(--text-3); font-size: 13px; }
/* Conference marks are real reversed (white) artwork from each conference's own
   brand guide, sourced into conferences/white/ — see confArtPath. That is why
   they sit straight on the row with no plate behind them: an earlier pass needed
   one because the ACC's navy and the EIWA and MAC shields vanished on a
   near-black row, and a CSS white filter was worse still (it flattens those
   shields into featureless silhouettes). Reversed art solves it at the source,
   so the chrome comes off.
   A conference with no white file yet falls back to its colour mark and will
   read differently — that is a visible prompt to go source one, not a bug. */
.rboard .cmark { height: 26px; width: auto; max-width: 76px; object-fit: contain;
  vertical-align: middle; opacity: .78; }
.rboard tbody tr:hover .cmark { opacity: 1; }
/* The score is the reason the page exists — it carries the brand accent and the
   most weight in the row. */
.rboard td.score { color: var(--accent); font-size: 17px; font-weight: 400;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rboard td.dim { color: var(--text-4); font-size: 14px; font-variant-numeric: tabular-nums; }
/* School marks keep a round chip: it gives logos of wildly different silhouettes
   a shared footprint down the column, which is what stops the list looking
   ragged. Conference marks opposite are bare, being uniform white already. */
.rboard .mark { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-right: 11px; vertical-align: -9px;
  padding: 3px; background: rgba(255, 255, 255, 0.05); border-radius: 50%;
  font-size: 10px; color: var(--text-4); }
.rboard .mark img { width: 100%; height: 100%; object-fit: contain; }
.rboard a.sname { color: var(--text); text-decoration: none;
  border-bottom: 1px solid transparent; }
.rboard a.sname:hover { color: #fff; border-bottom-color: var(--accent); }
/* The ask, for a visitor who arrived without opting in. It sits UNDER the
   teaser rather than over it: nothing is obscured, because nothing needs to be
   — the withheld rows were never sent to this browser. */
.gate { max-width: 520px; margin: 26px auto 0; padding: 22px; text-align: center;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  box-shadow: var(--shadow); }
.gate-lead { font-size: 15px; font-weight: 300; color: var(--text-2); line-height: 1.6; }
.gate-lead b { font-weight: 500; color: var(--text); }
.gate-form { display: flex; gap: 8px; margin-top: 16px; }
.gate-form input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px;
  font-weight: 300; color: var(--text); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border); border-radius: 6px; padding: 10px 13px; }
.gate-form input::placeholder { color: var(--text-4); }
.gate-form input:focus { outline: none; border-color: var(--accent); }
.gate-form button { font: inherit; font-size: 14px; font-weight: 400; color: #0b0b0b;
  background: var(--accent); border: 0; border-radius: 6px; padding: 10px 18px;
  cursor: pointer; white-space: nowrap; }
.gate-form button:disabled { opacity: .6; cursor: default; }
.gate-err { margin-top: 12px; font-size: 14px; font-weight: 300; color: var(--red); }
@media (max-width: 520px) { .gate-form { flex-direction: column; } }

.foot { margin: 20px auto 0; color: var(--text-4); font-size: 13px; font-weight: 300;
  line-height: 1.6; max-width: 68ch; text-align: center; }

/* The conference mark survives the phone — it costs a fraction of the width the
   written name did, which is most of why it replaced it. */
@media (max-width: 640px) {
  .rboard { min-width: 340px; }
  .rboard th.conf, .rboard td.conf { width: 64px; }
  .rboard .cmark { height: 18px; max-width: 46px; }
  .rboard td { padding: 10px 8px; }
}