/* The recruiting board.

   Loads after the network sheet, so its tokens are already defined and this
   file only has to describe the board. Panes rather than flat cards: lit along
   the top edge and dropped onto the page. No backdrop blur -- the page behind
   is flat, so it would cost a compositing layer each to return the tint the
   colour already states. */

.nst-board { padding-top: 30px; }
.nst-board[hidden] { display: none; }

/* No title in here -- the section heading above is the title. Just what the
   columns mean, and the filters. */
.nst-board__head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 18px 0 14px;
}
/* Left, where the strapline used to start -- they are the first thing in the
   head now rather than something pushed to the far end of it. The full-screen
   bar still pushes its row right, since a title sits in front of it there. */
.nst-board__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.nst-board__chip {
  font-family: var(--cond, sans-serif); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; padding: 8px 14px; border-radius: 999px;
  color: var(--muted, #a4a4ac); background: none; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.nst-board__chip:hover { border-color: rgba(255,74,21,.5); color: var(--text, #f4f4f2); }
/* Marked, not filled. A solid orange lozenge is the loudest thing in the
   section and it is only saying which filter is on. */
.nst-board__chip.is-on {
  background: none; border-color: var(--orange, #ff4a15);
  color: var(--orange, #ff4a15); font-weight: 600;
}

/* Five columns, one per stage. The trail runs left to right, so the reader
   moves from the many at the start to the few at the end. */
/* However many stages have somebody in them. A fixed five left a gap where an
   empty column had been dropped; auto-fit lets the rest share the width. */
/* A column of blocks now -- the tallies, then the run -- rather than a row of
   stage columns. The board is one list; this only stacks its two parts. */
.nst-board__cols { display: block; }
.nst-bcol { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.nst-bcol__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 4px 4px;
}
.nst-bcol__name {
  font-family: var(--cond, sans-serif); font-size: 16px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #a4a4ac);
}
.nst-bcol__count { font-family: var(--mono, monospace); font-size: 10px; color: var(--dim, #6d6d76); }
/* The way into the rest of the column, not a label counting at the reader. */
.nst-bcol__more {
  font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .14em;
  color: var(--dim, #6d6d76); padding: 6px 4px 0; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.nst-bcol__more:hover { color: var(--orange, #ff4a15); }

/* Flat. Rounded, outlined and dropped on a shadow, fifteen of these read as a
   wall of tiles; the column is a list of who is where, so the entries separate
   on a hairline and lift nothing. */
.nst-bcard {
  display: block; padding: 12px 2px; min-width: 0;
  background: none; border: 0; border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0; box-shadow: none;
  transition: background .18s ease;
}
.nst-bcard:first-of-type { border-top: 0; }
.nst-bcard:hover { background: rgba(255,255,255,.025); color: inherit; }
.nst-bcard:hover .nst-bcard__name { color: var(--orange, #ff4a15); }

.nst-bcard__who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nst-bcard__face { width: 26px; height: 26px; flex-shrink: 0; }
.nst-bcard__text { min-width: 0; }
.nst-bcard__name {
  display: block; font-family: var(--cond, sans-serif); font-size: 17px;
  font-weight: 700; text-transform: uppercase; line-height: 1.05;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nst-bcard__meta {
  display: block; font-family: var(--mono, monospace); font-size: 8px;
  letter-spacing: .12em; color: #8b8b93; padding-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The school, with the network's mark beside it. */
.nst-bcard__school {
  display: flex; align-items: center; gap: 8px; padding-top: 11px; min-width: 0;
  font-family: var(--cond, sans-serif); font-size: 15px; font-weight: 600;
  text-transform: uppercase;
}
.nst-bcard__school > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nst-bcard__crest { width: 22px; height: 22px; flex-shrink: 0; display: block; }
.nst-bcard__crest svg { width: 100%; height: 100%; display: block; }

.nst-bcard__foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; }
.nst-bcard__when {
  font-family: var(--mono, monospace); font-size: 9px;
  color: #7a7a84; white-space: nowrap;
}
/* What just happened, in green -- the one line on the card that is movement
   rather than state. */
.nst-bcard__move {
  font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .1em;
  color: var(--rise, #5ee6a8); padding-top: 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nst-board__foot { display: flex; justify-content: center; padding-top: 20px; }
.nst-board__open {
  font-family: var(--cond, sans-serif); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; padding: 12px 26px; border-radius: 999px;
  background: none; color: var(--text, #f4f4f2); cursor: pointer;
  border: 1px solid rgba(255,255,255,.16);
  transition: border-color .18s ease, color .18s ease;
}
.nst-board__open:hover { border-color: var(--orange, #ff4a15); color: var(--orange, #ff4a15); }

/* --- the board at full size ---------------------------------------------- */

/* Over the page rather than a page of its own: the data is already here, and a
   reader who closes it should be back where they were in the section. */
.nst-boardfull {
  /* Under the player, not over it. At 96 these sat above the player's 90, so
     opening a clip from the full board or the full feed played it behind the
     overlay it was opened from. */
  position: fixed; inset: 0; z-index: 88; display: flex; flex-direction: column;
  background: var(--ink, #08080a);
}
.nst-boardfull[hidden] { display: none; }
/* Title and the way out on one line, the pills on their own beneath. Wrapping
   them all together put five pills on two rows and pushed the chevron onto a
   third, so the way out of the overlay sat three lines under its own title. */
.nst-boardfull__bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 4px 16px; flex-shrink: 0;
  padding: 16px var(--gutter, 32px); border-bottom: 1px solid var(--line, #1c1c20);
}
/* The pills run across the foot of the head and scroll if there are more than
   fit, rather than growing the head a row at a time. */
/* The row bleeds to both edges of the screen and carries the head's inset as
   its own padding, so the first pill starts flush with the title above it and
   the last one runs off the edge rather than stopping short of it. Inset by
   the padding instead, the scroller began where the first pill already was and
   cut it in half. */
.nst-boardfull__bar .nst-board__filters {
  grid-column: 1 / -1; grid-row: 3; flex-wrap: nowrap; overflow-x: auto;
  margin: 0 calc(var(--gutter, 32px) * -1);
  padding: 8px 0 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
/* Real elements rather than padding at each end. A scroll container's
   padding-left is not part of its scrollable area in every engine, so the first
   pill sat under it and came up already half past the edge. A zero-width item
   with a margin cannot be scrolled under. */
.nst-boardfull__bar .nst-board__filters::before,
.nst-boardfull__bar .nst-board__filters::after {
  content: ""; flex: 0 0 var(--gutter, 32px); align-self: stretch;
}
.nst-boardfull__bar .nst-board__filters::-webkit-scrollbar { display: none; }
.nst-boardfull__bar .nst-board__filters > * { flex-shrink: 0; }
.nst-boardfull__title {
  grid-column: 1; grid-row: 1;
  font-family: var(--cond, sans-serif); font-size: 26px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  /* Stated, so the word's box is the height of the word. Condensed caps carry
     enough leading to sit the title low against a 34px circle beside it. */
  line-height: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Under the title rather than beside it -- measuring an offset off a word set
   in condensed caps is a number that only holds until the word changes. */
.nst-boardfull__sub {
  grid-column: 1; grid-row: 2; justify-self: start;
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .16em;
  color: var(--dim, #6d6d76);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* The way out sits at the end of the head, ahead of the filters in the source
   so a row of pills that wraps cannot push it onto a line of its own. */
.nst-boardfull__close {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; flex-shrink: 0;
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; background: none; cursor: pointer;
  color: var(--muted, #a4a4ac); border: 1px solid rgba(255,255,255,.16);
  transition: border-color .18s ease, color .18s ease;
}
.nst-boardfull__close svg { width: 18px; height: 18px; display: block; }
.nst-boardfull__close:hover { border-color: var(--orange, #ff4a15); color: var(--orange, #ff4a15); }


/* Each column scrolls on its own, so a column of 214 is reachable without
   dragging the other four past the reader. */
/* The whole board, as one scrolling run.

   It was four columns each scrolling on its own, which is what the section
   below is no longer -- the two drew the same data in two different shapes and
   the reader had to learn both. Same rows here, same tallies, just all of them
   rather than the first eight. */
.nst-boardfull__cols {
  flex: 1; min-height: 0; display: block;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #2a2a30 transparent;
  padding: 16px var(--gutter, 32px) 40px;
}
/* The tally row rides with the run, so the counts stay legible while it
   scrolls rather than leaving the screen with the first few rows. */
.nst-boardfull__cols .nst-btally {
  position: sticky; top: 0; z-index: 2;
  background: var(--ink, #08080a);
  padding-bottom: 14px; margin-bottom: 14px;
}
.nst-boardfull__cols .nst-bcol::-webkit-scrollbar { width: 6px; }
.nst-boardfull__cols .nst-bcol::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 999px; }
/* The column head stays put as its cards run under it. */
.nst-boardfull__cols .nst-bcol__head {
  position: sticky; top: 0; z-index: 1; background: var(--ink, #08080a);
  padding: 4px 4px 8px;
}

@media (max-width: 1180px) {
  .nst-boardfull__cols { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .nst-boardfull__cols > .nst-bcol:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nst-boardfull__cols { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 16px 20px; }
  .nst-boardfull__cols > .nst-bcol:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .nst-boardfull__bar { padding: 14px 16px; gap: 10px; }
  /* The bleed has to match the head's inset at this width too, or the pills
     hang 16px off each edge. */
  .nst-boardfull__bar .nst-board__filters { margin: 0 -16px; padding: 8px 0 2px; }
  .nst-boardfull__bar .nst-board__filters::before,
  .nst-boardfull__bar .nst-board__filters::after { flex-basis: 16px; }
  .nst-boardfull__sub { display: none; }
  /* With the count gone the head is one row, so the way out centres on the
     title rather than spanning to a row that is no longer there -- which is
     what dropped it below the word. */
  .nst-boardfull__close { grid-row: 1; }
}

/* Five columns need about 200px each to hold a name and a school. Below that
   the board folds rather than squeezing the cards past reading. */
@media (max-width: 1180px) {
  .nst-board__cols { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  /* Same at three wide: a fourth column on its own takes the full row. */
  .nst-board__cols > .nst-bcol:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nst-board__cols { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* An odd column takes the whole row rather than sitting in the left half with
     a column's worth of black beside it. Three stages in a two-wide grid left
     COMMITTED stranded on its own line looking like a mistake. */
  .nst-board__cols > .nst-bcol:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .nst-board__title { font-size: 24px; }
  .nst-board__sub { display: none; }
  .nst-bcard { padding: 11px 12px; border-radius: 12px; }
  .nst-bcard__name { font-size: 15px; }
}

/* --- the feed ------------------------------------------------------------- */

/* What the athletes wrote, newest first. The table this replaces printed a
   model's summary of each post under a column headed WHAT HAPPENED -- the
   network describing an athlete rather than the athlete speaking. */
/* A column down the middle, not the width of the page. A post is a paragraph
   somebody wrote -- run to 1400px it reads as a database row, and the eye has
   to travel the whole screen to get from the avatar to what they said. */
/* 680px was a reading column, right when Motion was one post above another.
   The grid wants the section's width, so the cap comes off and the head stays
   centred by the page's own gutters. */
.nst-feed { padding-top: 34px; margin: 0 auto; }
.nst-feed[hidden] { display: none; }
.nst-feed__head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 6px; border-bottom: 1px solid var(--line, #1c1c20);
}
.nst-feed__title {
  font-family: var(--cond, sans-serif); font-size: 26px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.nst-feed__sub {
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .18em;
  color: var(--dim, #6d6d76);
}
.nst-feed__filters { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.nst-feed__chip {
  font-family: var(--cond, sans-serif); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; padding: 7px 14px; border-radius: 999px;
  color: var(--muted, #a4a4ac); background: none; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.nst-feed__chip:hover { border-color: rgba(255,74,21,.5); color: var(--text, #f4f4f2); }
/* Marked, not filled. A solid orange lozenge is the loudest thing in the
   section and it is only saying which filter is on. */
.nst-feed__chip.is-on {
  background: none; border-color: var(--orange, #ff4a15);
  color: var(--orange, #ff4a15); font-weight: 600;
}

/* Avatar beside the words, the way a post reads. Separated by a rule rather
   than boxed: a feed is a run of things somebody said, not a stack of cards. */
.nst-post {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px;
  padding: 20px 0; border-top: 1px solid rgba(255,255,255,.10);
}
.nst-post:first-child { border-top: 0; }
.nst-post.is-openable { cursor: pointer; }
.nst-post.is-openable:hover .nst-post__name { color: var(--orange, #ff4a15); }
.nst-post__face { width: 44px; height: 44px; }
.nst-post__body { min-width: 0; }

.nst-post__by { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* The name sits with the handle rather than over it: at 19px uppercase it was
   a headline above a caption, when the caption is the post. */
.nst-post__name {
  font-family: var(--cond, sans-serif); font-size: 16px; font-weight: 700;
  text-transform: uppercase; line-height: 1;
}
.nst-post__handle, .nst-post__when {
  font-family: var(--mono, monospace); font-size: 10px; color: var(--dim, #6d6d76);
}
.nst-post__tag {
  /* Set in grey, not outlined in orange. One tag reads as a label; forty down
     a run of posts reads as forty warnings, and the stage is the least of what
     each post is about. */
  margin-left: auto; font-family: var(--mono, monospace); font-size: 8px;
  letter-spacing: .14em; font-weight: 600; padding: 0;
  color: var(--dim, #6d6d76); border: 0;
}

/* The caption whole. It is the post -- not a headline standing in for it. */
.nst-post__said {
  font-size: 14px; line-height: 1.45; color: #e8e8e6; padding-top: 7px;
  text-wrap: pretty; overflow-wrap: anywhere;
}

.nst-post__school {
  display: flex; align-items: center; gap: 7px; padding-top: 9px; flex-wrap: wrap;
  font-family: var(--cond, sans-serif); font-size: 14px; font-weight: 600;
  text-transform: uppercase;
}
.nst-post__crest { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.nst-post__where { color: var(--muted, #a4a4ac); line-height: 1; }
/* What happened, beside the school -- the one line on a post that is movement
   rather than description, so it is the one thing not set in the page's greys. */
.nst-post__move {
  font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .12em;
  color: var(--rise, #5ee6a8); padding-left: 4px; white-space: nowrap;
}
.nst-post__crest svg { width: 100%; height: 100%; display: block; }

.nst-post__media {
  position: relative; margin-top: 11px; border-radius: var(--r-sm, 4px);
  overflow: hidden; background: var(--hatch); aspect-ratio: 16 / 9;
}
.nst-post__media img, .nst-post__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nst-post__time {
  position: absolute; right: 10px; top: 10px; padding: 2px 6px; border-radius: 3px;
  background: rgba(6,6,10,.86); font-family: var(--mono, monospace); font-size: 10px;
  color: var(--text, #f4f4f2);
}

/* Plays and likes only. Nothing here records who looked or who is tracking, and
   a figure the network cannot produce is worse on an athlete's post than none. */
.nst-post__stats {
  display: flex; gap: 18px; padding-top: 12px;
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .1em;
  color: var(--dim, #6d6d76);
}

.nst-feed__foot { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 18px; }
.nst-feed__open {
  font-family: var(--cond, sans-serif); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; padding: 11px 24px; border-radius: 999px;
  background: none; color: var(--text, #f4f4f2); cursor: pointer;
  border: 1px solid rgba(255,255,255,.16);
  transition: border-color .18s ease, color .18s ease;
}
.nst-feed__open:hover { border-color: var(--orange, #ff4a15); color: var(--orange, #ff4a15); }

/* --- the feed at full size ------------------------------------------------ */

/* Over the page rather than a page of its own, like the board: the posts are
   already loaded, and closing should put the reader back where they were. */
.nst-feedfull {
  /* Under the player, not over it. At 96 these sat above the player's 90, so
     opening a clip from the full board or the full feed played it behind the
     overlay it was opened from. */
  position: fixed; inset: 0; z-index: 88; display: flex; flex-direction: column;
  background: var(--ink, #08080a);
}
.nst-feedfull[hidden] { display: none; }
/* Title and the way out on one line, the pills on their own beneath. Wrapping
   them all together put five pills on two rows and pushed the chevron onto a
   third, so the way out of the overlay sat three lines under its own title. */
.nst-feedfull__bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 4px 16px; flex-shrink: 0;
  padding: 16px var(--gutter, 32px); border-bottom: 1px solid var(--line, #1c1c20);
}
/* The pills run across the foot of the head and scroll if there are more than
   fit, rather than growing the head a row at a time. */
/* The row bleeds to both edges of the screen and carries the head's inset as
   its own padding, so the first pill starts flush with the title above it and
   the last one runs off the edge rather than stopping short of it. Inset by
   the padding instead, the scroller began where the first pill already was and
   cut it in half. */
.nst-feedfull__bar .nst-feed__filters {
  grid-column: 1 / -1; grid-row: 3; flex-wrap: nowrap; overflow-x: auto;
  margin: 0 calc(var(--gutter, 32px) * -1);
  padding: 8px 0 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
/* Real elements rather than padding at each end. A scroll container's
   padding-left is not part of its scrollable area in every engine, so the first
   pill sat under it and came up already half past the edge. A zero-width item
   with a margin cannot be scrolled under. */
.nst-feedfull__bar .nst-feed__filters::before,
.nst-feedfull__bar .nst-feed__filters::after {
  content: ""; flex: 0 0 var(--gutter, 32px); align-self: stretch;
}
.nst-feedfull__bar .nst-feed__filters::-webkit-scrollbar { display: none; }
.nst-feedfull__bar .nst-feed__filters > * { flex-shrink: 0; }
.nst-feedfull__title {
  grid-column: 1; grid-row: 1;
  font-family: var(--cond, sans-serif); font-size: 26px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  /* Stated, so the word's box is the height of the word. Condensed caps carry
     enough leading to sit the title low against a 34px circle beside it. */
  line-height: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Under the title rather than beside it -- measuring an offset off a word set
   in condensed caps is a number that only holds until the word changes. */
.nst-feedfull__sub {
  grid-column: 1; grid-row: 2; justify-self: start;
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .16em;
  color: var(--dim, #6d6d76);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* The way out sits at the end of the head, ahead of the filters in the source
   so a row of pills that wraps cannot push it onto a line of its own. */
.nst-feedfull__close {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; flex-shrink: 0;
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; background: none; cursor: pointer;
  color: var(--muted, #a4a4ac); border: 1px solid rgba(255,255,255,.16);
  transition: border-color .18s ease, color .18s ease;
}
.nst-feedfull__close svg { width: 18px; height: 18px; display: block; }
.nst-feedfull__close:hover { border-color: var(--orange, #ff4a15); color: var(--orange, #ff4a15); }

/* The same column down the middle, scrolling on its own. */
.nst-feedfull__posts {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  width: 100%; max-width: 680px; margin: 0 auto; padding: 0 var(--gutter, 32px) 40px;
  scrollbar-width: thin; scrollbar-color: #2a2a30 transparent;
}
.nst-feedfull__posts::-webkit-scrollbar { width: 6px; }
.nst-feedfull__posts::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 999px; }

@media (max-width: 760px) {
  .nst-feedfull__bar { padding: 14px 16px; gap: 10px; }
  /* The bleed has to match the head's inset at this width too, or the pills
     hang 16px off each edge. */
  .nst-feedfull__bar .nst-feed__filters { margin: 0 -16px; padding: 8px 0 2px; }
  .nst-feedfull__bar .nst-feed__filters::before,
  .nst-feedfull__bar .nst-feed__filters::after { flex-basis: 16px; }
  .nst-feedfull__sub { display: none; }
  /* With the count gone the head is one row, so the way out centres on the
     title rather than spanning to a row that is no longer there -- which is
     what dropped it below the word. */
  .nst-feedfull__close { grid-row: 1; }
  .nst-feedfull__posts { padding: 0 16px 30px; }
}
.nst-feed__more {
  font-family: var(--cond, sans-serif); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; padding: 11px 24px; border-radius: 999px;
  background: none; color: var(--text, #f4f4f2); cursor: pointer;
  border: 1px solid rgba(255,255,255,.16);
}
.nst-feed__more[hidden] { display: none; }
.nst-feed__more:hover { border-color: var(--orange, #ff4a15); color: var(--orange, #ff4a15); }

@media (max-width: 760px) {
  .nst-post { grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 2px; }
  .nst-post__face { width: 34px; height: 34px; }
  .nst-post__name { font-size: 16px; }
  .nst-post__said { font-size: 14px; }
  .nst-feed__sub { display: none; }
  /* Centred on a phone. With the strapline hidden the head is a title and a row
     of pills, and left-aligned they sat against one edge of a column that is
     itself centred -- the block read as pushed over rather than placed. */
  .nst-feed__head { flex-direction: column; align-items: center; gap: 12px; padding-bottom: 12px; }
  /* The auto margin pushes them right beside a title on a wide head; in a
     centred column it would shove them off centre. */
  .nst-feed__filters { margin-left: 0; justify-content: center; }
  .nst-feed__foot { justify-content: center; }
}

/* The board as a run of rows.

   It was four columns of three cards -- a funnel the reader had to hold in
   their head, showing twelve of fifty-six names. One row an athlete reads the
   way a wire does: who, what happened, when, newest first. The stage survives
   as a pill and a coloured left edge, so it is still legible at a glance
   without costing the layout three quarters of its width. */
.nst-btally {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.nst-btally__cell {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-radius: 16px;
  background: var(--pane, #14141a);
  border: 1px solid var(--line, #1c1c20);
  /* The stage's colour, on the edge the eye reaches first. */
  border-top: 3px solid var(--edge-strong, #2f2f36);
}
.nst-btally__cell--offers { border-top-color: var(--orange, #ff4a15); }
.nst-btally__cell--committed { border-top-color: var(--text, #f4f4f2); }
.nst-btally__name {
  font-family: var(--cond, sans-serif); font-size: 19px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text, #f4f4f2);
}
.nst-btally__count {
  font-family: var(--cond, sans-serif); font-size: 30px; font-weight: 700;
  line-height: 1; color: var(--text, #f4f4f2);
}
.nst-btally__cell--offers .nst-btally__count { color: var(--orange, #ff4a15); }

.nst-brun { display: flex; flex-direction: column; gap: 10px; }

.nst-brow {
  display: grid;
  /* Face, name, what happened, then the pill and date. */
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr) 148px;
  align-items: center; gap: 22px;
  padding: 18px 22px; border-radius: 18px;
  background: var(--pane, #14141a);
  border: 1px solid var(--line, #1c1c20);
  border-left: 5px solid var(--edge-strong, #2f2f36);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.nst-brow:hover {
  border-color: var(--orange, #ff4a15);
  border-left-color: var(--orange, #ff4a15);
  transform: translateX(2px);
}
.nst-brow--offers { border-left-color: var(--orange, #ff4a15); }
.nst-brow--committed { border-left-color: var(--text, #f4f4f2); }

/* The name, at the size a name deserves when it is the row's subject. */
.nst-brow .nst-bcard__name {
  font-family: var(--cond, sans-serif); font-size: 27px; font-weight: 700;
  line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  color: var(--text, #f4f4f2);
}
.nst-brow .nst-bcard__meta {
  display: block; padding-top: 5px;
  font-size: 13px; color: var(--muted, #a4a4ac); letter-spacing: .04em;
}
/* The avatar is its own grid column, so the name block beside it must not
   also carry the face -- and with gap:0 the two sat on top of each other. */
.nst-brow .nst-bcard__who {
  display: contents;
}
.nst-brow .nst-bcard__face { width: 56px; height: 56px; border-radius: 16px; flex: 0 0 auto; }
.nst-brow .nst-bcard__text { min-width: 0; }

/* What happened -- the column that earns the width. */
.nst-brow__what {
  font-size: 16px; font-weight: 600; line-height: 1.35;
  color: var(--text, #f4f4f2); min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.nst-brow .nst-bcard__foot {
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  text-align: right;
}
.nst-brow__pill {
  font-family: var(--cond, sans-serif); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--edge, #2a2a30); color: var(--muted, #a4a4ac);
}
.nst-brow__pill--offers { background: var(--orange, #ff4a15); border-color: transparent; color: #0a0a0a; }
/* The committed pill states its own colours rather than taking --text for the
   fill: inside a row the light theme repaints --text to near-black, so the pill
   was black on black and the word vanished. */
.nst-brow__pill--committed { background: #16161a; border-color: transparent; color: #ffffff; }
:root[data-theme="light"] .nst-brow__pill--committed { background: #16161a; color: #ffffff; }
.nst-brow .nst-bcard__when { font-size: 13px; color: var(--label, #8b8b93); }

.nst-brun__more {
  display: block; margin: 18px auto 0; cursor: pointer;
  font-family: var(--cond, sans-serif); font-size: 14px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 32px; border-radius: 999px;
  background: none; border: 1px solid var(--edge, #2a2a30);
  color: var(--muted, #a4a4ac);
  transition: color .16s ease, border-color .16s ease;
}
.nst-brun__more:hover { color: var(--text, #f4f4f2); border-color: var(--edge-strong, #2f2f36); }

@media (max-width: 900px) {
  /* Face, then everything else stacked beside it. Four columns do not fit, and
     the name is the row's subject -- an earlier pass let the headline take its
     grid cell and the name disappeared entirely. */
  .nst-brow {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 6px 14px; padding: 14px 16px;
  }
  /* Every child is placed. The desktop rule unwraps .nst-bcard__who with
     display:contents, so the face and the text block are siblings in this grid
     -- left to flow, they landed in the same cell and the name was crushed to
     zero width behind the headline. */
  .nst-brow .nst-bcard__face { grid-column: 1; grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: 14px; align-self: start; }
  .nst-brow .nst-bcard__text { grid-column: 2; grid-row: 1; min-width: 0; }
  .nst-brow .nst-bcard__name { font-size: 20px; }
  /* The school reads in the meta line on a phone; a column of its own is width
     this layout does not have. */
  .nst-brow .nst-bcard__school { display: none; }
  .nst-brow__what { grid-column: 2; grid-row: 2; font-size: 14px; -webkit-line-clamp: 2; }
  .nst-brow .nst-bcard__foot {
    grid-column: 2; grid-row: 3;
    flex-direction: row; align-items: center; gap: 10px;
    justify-content: flex-start; text-align: left; padding-top: 2px;
  }
}

/* The school sits in its own column, and the row keeps its shape without one.
   Scoped to the wide layout: below 900 the row is two columns and these fixed
   placements put the name and the headline in the same cell, which crushed the
   name to zero width. */
@media (min-width: 901px) {
  .nst-brow__what { grid-column: 3; }
  .nst-brow .nst-bcard__foot { grid-column: 4; }
}


/* A tally is a control, so it looks like one and shows when it is on.

   These were figures to read. Pressing one narrows the run to that stage --
   or, on the last cell, to the athletes that programme is recruiting -- and
   pressing it again gives the whole run back. */
.nst-btally__cell {
  cursor: pointer; text-align: left; font: inherit;
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.nst-btally__cell:hover { transform: translateY(-1px); border-color: var(--edge-strong, #2f2f36); }
/* On: the cell fills with the colour its top edge was carrying, so which one
   is selected is legible without reading. */
.nst-btally__cell.is-on { border-color: var(--text, #f4f4f2); }
.nst-btally__cell--offers.is-on { background: color-mix(in srgb, var(--orange, #ff4a15) 12%, transparent); border-color: var(--orange, #ff4a15); }
.nst-btally__cell--committed.is-on { background: color-mix(in srgb, var(--text, #f4f4f2) 10%, transparent); }
.nst-btally__cell--camps.is-on,
.nst-btally__cell--visits.is-on { background: color-mix(in srgb, var(--text, #f4f4f2) 8%, transparent); }

/* Motion as a grid of standing cards.

   It was one column of full-width posts -- a single 16:9 picture ran nearly
   900px across, so two posts filled a screen and the section read as a page of
   its own rather than a look at what is moving.

   Three across, each card standing rather than lying down: the picture is
   portrait, which is the shape these are shot in anyway, and the words sit
   under it. A screen holds nine instead of two. */
@media (min-width: 901px) {
  /* One row that scrolls sideways, not a grid.

     A grid of nine stacked three deep is a page of its own; the section is a
     look at what is moving, so it shows a row of cards and the rest runs off
     the right edge. Snap, so a card always lands square rather than half on
     screen. */
  .nst-feed__posts {
    /* A fixed card width, not minmax -- minmax(0,300px) let the track shrink
       to share the row out, so six cards squeezed to 216px and nothing ran off
       the edge. At 300 the row is always longer than the section and always
       scrolls. */
    display: grid; grid-auto-flow: column; grid-auto-columns: 300px;
    /* Stretch, not start. Every card carries the same 373px picture, but the
       words under it differ -- some name a school, some carry plays and likes,
       some neither -- so the cards came out anywhere from 487 to 537 tall and
       the row had a ragged foot. Stretched, they all take the tallest one's
       height and the run reads as a row rather than a set of steps. */
    gap: 16px; align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* The run reaches the page's edge rather than stopping at the gutter, so
       the card at the end reads as continuing rather than as the last one. */
    margin: 0 calc(var(--gutter, 32px) * -1);
    padding: 2px var(--gutter, 32px) 18px;
    scrollbar-width: none;
  }
  .nst-feed__posts::-webkit-scrollbar { display: none; }
  .nst-post { scroll-snap-align: start; }
  .nst-post {
    /* A card, not a row in a list: its own surface with an edge, so three of
       them beside each other read as three things. */
    display: flex; flex-direction: column; gap: 0;
    padding: 0; border-top: 0; border-radius: 16px; overflow: hidden;
    background: var(--pane, #14141a);
    border: 1px solid var(--line, #1c1c20);
    transition: border-color .16s ease, transform .16s ease;
  }
  .nst-post:first-child { border-top: 1px solid var(--line, #1c1c20); }
  .nst-post.is-openable:hover { border-color: var(--orange, #ff4a15); transform: translateY(-2px); }

  /* The picture leads, standing. order:-1 lifts it above the body -- the
     media is built inside .nst-post__body, so without this the caption sat on
     top of the card and the picture under it. */
  .nst-post__media {
    order: -1; margin: 0; border-radius: 0;
    aspect-ratio: 4 / 5; width: 100%; flex: 0 0 auto;
  }
  /* The body fills what the picture leaves, so three cards in a row end level
     rather than stepping down with the length of each caption. */
  .nst-post__body { flex: 1 1 auto; }
  .nst-post__by { order: -1; }
  /* The face rides on the picture rather than taking a column of its own --
     at this width a 44px gutter beside 300px of card is a third of the room. */
  /* On the picture, not on the card. Positioned against .nst-post it sat at
     the card's foot, which is over the caption now that the words are below
     the photograph. The media frame is the thing it belongs to. */
  .nst-post__media { position: relative; }
  .nst-post__face {
    position: absolute; left: 12px; bottom: 12px; z-index: 2;
    width: 34px; height: 34px; flex: 0 0 auto;
    border: 2px solid rgba(255,255,255,.9); border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
  .nst-post__body { padding: 14px 16px 16px; min-width: 0; }
  .nst-post__by { gap: 6px; }
  .nst-post__name { font-size: 14px; }
  /* The caption is the post, but on a card it cannot run to nine lines --
     three, and the rest is a click away. */
  .nst-post__said {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 14px; line-height: 1.45;
  }
}

/* The card fills the height the row gives it.

   Stretching the track is only half of it: the card is a flex column, so
   without this its content sits at its natural height and the surface stops
   under the last line. The body takes the slack, which puts every card's
   bottom edge on the same line. */
@media (min-width: 901px) {
  .nst-feed__posts .nst-post { height: 100%; }
  .nst-feed__posts .nst-post__body { flex: 1 1 auto; }
}

/* Motion's full screen: the head stands down the left.

   It was a bar across the top -- the title, the count and five pills on their
   own row, with the run of posts in a single column under it and most of the
   window empty either side. The head goes in that space instead, and the posts
   get the height the bar was taking.

   Only where there is room for it. Below 1100 the head stays a bar. */
@media (min-width: 1100px) {
  .nst-feedfull { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
  .nst-feedfull__bar {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 6px; padding: 26px var(--gutter, 32px);
    border-bottom: 0; border-right: 1px solid var(--line, #1c1c20);
    align-content: start;
  }
  /* The pills stack rather than scroll: a column has the height for them and
     none of the width that made a scroller necessary. */
  .nst-feedfull__bar .nst-feed__filters {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 4px; margin: 14px 0 0; padding: 0;
    overflow: visible; width: 100%;
  }
  .nst-feedfull__bar .nst-feed__filters::before,
  .nst-feedfull__bar .nst-feed__filters::after { content: none; }
  .nst-feedfull__bar .nst-feed__filters > * {
    width: 100%; text-align: left; justify-content: flex-start;
  }
  /* The way out sits at the top of the column, where the eye starts. */
  .nst-feedfull__close { order: -1; align-self: flex-end; margin-bottom: 4px; }
  /* The run keeps its single column, centred in the room the bar left. A card
     grid here collapsed every post to an empty line -- the card is a flex
     column and fights a grid track's sizing -- and that is a rebuild of the
     card, not a change to this head. */
  .nst-feedfull__posts {
    grid-column: 2; grid-row: 1;
    padding-top: 26px;
  }
}

/* --- the recruiting head -------------------------------------------------

   Heading, then what has happened, then the filters -- one row, with the two
   figures pushed to the right of the title and the pills at the far end.

   Both .nst-section__all and .nst-feed__filters carry `margin-left: auto`,
   which is fine while each is the only thing claiming the space and fights
   when they share a row: the first one takes all the slack and the second
   lands hard against it. The gap is stated here instead, and only the filters
   push. */
.nst-section__head--recruit { align-items: center; flex-wrap: wrap; row-gap: 12px; }
.nst-section__head--recruit .nst-section__all { margin-left: 0; }
.nst-section__head--recruit .nst-feed__filters { margin-left: auto; flex-wrap: nowrap; }

@media (max-width: 900px) {
  /* The pills take their own line rather than squeezing the title. Below the
     heading and its figures, still above the first card -- which is the point
     of moving them up here at all. */
  .nst-section__head--recruit { align-items: baseline; }
  .nst-section__head--recruit .nst-feed__filters {
    order: 3; flex-basis: 100%; margin-left: 0;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  .nst-section__head--recruit .nst-feed__filters::-webkit-scrollbar { display: none; }
  .nst-section__head--recruit .nst-feed__chip { flex: 0 0 auto; }
}