/* About — builds on theme.css (.card, section, headings). Everything snaps to the 8px unit;
   the pixel is 4px, matching the theme's border and shadow. */
#about .about-title { font-family: var(--font-mono); font-size: 24px; line-height: 40px; margin: 0 0 16px; }

/* Dithered rule: a 4px checkerboard, hard stops only. */
#about .about-dither {
  height: 8px;
  margin-bottom: 32px;
  background-color: var(--bg);
  background-image: repeating-conic-gradient(#29366F 0% 25%, #1A1C2C 0% 50%);
  background-size: 8px 8px;
  image-rendering: pixelated;
}

#about .about-intro { margin: 0 0 32px; }

#about .about-rules {
  list-style: none;
  margin: 0 0 64px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
#about .about-rule { max-width: none; }
#about .about-rule h3 { font-size: 24px; line-height: 32px; margin: 0 0 16px; }
#about .about-rule p { margin: 0; }

/* Bitmap type for short labels only. Yellow clears 4.5:1 on both --bg and --surface. */
#about .about-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
  color: #FFCD75;
  margin: 0 0 16px;
}

#about .about-stack { display: grid; gap: 16px; }
#about .about-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
#about .about-chips li {
  background: var(--surface);
  color: var(--fg);
  padding: 8px 16px;
  box-shadow: 4px 4px 0 #29366F;
}

@media (max-width: 720px) {
  #about .about-rules { grid-template-columns: minmax(0, 1fr); }
}