/* altpunk v3, /work/<id>: one work, skinned by its first family. Tokens only. */
.work { padding-block: var(--space-6) var(--space-8); }

.work__crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-6); padding: 0; list-style: none; font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.work__crumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: .5; }
.work__crumbs a { color: inherit; text-decoration: none; }
.work__crumbs a:hover { color: var(--accent); }
.work__crumbs [aria-current] { color: var(--head); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.work__grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .work__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); } }

/* cover: the image, else the SVG, else the card gradient seeded from the work */
.work__cover {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5;
  display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-4);
  border: var(--frame-border); border-radius: var(--r-frame, var(--r)); clip-path: var(--shape);
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at var(--cx, 80%) var(--cy, 20%), color-mix(in srgb, var(--second) 55%, transparent), transparent 55%),
    linear-gradient(var(--ca, 135deg), color-mix(in srgb, var(--accent) 70%, var(--bg)), var(--bg-2) 85%);
  box-shadow: var(--glow);
}
@media (max-width: 899px) { .work__cover { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) { .work__cover { position: sticky; top: calc(var(--header-h) + var(--space-5)); } }
.work__cover::before {
  content: attr(data-year);
  position: absolute; right: -.06em; bottom: -.2em; z-index: -1;
  font: var(--h-weight) clamp(5rem, 22vw, 12rem)/1 var(--font-display);
  letter-spacing: -.04em;
  color: color-mix(in srgb, var(--head) 22%, transparent);
}
.work__cover img, .work__svg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.work__cover img { object-fit: cover; object-position: 50% 30%; filter: var(--img-filter, none); }
.work__cover--img::before { display: none; }
.work__cover--img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--bg) 75%, transparent)); pointer-events: none; }
/* the work's own cover or poster: shown whole, in its own colours, on the seeded backdrop */
.work__cover--art { aspect-ratio: 2 / 3; }
@media (max-width: 899px) { .work__cover--art { aspect-ratio: auto; height: min(70svh, 34rem); } }
.work__cover--art img { object-fit: contain; filter: none; padding: var(--space-4); }
.work__cover--art::after { display: none; }
.work__svg { display: grid; place-items: center; padding: var(--space-6); color: var(--accent); background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.work__svg svg { width: 100%; height: 100%; }
.work__cover--svg::before { display: none; }
.work__credit { position: absolute; top: 0; right: 0; max-width: 90%; padding: 2px var(--space-2); font: 400 10px/1.3 var(--font-mono); color: var(--ink-dim); background: color-mix(in srgb, var(--bg) 75%, transparent); }

.work__text { min-width: 0; text-align: var(--align); container-type: inline-size; }
.work__text .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.work__text .eyebrow a:hover { color: var(--accent); border-color: var(--accent); }
/* one long word must fit its column: the size follows the column, words never split */
.work__title { font-size: min(var(--step-5), 6rem, 11cqi); overflow-wrap: break-word; }
.work__by { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: var(--justify); margin: var(--space-4) 0 0; font-size: var(--step-1); color: var(--ink); }
.work__by a { color: var(--accent); text-decoration: none; font-family: var(--font-mono); }
.work__by a:hover { text-decoration: underline; }
.work__tags { display: grid; gap: var(--space-2); margin: var(--space-5) 0 var(--space-6); }
.work__tags ul { margin: 0; padding: 0; list-style: none; }
.work__theme { color: var(--ink-dim); }

/* each family's take, in its own skin */
.work__take { margin: 0 var(--mi) var(--space-4); max-width: var(--measure); padding: var(--space-5); border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); color: var(--ink); clip-path: var(--shape-sm); text-align: start; }
.work__take p { margin: 0; font-size: var(--step-0); line-height: var(--lh-body); }
.work__take p + p { margin-top: var(--space-3); }
.work__take-h { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.work__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: var(--justify); margin-top: var(--space-6); }

/* related: small cards, each in its own skin */
.work__related { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 0; padding: 0; list-style: none; }
@media (max-width: 520px) { .work__related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
.work__rel { display: grid; height: 100%; grid-template-rows: auto 1fr; text-decoration: none; color: var(--ink); background: var(--panel); border: var(--frame-border); border-radius: var(--r); clip-path: var(--shape); overflow: hidden; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3); }
.work__rel:hover, .work__rel:focus-visible { transform: translateY(-3px); box-shadow: var(--glow); }
.work__rel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.work__rel-cover {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
  background:
    radial-gradient(circle at var(--cx, 80%) var(--cy, 20%), color-mix(in srgb, var(--second) 55%, transparent), transparent 55%),
    linear-gradient(var(--ca, 135deg), color-mix(in srgb, var(--accent) 70%, var(--bg)), var(--bg-2) 85%);
}
.work__rel-cover::before { content: attr(data-year); position: absolute; right: -.04em; bottom: -.22em; font: var(--h-weight) 3.4rem/1 var(--font-display); color: color-mix(in srgb, var(--head) 22%, transparent); }
.work__rel-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: var(--img-filter, none); }
.work__rel-body { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-3) var(--space-4) var(--space-4); }
.work__rel-body .h { font-size: var(--step-0); line-height: 1.15; }
.work__rel-body small { font: 500 var(--step--2)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }