/* ==========================================================================
   ComeGame App — comeapps.net
   pages/about.css — about / brand story page
   ========================================================================== */

.story-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.story-grid__aside {
  align-self: start;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
}

.story-grid__aside h3 {
  margin-bottom: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-royal-purple-3);
}

.story-grid__aside dl { display: grid; gap: 0.9rem; }

.story-grid__aside dt {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.story-grid__aside dd {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-primary);
}

.story-grid__aside dd + dt {
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
}

/* Milestone / values timeline variant */
.milestones {
  display: grid;
  gap: var(--grid-gap);
  counter-reset: ms;
}

.milestone {
  position: relative;
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  padding-top: clamp(2.4rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  counter-increment: ms;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.milestone::before {
  content: '0' counter(ms);
  position: absolute;
  top: clamp(1rem, 2vw, 1.4rem);
  left: clamp(1.35rem, 2.6vw, 1.9rem);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.milestone:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.milestone h3 { margin-bottom: 0.5rem; font-size: 1.08rem; }
.milestone p { font-size: var(--fs-sm); }

@media (min-width: 768px) {
  .milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .story-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}