/* Our work page. Header, picker and buttons come from services.css; colours match the rest of the app (see PROJECT.md). */
.project {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 12px 20px;
  margin: 0 0 12px;
}

.project__shot {
  display: block;
  width: 100%;
  height: auto; /* the width and height attributes only reserve space; the crop is set below */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  background: var(--note);
  color: var(--muted);
}

.project:target { box-shadow: 0 0 0 3px var(--accent); }

.project__body { padding: 14px 8px 0; }

.project__tag {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  background: var(--tint);
  border-radius: 99px;
  font-size: 0.875rem;
  font-weight: 600;
}

.project h2 {
  margin: 0 0 8px;
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 600;
}

.project p { margin: 0 0 16px; }

.closing {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 12px;
  padding: 24px 20px;
  margin: 0 0 12px;
}

.closing:target { box-shadow: 0 0 0 3px var(--accent); }

.closing h2 {
  margin: 0 0 8px;
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 600;
}

.closing p { margin: 0 0 16px; color: var(--on-ink-soft); }

.closing .actions { display: grid; gap: 8px; }

.closing .more { color: var(--accent); margin-top: 0; }

.closing a:focus-visible { outline-color: var(--accent); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .project { padding: 16px 16px 24px; }
  .closing .actions { display: flex; }
}