/* Ink & Pixels — About page (journey timeline + languages). about.css only loads on about.html. */

.page-section { padding-top: var(--space-12); padding-bottom: var(--space-6); }
.page-section h2.sec-title { margin: var(--space-2) 0 0; }

/* journey timeline */
.journey { border-left: var(--border-w) solid var(--stroke); margin-top: var(--space-6); padding-left: var(--space-8); display: grid; gap: var(--space-8); }
.milestone { position: relative; }
.milestone::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-8) - var(--border-w) - 7px); top: 5px;
  width: 12px; height: 12px; background: var(--pixels); border: 2px solid var(--stroke);
}
.milestone .my { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text); letter-spacing: .06em; }
.milestone h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: var(--space-1) 0; line-height: 1.1; }
.milestone p { color: var(--text-secondary); max-width: 64ch; }

/* languages */
.lang-row-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: .08em; margin: var(--space-6) 0 var(--space-3); }
.langs { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lang {
  font-family: var(--font-mono); font-size: var(--text-sm); padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 2px solid var(--stroke); box-shadow: var(--shadow-press);
}
.lang.native { box-shadow: inset 0 -4px 0 var(--pixels), var(--shadow-press); }
.lang .tier { color: var(--text-secondary); font-size: var(--text-xs); margin-left: var(--space-2); }

@media (max-width: 720px) {
  .journey { padding-left: var(--space-6); }
  .milestone::before { left: calc(-1 * var(--space-6) - var(--border-w) - 7px); }
}