.home-masthead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem; padding-block: 3rem; border-bottom: 3px double var(--ui-brass); }
.home-masthead h1 { font-size: clamp(2.5rem, 4vw, 3.5rem); }
.home-masthead .flavor { margin-top: .5rem; font-size: 1.2rem; color: var(--ui-muted); }
.home-masthead img { width: 88px; height: 88px; }
/* Quick start: the masthead's own row of things to do. */
.home-tasks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; }
.home-tasks__lead { font: italic 1.25rem/1.2 var(--ui-font-display); }
.home-tasks ul { display: flex; flex-wrap: wrap; gap: .5rem; }
/* What this browser last worked on. The whole card is the link. */
.home-resume__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.home-resume__list { display: flex; flex-wrap: wrap; gap: .75rem; }
.home-resume__item { position: relative; flex: 1 1 15rem; max-width: 24rem; padding: 1rem; }
.home-resume__item:hover { border-color: var(--ui-line-strong); }
.home-resume__item .paper__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 1.1875rem; overflow-wrap: anywhere; }
.home-resume__item a { color: inherit; text-decoration: none; }
.home-resume__item a::after { content: ""; position: absolute; inset: 0; }
.home-resume__facts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .375rem; color: var(--ui-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.home-group + .home-group { margin-top: 2.5rem; }
/* Three tools to a group: one row once three cards fit. */
@media (min-width: 52rem) { .home-group .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-preview { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 9rem; margin-bottom: 1rem; padding: .875rem; background: var(--ui-inset); border: 1px solid var(--ui-line); overflow: hidden; }
.tool-preview__caption { color: var(--ui-muted); font-size: .7rem; }
.tool-preview__name { font: 700 1.25rem/1.25 var(--ui-font-display); margin-block: .35rem; }
.tool-preview__flavor { font-family: var(--ui-font-display); font-style: italic; font-size: .95rem; line-height: 1.4; }
.tool-preview__stats { display: flex; gap: 1.5rem; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.tool-preview__stats dt { font-size: .65rem; text-transform: uppercase; color: var(--ui-muted); }
.tool-preview__stats dd { font-weight: 700; }
.tool-preview__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.tool-preview:has(img) { padding: 0; }
.tool-preview img { width: 100%; height: 9rem; object-fit: cover; object-position: center 35%; }
.tool-preview__art-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: .35rem .65rem; background: var(--ui-card); color: var(--ui-muted); }
@media (max-width: 48rem) {
  .home-masthead { grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; padding-block: 1.75rem; }
  .home-masthead img { width: 64px; height: 64px; }
  .home-masthead .eyebrow { font-size: .6rem; }
  .home-masthead .flavor { font-size: 1rem; }
  .home-tasks__lead { flex-basis: 100%; font-size: 1.125rem; }
  .home-resume__item { max-width: none; }
}