.sp-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 24px 96px;
}

.sp-head-section {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 0.5px solid rgba(243, 243, 243, 0.08);
}
.sp-page-title {
  font-size: var(--t-h1);
  letter-spacing: var(--t-h1-tracking);
  line-height: var(--t-h1-lh);
  font-weight: 400;
}
.sp-page-lede {
  font-size: var(--t-body);
  color: var(--c-muted);
  margin-top: 8px;
}

.sp-group { margin-top: 40px; }
.sp-group-title {
  font-size: var(--t-micro);
  letter-spacing: var(--t-micro-tracking);
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  margin-bottom: 14px;
}

.sp-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.sp-item { border-top: 0.5px solid rgba(243, 243, 243, 0.06); }
.sp-item:last-child { border-bottom: 0.5px solid rgba(243, 243, 243, 0.06); }

.sp-item-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  color: var(--c-fg);
  text-decoration: none;
  transition: padding 0.15s ease;
}
.sp-item-link:hover { padding-left: 8px; }

.sp-item-name {
  font-size: var(--t-h3);
  font-weight: 500;
}
.sp-item-meta {
  font-size: var(--t-caption);
  color: var(--c-muted);
  line-height: 1.5;
}
.sp-item-caption {
  padding: 8px 0 16px;
}

.sp-item-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 16px 0 6px;
}
.sp-item-figures img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--c-card);
  border-radius: var(--radius-base);
}

@media (max-width: 720px) {
  .sp-item-figures { grid-template-columns: repeat(2, 1fr); }
}