/* NIL Moments of the week.

   The comp's board: a hero at 1.6fr with two stacked beside it, then numbered
   rows. Its own sheet because it is one section and the network sheet already
   runs long.

   The comp is written in inline styles against hatch placeholders. What is
   here draws the same shapes against real posters, which means every frame
   needs a wash under its type -- a photograph is not a flat grey and white
   text on one is unreadable without it. */

.nst-mw {
  /* Wider than the comp's 2px. Its frames butt together as one hard-edged
     slab, which is the look this is moving away from -- rounded corners need
     air around them or the curves read as chips out of a solid block. */
  --mw-seam: 10px;
}

/* --- the podium ----------------------------------------------------------- */

.nst-mw__podium {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--mw-seam);
  padding-top: var(--mw-seam);
}

.nst-mw__side {
  display: flex;
  flex-direction: column;
  gap: var(--mw-seam);
}

.nst-mw__lead,
.nst-mw__second {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* The page's own radius rather than the comp's square corner. Everything
     else here -- the app tiles, the reels, the athlete panel -- is already
     rounded, and a slab of hard 90s in the middle of it read as older than
     the rest of the page rather than as deliberate. */
  border-radius: var(--r, 10px);
  /* The hatch the comp draws stands in until a poster loads, and stays where
     one never does -- a missing image leaves a frame, not a hole. */
  background: repeating-linear-gradient(115deg, #23232e 0 10px, #191922 10px 20px);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Lifts on approach, which is what says a card is a way in rather than a
   picture printed on the page. */
@media (hover: hover) {
  .nst-mw__lead:hover,
  .nst-mw__second:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  }
}

.nst-mw__lead { height: 520px; }
.nst-mw__second { flex: 1; min-height: 0; }

.nst-mw__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark at the foot where the type sits, and a touch at the head so the badge
   holds. The middle is left alone: the photograph is the point.

   Heavier at the foot than the comp draws it. The comp sits on flat hatch;
   these are photographs, and a sunlit field or a white gym wall under the
   byline left it unreadable -- the orange kicker is the smallest type on the
   card and the first to go. It runs to full black at the bottom rather than
   .94, and starts climbing higher up the frame. */
.nst-mw__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6, 6, 10, .62) 0%, #0000 22%, rgba(6, 6, 10, .18) 42%,
                              rgba(6, 6, 10, .82) 74%, rgba(6, 6, 10, .98) 100%);
}
.nst-mw__wash--soft { background: linear-gradient(#0000 42%, rgba(6, 6, 10, .92)); }

.nst-mw__flags {
  position: absolute;
  top: 20px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nst-mw__badge {
  font-family: var(--cond);
  font-size: 15px;
  letter-spacing: .18em;
  font-weight: 700;
  color: #08080a;
  background: var(--orange, #ff4a15);
  padding: 8px 14px;
  /* A pill, like every other chip on the page. */
  border-radius: 999px;
}

.nst-mw__when {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: #a4a4ac;
}

.nst-mw__leadbody {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 26px;
}

.nst-mw__who {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--orange, #ff4a15);
}

.nst-mw__leadline {
  font-family: var(--cond);
  font-size: 62px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: .94;
  padding-top: 10px;
  margin: 0;
  /* Two lines at this size is the comp's shape; a third would push the byline
     off the frame, so a long headline is cut rather than allowed to grow. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nst-mw__story {
  font-size: 18px;
  line-height: 1.5;
  color: #a4a4ac;
  padding-top: 12px;
  margin: 0;
  max-width: 600px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nst-mw__figures {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: #a4a4ac;
}
.nst-mw__fig--play { color: #f4f4f2; }

.nst-mw__seal {
  color: #08080a;
  background: var(--orange, #ff4a15);
  padding: 5px 9px;
  font-weight: 700;
  border-radius: 999px;
}

.nst-mw__rank {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: var(--cond);
  font-size: 13px;
  letter-spacing: .18em;
  font-weight: 700;
  color: #f4f4f2;
  /* Was a hard white box. Softened to a glassy chip: the border at full
     white fought the photograph behind it for attention. */
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(6, 6, 10, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 11px;
  border-radius: 999px;
}

.nst-mw__secondbody {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

.nst-mw__secondline {
  font-family: var(--cond);
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  padding-top: 8px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- the numbered rows ---------------------------------------------------- */

.nst-mw__rows {
  display: flex;
  flex-direction: column;
  padding-top: 14px;
}

.nst-mw__row {
  display: grid;
  grid-template-columns: 78px 300px 1fr 190px;
  gap: 26px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  cursor: pointer;
}

.nst-mw__num {
  font-family: var(--cond);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .17);
}

.nst-mw__frame {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: var(--r-sm, 6px);
  background: repeating-linear-gradient(115deg, #23232e 0 10px, #191922 10px 20px);
}

.nst-mw__clip {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: #f4f4f2;
}

.nst-mw__rowline {
  font-family: var(--cond);
  font-size: 34px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.02;
  padding-top: 6px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nst-mw__note {
  font-size: 15px;
  line-height: 1.5;
  color: #8b8b93;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nst-mw__row:hover .nst-mw__rowline,
.nst-mw__lead:hover .nst-mw__leadline,
.nst-mw__second:hover .nst-mw__secondline { color: var(--orange, #ff4a15); }

/* --- narrower ------------------------------------------------------------- */

@media (max-width: 1180px) {
  .nst-mw__lead { height: 440px; }
  .nst-mw__leadline { font-size: 46px; }
  .nst-mw__row { grid-template-columns: 60px 220px 1fr; }
  /* The context column is the first thing to go: it is the one part of a row
     that repeats what the headline already said. */
  .nst-mw__note { display: none; }
}

@media (max-width: 900px) {
  /* The podium stacks. A 1.6fr hero beside two cards needs the width to mean
     anything -- at this size the hero would be a letterbox and its two
     neighbours a pair of slivers. */
  .nst-mw__podium { grid-template-columns: 1fr; }
  .nst-mw__lead { height: 380px; }
  .nst-mw__second { min-height: 220px; }
  .nst-mw__leadline { font-size: 40px; }
  .nst-mw__story { font-size: 16px; }
  }

@media (max-width: 700px) {
  /* Taller, because everything in it stacks: badge, byline, two lines of
     headline, the story and the figures. At 320 the byline was landing in the
     bright middle of the frame with no wash under it. */
  .nst-mw__lead { height: 400px; }
  .nst-mw__leadline { font-size: 32px; }
  /* Its own scrim rather than a heavier wash over the whole frame -- the
     picture stays a picture and only the type it sits under goes dark. */
  .nst-mw__leadbody {
    padding: 14px 14px 0;
    margin: 0 -14px -14px;
    background: linear-gradient(#0000, rgba(6, 6, 10, .78) 22%, rgba(6, 6, 10, .96));
  }
  .nst-mw__badge { font-size: 12px; padding: 6px 10px; }
  .nst-mw__flags { top: 14px; left: 14px; gap: 8px; }
  .nst-mw__leadbody { left: 16px; right: 16px; bottom: 16px; }
  /* The numeral sits on the frame rather than above it. Stacked, it pushed
     every thumbnail down by its own height and left a ladder of gaps down the
     column; the frames are dark enough at the corner to carry it. */
  .nst-mw__row {
    grid-template-columns: 108px 1fr;
    gap: 14px;
    padding: 14px 0;
    align-items: start;
  }
  .nst-mw__frame { grid-column: 1; grid-row: 1; height: 90px; }
  .nst-mw__num {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    font-size: 20px;
    line-height: 1;
    padding: 6px 8px;
    color: #f4f4f2;
    text-shadow: 0 1px 6px rgba(6, 6, 10, .9);
  }
  .nst-mw__rowbody { grid-column: 2; grid-row: 1; }
  .nst-mw__rowline { font-size: 22px; }
  .nst-mw__secondline { font-size: 24px; }
  }