/* home.css - index/home directory, dark flat (.ui) aesthetic. Rail-style numbered rows:
   a mono index + title, a description subheading, and a right-aligned category. */

.ui.home .container { max-width: 840px; }
.ui.home .page-head { margin-bottom: 0; }

.ui.home .project-list { list-style: none; padding: 0; margin: 38px 0 0; border-top: 1px solid var(--hairline); }
.ui.home .project-list li { margin: 0; }

.ui.home .project-row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 18px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit;
}
/* the row is a block link, not an inline text link: keep the hairline divider on hover, not the
   accent underline that .ui a applies. */
.ui.home .project-row:hover { border-bottom: 1px solid var(--hairline); }
.ui.home .project-row:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }

.ui.home .pr-n { font: 500 12px/1.5 var(--font-mono); color: var(--text-muted); transition: color 120ms ease; }
.ui.home .pr-main { min-width: 0; }
.ui.home .pr-title { display: block; font: 600 15px/1.3 var(--font-sans); color: #ededf0; transition: color 120ms ease; }
.ui.home .pr-desc { display: block; font: 400 12.5px/1.55 var(--font-sans); color: var(--text-body); margin-top: 5px; max-width: 66ch; }
.ui.home .pr-cat { font: 600 9px/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); align-self: center; white-space: nowrap; }

.ui.home .project-row:hover .pr-title { color: var(--accent-link); }
.ui.home .project-row:hover .pr-n { color: var(--accent); }

@media (max-width: 600px) {
  .ui.home .project-row { grid-template-columns: 28px 1fr; }
  .ui.home .pr-cat { grid-column: 2; align-self: start; margin-top: 2px; }
}