/* /work — the index. A white cover, the films as a grid, then the other
   studies as poster cards. The films keep their own surface and player;
   everything here is the frame around them. */
@layer components {

  /* ── the cover ──────────────────────────────────────────────────── */
  .work-opening {
    padding-block: clamp(32px, 4vw, 64px) clamp(32px, 4vw, 56px);
    border-bottom: 1px solid var(--rule);
  }
  .work-opening h1 {
    font-size: var(--t-display); font-weight: 550;
    line-height: var(--lh-display, 1.02); letter-spacing: var(--ls-display, -0.035em);
  }
  .work-lede {
    max-width: 52ch; margin-top: clamp(16px, 2vw, 24px);
    font-size: var(--t-lede); line-height: var(--lh-prose); color: var(--ink-2);
    text-wrap: pretty;
  }

  /* One quiet label per section; the films do the talking. */
  .work-label {
    font-family: var(--mono); font-size: var(--t-machine); font-weight: 500;
    letter-spacing: 0.02em; color: var(--graphite);
  }
  .work-meta {
    display: flex; flex-wrap: wrap; gap: 0 var(--s3);
    font-family: var(--mono); font-size: var(--t-machine); letter-spacing: 0.02em;
    color: var(--graphite); font-variant-numeric: tabular-nums;
  }
  .work-meta > span + span::before { content: "·"; margin-right: var(--s3); color: var(--rule-strong); }

  /* ── the films: the first two at full width, then two by two ────── */
  .work-selected { padding-top: clamp(32px, 4vw, 56px); }
  .work-grid {
    list-style: none; padding: 0; margin: var(--s6) 0 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(48px, 6vw, 88px) var(--s8);
  }
  .work-card { display: grid; gap: var(--s5); align-content: start; }
  .work-card:nth-child(-n+2) { grid-column: 1 / -1; }
  .work-card .flagship-player { margin: 0; }
  .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; }

  /* Under each film: the facts, the name, what it does, the way in. */
  .work-caption {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s2) var(--s6); align-items: baseline;
  }
  .work-caption .work-meta { grid-column: 1 / -1; }
  .work-caption h3 {
    grid-column: 1; font-size: var(--t-card); font-weight: 550;
    line-height: var(--lh-tight); letter-spacing: var(--ls-heading, -0.025em);
  }
  .work-caption h3 a { color: inherit; text-decoration: none; }
  .work-caption h3 a:hover { color: var(--accent); }
  .work-summary {
    grid-column: 1; max-width: 58ch;
    font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2);
  }
  .work-more { grid-column: 2; grid-row: 2; white-space: nowrap; padding-block: 11px; margin-block: -11px; }

  /* The full-width pair reads across: name and summary side by side. */
  @media (min-width: 901px) {
    .work-card:nth-child(-n+2) .work-caption {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
    }
    .work-card:nth-child(-n+2) .work-summary { grid-column: 2; grid-row: 2; }
    .work-card:nth-child(-n+2) .work-more { grid-column: 3; }
  }

  /* ── more studies: poster cards ─────────────────────────────────── */
  .work-studies {
    margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(32px, 4vw, 56px);
    border-top: 1px solid var(--rule);
  }
  .work-studies-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s6); }
  .work-studies-head p { font-size: var(--t-small); color: var(--graphite); }
  .work-study-grid {
    list-style: none; padding: 0; margin: var(--s6) 0 0;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s8) var(--s6);
  }
  .work-study-grid > li { grid-column: span 2; }
  .work-study-grid > li:nth-child(-n+2) { grid-column: span 3; }
  .work-study { display: grid; gap: var(--s2); color: var(--ink); text-decoration: none; }
  .work-study-art {
    display: block; overflow: hidden; margin-bottom: var(--s2);
    aspect-ratio: 16 / 10; border: 1px solid var(--rule); border-radius: var(--r-lg);
    background: var(--paper-ink);
  }
  .work-study-art img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--d-arrive) var(--ease-out);
  }
  .work-study strong {
    font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.015em;
    transition: color var(--d-hover) var(--ease-out);
  }
  .work-study-line { font-size: var(--t-small); line-height: var(--lh-body); color: var(--ink-2); max-width: 48ch; }
  @media (hover: hover) and (pointer: fine) {
    .work-study:hover strong { color: var(--accent); }
    .work-study:hover .work-study-art img { transform: scale(1.02); }
  }
  .work-study:focus-visible { outline: none; }
  .work-study:focus-visible .work-study-art { outline: 2px solid var(--accent); outline-offset: 3px; }

  .work-foot {
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s8);
    margin-top: clamp(48px, 6vw, 80px); padding-top: var(--s6); border-top: 1px solid var(--rule-soft);
    font-size: var(--t-small);
  }
  .work-foot .arrow { padding-block: 11px; }

  /* ── narrower screens ───────────────────────────────────────────── */
  @media (max-width: 900px) {
    .work-grid { grid-template-columns: minmax(0, 1fr); }
    .work-study-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .work-study-grid > li, .work-study-grid > li:nth-child(-n+2) { grid-column: span 1; }
  }
  @media (max-width: 560px) {
    .work-caption { grid-template-columns: minmax(0, 1fr); }
    .work-more { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s1); }
    .work-study-grid { grid-template-columns: minmax(0, 1fr); }
  }
}