/* Per-artwork pages (work/<slug>/index.html). Layout only —
   the inner components reuse .detail__* and .status from main.css. */

.work__back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 26px 0 0; padding: 8px 14px 8px 10px;
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface);
  transition: color .15s, border-color .15s;
}
.work__back svg { flex: none; }
.work__back:hover { color: var(--accent); border-color: var(--accent); }
.work__back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.work {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 48px;
  align-items: start;
  padding: 24px 0 56px;
}

.work__media {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex; justify-content: center;
}
.work__media img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.work__body {
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 96px;
}
.work__body .detail__title { margin: 0; }
.work__body .detail__note { margin-top: 4px; }

.work__pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  border-top: 1px solid var(--rule);
  padding: 24px 0 64px;
}
.work__pager-link {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--ink);
  min-width: 0;
}
.work__pager-link span { font-size: 12px; color: var(--ink-3); }
.work__pager-link strong {
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.work__pager-link:hover strong { color: var(--accent); }
.work__pager-link--next { text-align: right; align-items: flex-end; }
.work__pager-all {
  font-size: 13px; color: var(--ink-3); text-decoration: none;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 8px 16px; white-space: nowrap;
}
.work__pager-all:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 900px) {
  .work { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
  .work__body { position: static; }
  .work__media { padding: 12px; }
  .work__media img { max-height: 60vh; }
  .work__pager { grid-template-columns: 1fr; justify-items: start; gap: 18px; }
  .work__pager-link--next { text-align: left; align-items: flex-start; }
}