/* ─────────────────────────────────────────────────────────────────────────
   The vocabulary.

   Five pages had grown two hundred and seven classes between them, and five
   different things called a card - req-rolls-card, req-rail-block,
   req-faces-card, req-day-card, req-who - each with its own padding and its own
   idea of a border. They drifted, as separate rules always do, and the page
   ended up with text lying on the background and nothing looking like it
   belonged to anything.

   One card. One masthead. Everything else uses them and says only what is
   genuinely different about itself.
   ───────────────────────────────────────────────────────────────────────── */

/* ── the masthead ────────────────────────────────────────────────────────
   The same on every page: where you are on the left, what it holds on the
   right. A reader should never have to work out which of the two they are
   looking at. */
.req-masthead {
  display: grid; gap: 1.5rem; align-items: end;
  grid-template-columns: 1fr;
  margin: 0 0 2rem; padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--mem-border);
}
@media (min-width: 820px) {
  .req-masthead { grid-template-columns: 1fr auto; }
}
.req-masthead-kicker {
  color: var(--mem-t3); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 .5rem;
}
.req-masthead-title {
  color: var(--mem-t1); font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 400; line-height: 1.2; letter-spacing: -.01em; margin: 0;
}
.req-masthead-sub {
  color: var(--mem-t2); font-size: .95rem; line-height: 1.5;
  margin: .4rem 0 0; max-width: 56ch;
}

/* the stats, as a card of their own - a fixture, not a scatter of numbers on
   the background */
.req-stats {
  display: flex; gap: 0; align-items: stretch;
  background: var(--mem-surface); border: 1px solid var(--mem-border);
}
.req-stat {
  padding: .7rem 1.1rem; text-align: center; min-width: 5.5rem;
  border-right: 1px solid var(--mem-border);
}
.req-stat:last-child { border-right: 0; }
.req-stat-num {
  display: block; color: var(--mem-t1); font-size: 1.35rem; line-height: 1.1;
}
.req-stat-label {
  display: block; color: var(--mem-t3); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; margin-top: .25rem;
}

/* ── the card ────────────────────────────────────────────────────────────
   A surface a step up from the page, a hairline round it, and room inside. A
   card should look like a thing that holds something, not like text that
   happens to be near other text. */
.req-card {
  background: var(--mem-surface);
  border: 1px solid var(--mem-border);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.25rem;
}
.req-card:last-child { margin-bottom: 0; }

/* a card that belongs to a particular day wears that day's colour on its
   spine - set --req-day-accent on the element and it appears */
.req-card--accent { border-left: 3px solid var(--req-day-accent, var(--mem-gold)); }

.req-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin: 0 0 .5rem;
}
.req-card-title {
  color: var(--mem-t1); font-size: 1.02rem; font-weight: 500;
  letter-spacing: .005em; margin: 0;
}
.req-card-n {
  color: var(--mem-t3); font-size: .78rem; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.req-card-note {
  color: var(--mem-t3); font-size: .84rem; line-height: 1.55;
  margin: 0 0 .75rem; max-width: 62ch;
}
.req-card-more {
  display: inline-block; color: var(--mem-gold); font-size: .82rem;
  text-decoration: none; margin-top: .75rem;
}
.req-card-more:hover { color: var(--mem-t1); }

/* ── a wall of faces inside a card ───────────────────────────────────────
   Grey until the mouse is on one, because a wall should read as a wall and a
   person should come forward when somebody looks at them. */
.req-card-faces {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 2px;
}
@media (max-width: 600px) {
  .req-card-faces { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
}
.req-card-faces a { display: block; line-height: 0; }
.req-card-faces img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  filter: grayscale(1); opacity: .62;
  transition: filter .15s ease, opacity .15s ease;
}
.req-card-faces a:hover img { filter: none; opacity: 1; }

/* ── the two-column body ─────────────────────────────────────────────────
   The page's own matter on the left, what relates to it on the right. The rail
   is navigation and relation - never prose, never a duplicate of what the main
   column already says. */
.req-body {
  display: grid; gap: 2rem; grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .req-body { grid-template-columns: minmax(0, 1fr) 20rem; }
  .req-body-rail { position: sticky; top: 5.5rem; }
}
.req-rail-label {
  color: var(--mem-t3); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; margin: 1.5rem 0 .6rem;
}
.req-rail-label:first-child { margin-top: 0; }



/* A face panel carries both req-card-faces and req-faces-grid, and the first

   set display:grid unconditionally - so every tab's wall showed at once and the

   tabs appeared to do nothing. */

.req-card-faces[data-req-faces-panel] { display: none; }

.req-card-faces[data-req-faces-panel].is-on { display: grid; }



/* and the page needs room at its edges */
@media (max-width: 600px) { .req-home, .req-event, .req-roll { padding: 0 1rem; } }