/* "Our Asks": numbered list beside a sticky illustration (mirrors the hero split). */

.asks {
  display: grid;
  grid-template-areas:
    "content"
    "media";
  gap: var(--space-7);
  align-items: start;
}

.asks__content {
  grid-area: content;
}

.asks__media {
  grid-area: media;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-md);
}

@media (min-width: 56rem) {
  .asks {
    grid-template-columns: 1fr 1.25fr;
    grid-template-areas: "media content";
  }

  .asks__media {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
  }
}

.reading-body {
  max-width: var(--reading-width);
}

.reading-body p {
  font-size: var(--text-lg);
  line-height: 1.75;
}

.reading-body p:first-child::first-letter {
  float: left;
  padding: 0.3rem 0.6rem 0 0;
  color: var(--primary);
  font-size: 3.25rem;
  font-weight: 650;
  line-height: 0.82;
}

.asks-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: ask;
}

.asks-list li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  counter-increment: ask;
}

.asks-list li::before {
  content: counter(ask, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 0.2em;
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.asks-list p {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}