/* Work index, scoped to .work-index. Approved 20 October 2026 on the design canvas.
   Equal-weight two-column tiles. Under each image: client and project type only.
   Headline, summary and (for prior work) Patrick's credit sit over the image and
   appear on hover or keyboard focus, but only for fine pointers at 1100px and up.
   Everywhere else (touch, tablets, phones) that text stays visible beneath the
   image, so nothing depends on hover. Prior work is introduced by its own section
   headline; the closing invitation fills the sixth grid cell. */

.work-index { padding-bottom: var(--space-9); }
.work-index .wi-studio { padding-top: var(--space-6); }

.work-index .wi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-7); }

/* Intro cell: stretches to the height of the tile beside it on two columns,
   and sizes to its content when the grid stacks. */
.work-index .wi-intro { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2rem, 4vw, 3rem); min-width: 0; }
.work-index .wi-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3.25rem, 6.4vw, 6rem); line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; }
.work-index .wi-intro__foot { display: flex; flex-direction: column; gap: var(--space-4); }
.work-index .wi-lede { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.4; max-width: 30ch; }
.work-index .section-label { font: 500 0.875rem/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); }

/* Tiles. Mobile-first: media, then client/type, then headline and summary. */
.work-index .tile { position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.work-index .tile__media { display: contents; }
.work-index .tile__img { order: 1; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-frame); background: var(--ink); }
.work-index .tile__img picture { position: absolute; inset: 0; display: block; }
.work-index .tile__img img { width: 100%; height: 100%; object-fit: cover; }
.work-index .tile__meta { order: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--space-3); }
.work-index .tile__client { font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.2 var(--font-serif); }
.work-index .tile__type { font: 500 0.875rem/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.work-index .tile__over { order: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.work-index .tile__title { font: 400 clamp(1.625rem, 2.3vw, 2.125rem)/1.1 var(--font-serif); letter-spacing: -0.01em; max-width: 24ch; }
.work-index .tile__link { color: inherit; text-decoration: none; }
.work-index .tile__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-frame); }
.work-index .tile__line { font-size: 1.125rem; line-height: 1.5; max-width: 44ch; }
.work-index .tile__credit { font-size: 0.875rem; line-height: 1.45; color: var(--graphite); max-width: 50ch; }
.work-index .tile__cue { display: none; }
.work-index .tile:has(.tile__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-frame); }
.work-index .tile__link:focus-visible { outline: none; }
.work-index .tile:active .tile__link { color: var(--red-press); }
@media (hover: hover) and (pointer: fine) { .work-index .tile:hover .tile__link { color: var(--red-press); } }

/* Rollover: fine pointers, wide screens. The panel fades (opacity only), so the
   transition reverses from wherever it is if the pointer leaves mid-fade. */
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .work-index .tile__media { display: block; position: relative; order: 1; }
  .work-index .tile__over { position: absolute; inset: 0; justify-content: flex-end; padding: clamp(1.25rem, 2.4vw, 2.25rem); border-radius: var(--radius-frame); background: color-mix(in srgb, var(--ink) 96%, transparent); color: var(--paper); opacity: 0; transition: opacity 200ms ease-out; }
  .work-index .tile:hover .tile__over,
  .work-index .tile:has(.tile__link:focus-visible) .tile__over { opacity: 1; }
  .work-index .tile:hover .tile__link { color: var(--paper); }
  .work-index .tile:active .tile__link { color: var(--red-on-ink); }
  .work-index .tile__line { font-size: 1.0625rem; color: var(--paper); }
  .work-index .tile__credit { color: var(--paper-muted); }
  .work-index .tile__cue { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 1rem; font-weight: 500; line-height: 1.3; }
  .work-index .tile__cue-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) { .work-index .tile__over { transition-duration: 120ms; } }

/* Prior work: its own section headline, no rule; whitespace does the separating. */
.work-index .wi-prior { margin-top: var(--space-9); }
.work-index .wi-prior__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3) var(--space-7); margin-bottom: var(--space-6); }
.work-index .wi-prior__title { flex: 999 1 32rem; min-width: 0; }
.work-index .wi-prior__intro { flex: 1 1 16rem; max-width: 32ch; color: var(--graphite); }

/* Invitation in the sixth cell: an ink tile the same shape as the images. */
.work-index .wi-invite { align-self: start; aspect-ratio: 3 / 2; min-width: 0; border-radius: var(--radius-frame); padding: clamp(1.5rem, 3vw, 2.75rem); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); }
.work-index .wi-invite__line { font: 400 clamp(2rem, 3.2vw, 2.875rem)/1.06 var(--font-serif); letter-spacing: -0.015em; max-width: 13em; text-wrap: balance; }
.work-index .wi-invite__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
/* On ink the primary button is paper with ink text (design system). */
.work-index .wi-invite__btn { background: var(--paper); color: var(--ink); }
.work-index .wi-invite__btn:active { background: var(--paper); color: var(--indigo); }
@media (hover: hover) and (pointer: fine) { .work-index .wi-invite__btn:hover { background: var(--paper); color: var(--indigo); } }

/* Below the rollover breakpoint the tile beside the intro also carries its text,
   so the row is tall: keep the intro's lines together instead of spreading them. */
@media (max-width: 1099px) {
  .work-index .wi-intro { justify-content: flex-start; }
}
@media (max-width: 899px) {
  .work-index { padding-bottom: var(--space-8); }
  .work-index .wi-studio { padding-top: var(--space-5); }
  .work-index .wi-grid { row-gap: var(--space-6); }
  .work-index .wi-prior { margin-top: var(--space-8); }
  .work-index .wi-prior__head { margin-bottom: var(--space-5); }
}
@media (max-width: 759px) {
  .work-index .wi-grid { grid-template-columns: minmax(0, 1fr); }
  .work-index .wi-invite { aspect-ratio: auto; }
  .work-index .wi-invite__actions { flex-direction: column; align-items: stretch; }
  .work-index .wi-invite__btn { width: 100%; }
}