/* Public work: an expanding index (DESIGN.md "Grids and indexes"). One ruled frame; the rows sit in the
   left column and the open row's figure fills the media panel on the right. On narrow screens the figure
   sits inside the open row. The figure keeps the pixel reveal from work-effects.mjs. */
.work{padding-bottom:80px}
.work-index{position:relative;list-style:none;margin:0;padding:0 58% 0 0;min-height:600px}
.work-row+.work-row{border-top:1px solid var(--rule)}
.work-row h3{margin:0;font:inherit}
.work-row-button{display:grid;grid-template-columns:minmax(0,1fr) 10px;column-gap:20px;row-gap:4px;align-items:center;width:100%;min-height:76px;padding:16px 20px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;transition:background-color .2s ease-out}
@media(hover:hover){.work-row-button:hover{background:var(--hover)}}
.work-row-button:focus-visible{outline-offset:-3px}
.work-row-title{grid-column:1;font:400 var(--step-1)/1.25 var(--font-body);text-wrap:balance}
.work-row-context{grid-column:1;font:400 var(--step--2)/1.4 var(--font-body);color:var(--muted)}
.work-row-mark{grid-column:2;grid-row:1/3;width:10px;height:10px;border:1px solid var(--ink)}
.work-row.is-active .work-row-mark{background:var(--ink)}
.work-row-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1)}
.work-row.is-active .work-row-body{grid-template-rows:1fr}
.work-row-clip{min-height:0;overflow:hidden}
.work-row-copy{display:grid;gap:14px;justify-items:start;padding:4px 50px 28px 20px}
.work-row-copy p{margin:0;max-width:52ch;font-size:var(--step--1);line-height:1.6;color:var(--muted)}
.work-row-copy .finding{order:-1;color:var(--ink);font-size:var(--step-0)}
.work-row-copy .finding strong{display:block;margin-bottom:10px;font:450 var(--step-2)/1.2 var(--font-heading);text-wrap:balance}
.work-row-copy [data-slot=button]{margin:-6px 0 -10px}
.work-row figure{position:absolute;top:0;right:0;bottom:0;left:42%;margin:0;border-left:1px solid var(--rule);background:#fff;opacity:0;pointer-events:none;transition:opacity .32s ease-out}
.work-row.is-active figure{opacity:1;pointer-events:auto}
.evidence-card__media{position:relative;width:100%;height:100%;overflow:hidden}
.evidence-card__image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.work-row .activity-chart{position:absolute;inset:0}
.evidence-card__pixel-reveal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;image-rendering:pixelated}
.work-row:not(.is-active) .evidence-card__pixel-reveal{visibility:hidden}

@media(max-width:900px){
  .work-index{padding:0;min-height:0}
  .work-row-copy{padding-right:20px}
  .work-row figure{position:static;margin:0 20px 24px;border:0;opacity:1;transition:none}
  .work-row .evidence-card__media{height:auto;aspect-ratio:var(--media-ratio,1.6)}
  .work-row .is-activity .evidence-card__media{aspect-ratio:900/460}
}
@media(max-width:600px){.work-row .is-activity .evidence-card__media{aspect-ratio:390/320}}
@media(max-width:760px){.work-row-button,.work-row-copy{padding-inline:16px}.work-row-copy{padding-right:16px}.work-row figure{margin-inline:16px}}
@media(prefers-reduced-motion:reduce){.evidence-card__pixel-reveal{display:none}}