.res { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: clamp(30px, 3.4vw, 56px); align-items: start; }
.res__h {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 800;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green-ink);
  margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--hair-strong);
}
.res__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }

.res__item { display: block; text-decoration: none; padding: .85rem 0; border-bottom: 1px solid var(--hair); }
.res__list li:last-child .res__item { border-bottom: 0; }
.res__name {
  display: block; font-family: var(--body); font-weight: 600; font-size: 1.06rem;
  color: var(--ink); line-height: 1.35;
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
  transition: background-size .34s cubic-bezier(.19,1,.22,1), color .2s ease;
  padding-bottom: 2px;
}
.res__item:hover .res__name, .res__item:focus-visible .res__name { background-size: 100% 2px; color: var(--green-ink); }
.res__ext { font-size: .82em; color: var(--secondary); }
.res__desc { display: block; margin-top: .3rem; color: var(--secondary); font-size: .95rem; line-height: 1.5; }
.res__desc b { color: var(--ink); font-weight: 600; }

.res__note { margin-top: clamp(34px, 4vw, 58px); padding-top: clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--hair-strong);
  color: var(--secondary); font-size: .97rem; line-height: 1.6; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) { .res__name { transition: none; } }