/* Mechanics page styles — focused, no duplication of base.css */

.hero {
  padding-block: var(--space-48);
  background: linear-gradient(180deg, rgba(217, 4, 41, 0.06), rgba(0,0,0,0));
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-24);
  align-items: center;
}
.hero__content p { max-width: 60ch; }
.hero__cta { margin-top: var(--space-16); display: flex; gap: var(--space-12); flex-wrap: wrap; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--divider-color); }

/* TOC & search */
.toc__header { display: grid; gap: var(--space-12); align-items: end; }
.toc__search input { max-width: 560px; }
.toc__nav { margin-top: var(--space-12); }
.toc__list { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; padding: 0; }
.toc__link { display: block; padding: 10px 12px; border: 1px solid var(--divider-color); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.toc__link:hover { color: var(--color-accent); border-color: color-mix(in oklab, var(--color-primary) 50%, var(--divider-color)); }
.toc__link.active { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Cards spacing inside sections */
.section .card { display: block; }
.section .card > .grid { margin-top: var(--space-16); }

/* KBD styling for control hints */
kbd {
  background: var(--color-elevated);
  border: 1px solid var(--border-color);
  border-bottom-color: color-mix(in oklab, var(--border-color) 70%, black);
  border-radius: 6px;
  padding: 2px 6px;
  box-shadow: var(--shadow-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
}

/* Images within content */
figure { margin-block: var(--space-12); }
figure img { border-radius: var(--radius-lg); border: 1px solid var(--divider-color); box-shadow: var(--shadow-md); }

/* Responsive */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}