/* yurathletics.com/athletes/: the positions hub, and /athletes/<code>/, one page per position. It lives in the
   landing's world (site.css: black ground, the 12px hairline frame, Archivo, silver words, the .draw/.fade motion and its
   reduced-motion rule) and spends its one bold move on the plays: every position on the field is a tile carrying the
   desktop splash's own drawing of that position's play, drawn once when the page opens, in Rim Light, offense, then
   defense, then special teams. The count under each is real; a position with nobody listed says Open. On a position
   page the athlete's photo dissolves into a faint drawing of his assignment, as on the cards before. Everything else
   stays quiet. No ranks, stars, grades or scores. Red never appears. No script. */

.roster-bar {
  max-width: 72rem;
}

.roster {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  margin: 0 auto;
  padding: 56px 24px 24px;
}
.roster-head {
  max-width: 38rem;
}
.roster-head h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.roster-lede {
  margin: 1rem 0 0;
  color: var(--silver);
  font-size: 1.125rem;
  line-height: 1.55;
}
.roster-note {
  margin: 0.625rem 0 0;
  color: var(--steel);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.hub-count {
  margin: 0.875rem 0 0;
  color: var(--silver);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The hub: offense and defense face each other across the page, like the two sides of the ball; special teams sit
   under offense. Each group is three tiles wide. The rule after each heading is the line of its group. */
.hub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "off def" "st def";
  align-items: start;
  gap: 0 48px;
  margin-top: 48px;
}
.g0 {
  grid-area: off;
}
.g1 {
  grid-area: def;
}
.g2 {
  grid-area: st;
}
.pos-group {
  margin-bottom: 40px;
}
.pos-group h2 {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0 0 18px;
  color: var(--silver);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pos-group h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
}
.pos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1023px) {
  .hub {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "off" "def" "st";
  }
}

/* The athlete cards on a position page. */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A position tile: the play on top, the position under it, then its count. Square corners and one hairline, like the
   athlete cards; the whole tile is the link. */
.pos-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--hair);
  background: #000000;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.pos-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  pointer-events: none;
}
.pos-tile .pos-art {
  border-bottom: 1px solid var(--hair);
}
.pos-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 10px;
  padding: 12px 14px 0;
}
.pos-name {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.pos-code {
  color: var(--steel);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pos-count,
.pos-open {
  padding: 4px 14px 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pos-count {
  color: var(--rim);
}
.pos-open {
  color: var(--steel);
  font-weight: 500;
}
.pos-tile:hover,
.pos-tile:focus-visible {
  border-color: rgba(93, 176, 238, 0.5);
}
.pos-tile:focus-visible {
  outline: 2px solid var(--rim);
  outline-offset: 3px;
}

/* The plays draw once: offense, then defense, then special teams; each line keeps the desktop art's own timing. */
.pos-art .draw,
.pos-art .fade {
  animation-delay: calc(var(--s, 0s) + var(--d, 0s));
}
.g1 .pos-art {
  --s: 0.2s;
}
.g2 .pos-art {
  --s: 0.4s;
}
.pos-art .d15 { --d: 0.15s; }
.pos-art .d20 { --d: 0.2s; }
.pos-art .d25 { --d: 0.25s; }
.pos-art .d30 { --d: 0.3s; }
.pos-art .d35 { --d: 0.35s; }
.pos-art .d40 { --d: 0.4s; }
.pos-art .d45 { --d: 0.45s; }
.pos-art .d50 { --d: 0.5s; }
.pos-art .d55 { --d: 0.55s; }
.pos-art .d60 { --d: 0.6s; }
.pos-art .d90 { --d: 0.9s; }
.pos-art .d110 { --d: 1.1s; }
.pos-art .d140 { --d: 1.4s; }
.pos-art .d160 { --d: 1.6s; }

/* A position page: where you are, the position's play, then its athletes or an honest empty state. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  color: var(--steel);
  font-size: 0.9375rem;
}
.crumbs a {
  color: var(--silver);
  text-decoration: underline;
  text-decoration-color: var(--hair);
  text-underline-offset: 4px;
}
.crumbs a:hover {
  text-decoration-color: var(--rim);
}
.crumbs a:focus-visible,
.pos-empty a:focus-visible {
  outline: 2px solid var(--rim);
  outline-offset: 3px;
}
.pos-hero {
  border: 1px solid var(--hair);
  margin-bottom: 32px;
}
.pos-banner {
  aspect-ratio: 2.6 / 1;
}
.pos-cards {
  margin-top: 40px;
}
.pos-empty {
  max-width: 38rem;
  margin-top: 40px;
  padding: 22px 24px;
  border: 1px dashed var(--hair);
}
.pos-empty h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
}
.pos-empty p {
  margin: 0.5rem 0 0;
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.55;
}
.pos-empty a {
  color: var(--silver);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rim);
  text-underline-offset: 4px;
}

/* The card: square corners like the frame, one hairline, no shadow. The whole card is the link (the name's link
   stretches over it), so the photo and the drawing take the visitor to his site too. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 1 360px;
  min-width: 0;
  border: 1px solid var(--hair);
  background: #000000;
  transition: border-color 0.2s ease;
}
.card.s1 {
  --s: 0.15s;
}
.card.s2 {
  --s: 0.3s;
}
.card.s3 {
  --s: 0.45s;
}
.card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 97%);
}
.card-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* The drawing (.assign; site.css's .play is the landing's full-page play): a 2:1 field strip pulled up over the photo's faded lower edge, so the routes run up into the picture
   and the line of scrimmage sits just under it. */
.assign {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  margin-top: -27%;
  opacity: 0.88;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.assign .draw,
.assign .fade {
  animation-delay: calc(var(--s, 0s) + var(--d, 0s));
}
.assign .t1 {
  --d: 0.15s;
}
.assign .t2 {
  --d: 0.3s;
}
.assign .t3 {
  --d: 0.55s;
}
.assign .t4 {
  --d: 0.95s;
}
.assign .t5 {
  --d: 1.45s;
}
.assign .fld {
  fill: none;
  stroke: rgba(228, 228, 231, 0.06);
  stroke-width: 1;
}
.assign .los {
  fill: none;
  stroke: rgba(228, 228, 231, 0.18);
  stroke-width: 1;
}
.assign .rt {
  fill: none;
  stroke: rgba(228, 228, 231, 0.26);
  stroke-width: 1.75;
  stroke-linecap: square;
}
.assign .hd {
  fill: rgba(228, 228, 231, 0.3);
  stroke: none;
}
.assign .pl {
  fill: none;
  stroke: rgba(228, 228, 231, 0.38);
  stroke-width: 1.5;
}
.assign .df {
  fill: none;
  stroke: rgba(228, 228, 231, 0.24);
  stroke-width: 1.5;
}
.assign .ac {
  fill: none;
  stroke: var(--rim);
  stroke-width: 2.25;
  stroke-linecap: round;
}
.assign .ah {
  fill: var(--rim);
  stroke: none;
}
.assign .gl {
  fill: none;
  stroke: rgba(93, 176, 238, 0.2);
  stroke-width: 8;
  stroke-linecap: round;
}
.assign .ps {
  fill: none;
  stroke: #8ec8f3;
  stroke-width: 1.75;
  stroke-dasharray: 5 7;
}
.assign .halo {
  fill: rgba(93, 176, 238, 0.14);
  stroke: none;
}
.assign .me {
  fill: #000000;
  stroke: #ffffff;
  stroke-width: 2.25;
}
.assign .me-x {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.card-copy {
  padding: 2px 20px 22px;
}
.card-name {
  margin: 0;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.card-name a {
  color: inherit;
  text-decoration: none;
}
.card-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.card-name a:focus-visible {
  outline: none;
}
.card-name a:focus-visible::after {
  outline: 2px solid var(--rim);
  outline-offset: 3px;
}
.card-spot {
  margin: 0.375rem 0 0;
  color: var(--silver);
  font-size: 1rem;
  font-weight: 600;
}
.card-facts {
  margin: 0.375rem 0 0;
  color: var(--steel);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.card-url {
  margin: 1rem 0 0;
  color: var(--rim);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  overflow-wrap: anywhere;
}

.card:hover,
.card:focus-within {
  border-color: rgba(93, 176, 238, 0.5);
}
.card:hover .assign,
.card:focus-within .assign {
  opacity: 1;
}
.card:hover .card-url,
.card:focus-within .card-url {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.roster-bar .doc-home:focus-visible,
.roster-bar .doc-nav a:focus-visible {
  outline: 2px solid var(--rim);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .roster {
    padding-top: 40px;
  }
  .hub {
    margin-top: 36px;
  }
  .pos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .pos-label {
    padding: 10px 12px 0;
  }
  .pos-count,
  .pos-open {
    padding: 2px 12px 12px;
  }
  .card-copy {
    padding: 2px 16px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .assign,
  .pos-tile {
    transition: none;
  }
}