/* Newsroom-density refinements introduced in v0.4.0. */
.lead-copy h1 {
  max-width: 980px;
  font-size: clamp(3rem, 4.15vw, 4.65rem);
  line-height: 1.025;
  text-wrap: balance;
}

.lead-copy p {
  max-width: 760px;
  font-size: clamp(1.1rem, 1.55vw, 1.5rem);
}

.lead-media { inset: 225px 20px 0 0; }
.lead-media img { object-position: center 54%; mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }

.section-pad {
  padding-top: clamp(3.3rem, 5.2vw, 5.4rem);
  padding-bottom: clamp(3.3rem, 5.2vw, 5.4rem);
}

.top-stories {
  padding: 1.2rem 0 1.6rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.top-stories > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.top-stories > header > a { color: var(--gold); font-size: .78rem; }

.top-story-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.top-story {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.top-story > a {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .8rem;
  min-height: 205px;
  padding: 1.25rem;
  transition: background .2s ease;
}

.top-story > a:hover { background: #071524; }
.story-number { color: var(--cyan); font-size: 1.35rem; font-weight: 300; }
.top-story h2 { margin: .6rem 0; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.025em; }
.top-story-main h2 { font-size: 1.65rem; }
.top-story p { margin: .5rem 0 1rem; color: var(--muted); font-size: .86rem; }
.top-story small { color: var(--gold); }

.eight-grid a { --signal: var(--cyan); }
.eight-grid b,
.eight-grid span { color: var(--signal); }
.eight-grid a:nth-child(1) { --signal: #7b6cff; }
.eight-grid a:nth-child(2) { --signal: #13c7d8; }
.eight-grid a:nth-child(3) { --signal: #20c96b; }
.eight-grid a:nth-child(4) { --signal: #2ecfc2; }
.eight-grid a:nth-child(5) { --signal: #f1b63d; }
.eight-grid a:nth-child(6) { --signal: #ff7c24; }
.eight-grid a:nth-child(7) { --signal: #ff4d55; }
.eight-grid a:nth-child(8) { --signal: #a878ff; }

@media (max-width: 1050px) {
  .top-story-grid { grid-template-columns: 1fr 1fr; }
  .top-story-main { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .lead-media { inset: 260px 0 0; }
  .top-story-grid { grid-template-columns: 1fr; }
  .top-story-main { grid-column: auto; }
  .top-story > a { min-height: 180px; }
}

/* Popular Now: recognizable profiles without depending on third-party logo files. */
.apps-ribbon,
.signals {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.apps-ribbon::before,
.signals::before {
  position: absolute;
  right: 3vw;
  top: -3rem;
  z-index: -1;
  color: rgba(255, 255, 255, .018);
  font-size: clamp(16rem, 28vw, 32rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.1em;
  content: "08";
  pointer-events: none;
}

.apps-ribbon::after {
  position: absolute;
  inset: 22% 35% auto 10%;
  z-index: -1;
  height: 260px;
  background: radial-gradient(ellipse, rgba(19, 199, 216, .07), transparent 68%);
  content: "";
  pointer-events: none;
}

.app-grid { background: rgba(2, 9, 22, .52); }

.app-card {
  --app-color: var(--cyan);
  position: relative;
  grid-template-columns: 30px 52px 1fr;
  min-height: 142px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(8, 23, 39, .62), rgba(2, 9, 22, .88));
}

.app-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--app-color);
  box-shadow: 0 0 18px var(--app-color);
  content: "";
  opacity: .62;
}

.app-card::after {
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--app-color) 15%, transparent), transparent 68%);
  content: "";
  opacity: 0;
  transition: opacity .25s ease;
}

.app-card:hover {
  border-color: color-mix(in srgb, var(--app-color) 35%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--app-color) 7%, #081727), #07111e);
}

.app-card:hover::after { opacity: 1; }
.app-card > b { color: var(--app-color); font-size: .8rem; }

.app-glyph {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--app-color) 55%, #273342);
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--app-color) 22%, #0a1522), #07111d);
  color: var(--ivory);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--app-color) 10%, transparent), 0 0 16px color-mix(in srgb, var(--app-color) 12%, transparent);
  font-size: 1.25rem;
  font-weight: 720;
}

.app-copy { position: relative; z-index: 1; font-size: 1.08rem; font-weight: 650; }
.app-copy small { display: block; margin-top: .28rem; color: #9eafc0; font-size: .7rem; font-weight: 400; }
.app-copy em { display: block; margin-top: .8rem; color: var(--app-color); font-size: .68rem; font-style: normal; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.app-card:nth-child(1) { --app-color: #20c96b; }
.app-card:nth-child(2) { --app-color: #6e8cff; }
.app-card:nth-child(3) { --app-color: #9c66f4; }
.app-card:nth-child(4) { --app-color: #f5f0e7; }
.app-card:nth-child(5) { --app-color: #d98b6e; }
.app-card:nth-child(6) { --app-color: #2ecfc2; }
.app-card:nth-child(7) { --app-color: #aab4c2; }
.app-card:nth-child(8) { --app-color: #4b8cff; }

/* Today's Eight: eight different signals on one coherent intelligence grid. */
.signals::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(34, 58, 79, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 58, 79, .09) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
  content: "";
  pointer-events: none;
}

.eight-grid a {
  position: relative;
  min-height: 235px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(7, 20, 34, .84), rgba(2, 9, 22, .9));
}

.signal-rail {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--signal), transparent 78%);
  box-shadow: 0 0 18px var(--signal);
  opacity: .75;
  text-decoration: none;
}

.eight-grid a::after {
  position: absolute;
  right: -65px;
  top: -65px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal) 13%, transparent), transparent 68%);
  content: "";
  opacity: .4;
  transition: opacity .25s ease, transform .25s ease;
}

.eight-grid a:hover::after { opacity: .9; transform: scale(1.12); }
.eight-grid h3 { position: relative; z-index: 1; max-width: 290px; font-size: 1.08rem; }
.eight-grid small { margin-top: auto; color: #8595a6; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.eight-grid i { margin-top: .35rem; color: var(--signal); }

@media (max-width: 760px) {
  .app-card { grid-template-columns: 30px 48px 1fr; }
  .app-glyph { width: 42px; height: 42px; }
  .eight-grid a { min-height: 195px; }
}