/* ---------- Written Work (Figma 387:1143) ----------
   A list of three pieces in the 1196px column: 48px under the intro, 64px
   between pieces. Each piece is a 4:5 page thumbnail in a Signal Orange
   frame, 81px gap, then a Display/M headline, Body/M summary and links. */

.wr-list { display: flex; flex-direction: column; gap: var(--space-xl); }
.cs-intro + .cs-section.wr-list { margin-top: 48px; }

.wr-item {
  display: grid;
  grid-template-columns: 319fr 796fr;
  column-gap: 81px;
  align-items: start;
}

.wr-thumb {
  display: block;
  padding: 3.6px;
  border: 1px solid var(--signal-orange);
}
.cs-section .wr-thumb img { aspect-ratio: 4 / 5; object-fit: cover; }
.cs-section .wr-thumb--top img { object-position: 50% 11%; } /* Figma crop */

.wr-text { display: flex; flex-direction: column; gap: var(--space-sm); }
.wr-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 48px;
  text-transform: uppercase;
}
/* Headline hover: Signal Orange gradient text, same as Next Project */
.wr-title a {
  color: var(--neutral-surface);
  text-decoration: none;
  background: linear-gradient(to bottom, var(--signal-orange), var(--signal-orange-dark));
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 0.2s ease;
}
.wr-title a:hover,
.wr-title a:focus-visible { color: transparent; outline: none; }
.wr-desc { max-width: 750px; margin: 0; font-size: 16px; line-height: 26px; color: var(--neutral-surface); }
.wr-meta { margin: 0; font-size: 16px; line-height: 26px; color: var(--neutral-hairline); }
.wr-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.wr-actions .btn { min-width: 142px; }

@media (max-width: 960px) {
  .wr-item { column-gap: var(--space-lg); }
  .wr-title { font-size: 32px; line-height: 36px; }
}

/* Phones: thumbnail above the text, at 60% width so the headline stays close */
@media (max-width: 640px) {
  .cs-intro + .cs-section.wr-list { margin-top: var(--space-lg); }
  .wr-item { grid-template-columns: 1fr; row-gap: var(--space-md); }
  .wr-thumb { width: 60%; }
  .wr-title { font-size: 28px; line-height: 32px; }
}