.detail-main {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 6.5rem var(--pad) 4rem;
}
.detail-loading, .detail-error {
  color: var(--muted);
  padding: 3rem 0;
}
.detail-hero {
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: start;
  margin-bottom: 2rem;
}
.detail-cover {
  aspect-ratio: 3/4;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #222 center/cover no-repeat;
  box-shadow: var(--shadow);
}
.detail-cover.wide { aspect-ratio: 16/11; }
.detail-kicker {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .8rem;
}
.detail-title {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0 0 .7rem;
}
.detail-sub {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 1rem;
}
.detail-note {
  line-height: 1.75;
  margin: 0 0 1.25rem;
  max-width: 40rem;
}
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.25rem;
}
.detail-tags span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .65rem;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.detail-actions a {
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  padding: .7rem 1.1rem;
  color: var(--fg);
}
.detail-actions a.primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}
.detail-gallery .g-item {
  aspect-ratio: 1;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #222 center/cover no-repeat;
}
.detail-code-box {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  background: var(--card);
  margin-top: 1rem;
}
.detail-code-box code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  color: var(--muted);
}
@media (max-width: 800px) {
  .detail-hero { grid-template-columns: 1fr; }
  .detail-cover { max-width: 280px; }
}