/* The comparison index: its own, tighter rhythm — it is a working page, not
   one of the six. */
.idx { --section-gap: clamp(2.5rem, 6vw, 4.5rem); }
.idx .st-hero { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.idx-grid { display: grid; gap: var(--space-28); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.idx-item { --fill: var(--surface); display: flex; flex-direction: column; }
.idx-item.is-near { --line: var(--accent-a40); }
.idx-thumb { display: block; border-bottom: var(--line-w) solid var(--border-2); }
.idx-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; filter: saturate(0.8); transition: filter var(--dur-base) ease; }
.idx-item:hover .idx-thumb img { filter: none; }
.idx-body { padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-8); }
.idx-body h3 { font-family: var(--font-mono); font-size: var(--text-lg); }
.idx-body h3 a { color: var(--text); }
.idx-body p { color: var(--text-dim); margin: 0; }
.idx-tools { display: flex; flex-wrap: wrap; gap: var(--space-10); margin: var(--space-16) 0; }
.idx-tools a { display: inline-block; padding: var(--space-6) var(--space-12); border: var(--line-w) solid var(--border-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); }
.idx-tools a:hover { border-color: var(--accent); }
.idx-more { display: flex; gap: var(--space-20); }