/* work.html: page-specific rhythm. Tokens only, no raw font-size/space/radius/colour. */

.page-head{ text-align:left }
.page-head .lbl{ margin-bottom:var(--space-3) }
.page-head h1{ margin-top:var(--space-2) }
.page-head .lead{ margin-top:var(--space-4) }

/* alternate case study: right-aligned label/heading on wide screens for editorial rhythm,
   image and body copy stay left-to-right readable (never mirrored, never a two-col split). */
@media (min-width:820px){
  .work-row--alt .lbl,
  .work-row--alt h3{ text-align:right }
}

/* whole-row link to the case study: block-level anchor, no underline, own focus ring */
.work-row--link{ display:block; text-decoration:none; color:inherit; cursor:pointer }
.work-row--link:hover .tlink,
.work-row--link:focus-visible .tlink{ color:var(--paper) }
.work-row--link:hover .frame img{ opacity:.94 }
.work-row--link .tlink{ margin-top:var(--space-5) }

/* third case study: a narrower, centred frame so the three rows do not repeat the same rhythm */
@media (min-width:820px){
  .work-row--split .frame{ max-width:80%; margin-left:auto; margin-right:auto }
}

.chapter-cta{ margin-top:var(--space-2) }

/* closing call to action IS the finale chapter (2026-09-20): the piece re-forms and stays whole beside the ask, to the
   end of the page. A separate empty finale interlude dissolved the piece just as the CTA arrived. */
.chapter-cta--finale{min-height:100svh; display:flex; align-items:center}
.chapter-cta--finale .column{width:100%}
.chapter-cta--finale h2,.chapter-cta--finale .lead{max-width:22ch}
.chapter-cta--finale .lead{max-width:34ch}
@media (max-width:820px){ .chapter-cta--finale{min-height:88svh; align-items:flex-end; padding-bottom:var(--space-8)} }