/* /work — the index. One container (.wrap), one opening (.pagehead) and two
   sections: the four films as a grid, then every project as a row. */
@layer components {

  .work-selected > h2,
  .work-all h2 { font-size: var(--t-section); letter-spacing: var(--ls-heading); }
  .work-all .section-head { align-items: baseline; }
  .work-all .intro { margin-top: 0; font-size: var(--t-small); color: var(--ink-2); }

  /* ── the four films ─────────────────────────────────────────────── */
  .work-grid {
    list-style: none; padding: 0; margin-top: var(--s8);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s10) var(--s8);
  }
  .work-card { display: grid; gap: var(--s3); align-content: start; }
  .work-card .flagship-player { margin: 0 0 var(--s2); }
  .work-card .film-surface {
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
    overflow: hidden;
  }
  .work-card video { width: 100%; height: 100%; display: block; object-fit: cover; }
  .work-card h3 { font-size: var(--t-title); letter-spacing: var(--ls-heading); font-weight: 550; }
  .work-card p { color: var(--ink-2); font-size: var(--t-small); line-height: var(--lh-prose); max-width: 34ch; }
  .work-card .arrow { margin-top: var(--s1); }

  /* ── every project ──────────────────────────────────────────────── */
  .work-rows { margin-top: var(--s7); border-top: 1px solid var(--rule); }
  .work-row {
    border-bottom: 1px solid var(--rule);
    transition: background-color var(--d-hover) ease;
  }
  a.work-row,
  .work-row > summary {
    display: grid; align-items: center; gap: var(--s3) var(--s5);
    grid-template-columns: 34px minmax(6ch, 15ch) minmax(0, 1fr) auto 20px;
    padding-block: var(--s4); min-height: 68px;
    color: var(--ink); text-decoration: none;
  }
  .work-row strong { font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.014em; }
  .work-line { color: var(--ink-2); font-size: var(--t-small); }
  .work-arrow { display: inline-flex; color: var(--accent); }
  .work-arrow svg { width: 16px; height: 16px; margin: 0;
    transition: transform var(--d-hover) var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .work-row:hover { background: var(--paper-2);
      box-shadow: -14px 0 0 var(--paper-2), 14px 0 0 var(--paper-2); }
    a.work-row:hover strong { color: var(--accent); }
    a.work-row:hover .work-arrow svg { transform: translateX(3px); }
  }
  .work-row:has(:focus-visible) { background: var(--paper-2);
    box-shadow: -14px 0 0 var(--paper-2), 14px 0 0 var(--paper-2); }

  /* The chevron belongs where the link rows keep their arrow. */
  .work-concept > summary::before { order: 9; margin-inline: auto 3px; color: var(--accent); }
  .work-concept > summary { min-height: 68px; }

  .work-mark { flex: none; width: 34px; height: 34px; border-radius: var(--r-md); }
  img.work-mark { background: var(--paper-3); padding: 4px; }
  .work-initial {
    display: grid; place-items: center;
    border: 1px solid var(--rule); background: var(--paper-2);
    font-size: var(--t-caption); font-weight: 600; color: var(--ink-2);
  }

  .work-plain { padding: 0 0 var(--s6) calc(34px + var(--s5)); display: grid; gap: 0; }
  .work-plain > div {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s2) var(--s5);
    padding-block: var(--s3); border-top: 1px solid var(--rule-soft);
  }
  .work-plain dt { font-size: var(--t-caption); color: var(--graphite); }
  .work-plain dd { margin: 0; color: var(--ink-2); font-size: var(--t-small);
    line-height: var(--lh-prose); max-width: 68ch; }

  @media (max-width: 900px) {
    .work-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  }
  @media (max-width: 720px) {
    a.work-row,
    .work-row > summary {
      grid-template-columns: 34px minmax(0, 1fr) 20px;
      align-items: start; row-gap: var(--s2);
    }
    .work-row strong { align-self: center; }
    .work-line { grid-column: 2; }
    .work-row .chip { grid-column: 2; }
    .work-concept > summary::before { order: 0; grid-column: 3; grid-row: 1; margin: 0; }
    .work-arrow { grid-column: 3; grid-row: 1; }
    .work-plain { padding-left: 0; }
    .work-plain > div { grid-template-columns: minmax(0, 1fr); }
  }
}

.work-foot { margin-top: var(--s8); color: var(--graphite); font-size: var(--t-small); }