.home-mark,
.back-link { color: inherit; text-decoration: none; }
.home-mark:focus-visible,
.back-link:focus-visible,
.work-row:focus-visible,
.list-ending a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.back-link { border-bottom: 1px solid currentColor; padding-bottom: 5px; transition: opacity .2s ease; }
.back-link:hover { opacity: .58; }

.works-layout {
  display: grid;
  grid-template-columns: 1.28fr 3fr;
  height: calc(100vh - 148px - clamp(24px, 2.8vw, 44px));
  height: calc(100dvh - 148px - clamp(24px, 2.8vw, 44px));
  min-height: 0;
  margin: 0 clamp(24px, 2.8vw, 46px);
  border-right: 1px solid var(--rule);
}
.works-intro {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--rule);
  padding-right: clamp(20px, 2.3vw, 40px);
}
.works-headline { margin: auto 0; }
.works-headline .lead-in { margin-bottom: 14px; }
.works-headline h1 { font-size: clamp(3.7rem, 6.4vw, 7rem); line-height: 1.05; }
.works-intro .bottom-note { margin-bottom: 25px; }

.works-list {
  display: grid;
  grid-template-rows: 60px repeat(2, minmax(0, 1fr)) 60px;
  min-width: 0;
  border-left: 1px solid var(--rule);
}
.list-heading,
.list-ending,
.work-number {
  font-family: "Courier New", monospace;
  font-size: .69rem;
  letter-spacing: .12em;
}
.list-heading,
.list-ending { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(22px, 2.7vw, 46px); }
.list-heading { align-items: flex-start; padding-top: 9px; }
.list-ending { border-top: 1px solid var(--rule); }
.list-ending a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; white-space: nowrap; transition: opacity .2s ease; }
.list-ending a:hover { opacity: .58; }

.work-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1.15fr) minmax(0, .85fr) 28px;
  align-items: center;
  gap: clamp(10px, 1.6vw, 28px);
  min-width: 0;
  border-top: 1px solid var(--rule);
  padding: 10px clamp(22px, 2.7vw, 46px);
  color: inherit;
  text-decoration: none;
  transition: background .25s ease;
}
.work-row:hover,
.work-row:focus-visible { background: rgba(248, 251, 228, .26); }
.work-number { align-self: start; padding-top: 13px; }
.work-title { font: 300 clamp(1.8rem, 3vw, 3.45rem)/1.02 Georgia, "Songti SC", serif; letter-spacing: -.065em; }
.work-description { max-width: 25ch; font-size: clamp(.81rem, .95vw, .98rem); line-height: 1.55; }
.work-arrow { justify-self: end; font: 300 1.65rem/1 Georgia, serif; transition: transform .25s ease; }
.work-row:hover .work-arrow { transform: translate(3px, -3px); }

@media (max-width: 1000px) {
  .works-layout { height: auto; grid-template-columns: 1fr; }
  .works-intro { min-height: 340px; padding-left: 24px; }
  .works-list { grid-template-rows: 60px repeat(2, minmax(160px, auto)) 60px; border-top: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  .works-layout { margin: 0 22px; }
  .works-intro { min-height: 290px; padding: 24px 20px 0; }
  .works-headline h1 { font-size: clamp(3.5rem, 14vw, 5.5rem); }
  .works-intro .bottom-note { margin-bottom: 24px; }
  .works-list { grid-template-rows: 56px repeat(2, auto) 72px; }
  .list-heading,
  .list-ending { padding-left: 20px; padding-right: 20px; }
  .list-ending { font-size: .6rem; letter-spacing: .06em; }
  .work-row { grid-template-columns: 30px minmax(0, 1fr) 24px; grid-template-rows: auto auto; gap: 12px; min-height: 156px; padding: 22px 20px; }
  .work-number { grid-column: 1; grid-row: 1 / 3; padding-top: 9px; }
  .work-title { grid-column: 2; grid-row: 1; font-size: clamp(2rem, 9vw, 3rem); }
  .work-description { grid-column: 2; grid-row: 2; max-width: 30ch; }
  .work-arrow { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 380px) {
  .list-ending { align-items: flex-start; flex-direction: column; justify-content: center; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-link,
  .list-ending a,
  .work-row,
  .work-arrow { transition: none; }
}