/* Home page: white opening statement; the black "Selected works" section slides up over it. Archivo throughout */
body.home-page { background: var(--white); font-family: var(--font-nav); }

/* ---------- Hero: static statement ---------- */
.hero {
  position: sticky;
  top: 56px; /* below the top nav, so the black section glides up over it */
  z-index: 0;
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  max-width: var(--page-max);
  margin: 0 auto;
}
.hero h1 {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(26px, 3.6vw, 60px);
  font-weight: 500;
  line-height: 1.12;
  color: #000;
}

/* ---------- Selected works: black section, same grid as the Projects page ---------- */
.works { position: relative; z-index: 1; background: #000; color: #fff; padding: clamp(40px, 4vw, 56px) 0 40px; min-height: calc(100svh - 58px); display: flex; flex-direction: column; justify-content: center; }
.works > * { width: 100%; max-width: calc(min(994px, (100svh - 245px) * 5 / 3 + 24px) + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.works__title { margin-top: 0; margin-bottom: 32px; font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: 0; margin-bottom: 0; list-style: none; }
@media (max-width: 560px) { .works > * { max-width: none; } }
@media (max-width: 560px) { .grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.card { display: block; text-decoration: none; color: #fff; }
.card__img { aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__img img { transform: scale(1.03); }
.card__caption { margin: 12px 0 0; font-size: calc(12px * var(--fit, 1)); line-height: 1.4; text-align: center; color: #8a8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card[aria-disabled="true"] { cursor: default; }
.card[aria-disabled="true"]:hover .card__img img { transform: none; }

/* Selected works uses the Projects page list; on black, text and rules are white */
.works .plist > li { border-color: #fff; }
.works .proj { color: #fff; }
.works .proj__pill { border-color: #fff; }
.works .proj__tags { color: #a3a3a3; }
.works .plist { container-type: inline-size; column-gap: 24px; row-gap: 20px; }
.works { padding-top: 28px; padding-bottom: 24px; }
.works .works__title { margin-bottom: 20px; }
/* Text scales with the list so short screens still fit both rows in one view */
.works .proj__title { font-size: clamp(15px, 2.52cqi, 25px); margin-top: clamp(8px, 1.3cqi, 13px); }
.works .proj__pill { font-size: clamp(9px, 1.11cqi, 11px); }
.works .proj__tags { font-size: clamp(9px, 1.11cqi, 11px); }
.works .proj { padding: clamp(14px, 2.2cqi, 22px) 0 clamp(16px, 2.4cqi, 24px); gap: clamp(14px, 2.4cqi, 24px); }
@media (max-width: 760px) { .works .proj__title { font-size: 22px; } .works .plist { container-type: normal; } }