/* 作品集：深色、大图优先、硬朗直角 */
.tpl-portfolio-grid {
  letter-spacing: -0.01em;
}

.tpl-portfolio-grid .zw-nav {
  background: color-mix(in srgb, var(--zw-bg) 76%, transparent);
  border-bottom-color: color-mix(in srgb, var(--zw-fg) 10%, transparent);
}

.tpl-portfolio-grid .zw-hero h1 {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  background: linear-gradient(
    100deg,
    var(--zw-fg) 10%,
    color-mix(in srgb, var(--zw-primary) 90%, #fff) 55%,
    var(--zw-accent)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tpl-portfolio-grid .zw-eyebrow {
  border-color: color-mix(in srgb, var(--zw-primary) 40%, transparent);
  background: color-mix(in srgb, var(--zw-primary) 14%, transparent);
  color: color-mix(in srgb, var(--zw-primary) 80%, #fff);
}

.tpl-portfolio-grid .zw-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 18px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zw-muted);
}

.tpl-portfolio-grid .zw-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.tpl-portfolio-grid .zw-shot {
  aspect-ratio: 16 / 11;
  border-radius: 6px;
  border-color: color-mix(in srgb, var(--zw-fg) 10%, transparent);
}

.tpl-portfolio-grid .zw-shot-placeholder {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--zw-primary) 30%, #0b0b10),
    color-mix(in srgb, var(--zw-accent) 22%, #0b0b10)
  );
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.tpl-portfolio-grid .zw-shot-title {
  font-weight: 500;
  letter-spacing: 0;
}

.tpl-portfolio-grid .zw-card {
  border-radius: 6px;
  background: color-mix(in srgb, var(--zw-fg) 5%, transparent);
}

.tpl-portfolio-grid .zw-card:hover {
  transform: none;
  background: color-mix(in srgb, var(--zw-fg) 8%, transparent);
  border-color: color-mix(in srgb, var(--zw-primary) 55%, transparent);
}

.tpl-portfolio-grid .zw-card h3 {
  font-size: 1rem;
}

.tpl-portfolio-grid .zw-section-head h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.tpl-portfolio-grid .zw-btn {
  border-radius: 6px;
}

.tpl-portfolio-grid .zw-btn-primary {
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--zw-primary) 90%, transparent);
}

.tpl-portfolio-grid .zw-brand-mark {
  border-radius: 6px;
}

.tpl-portfolio-grid .zw-link,
.tpl-portfolio-grid .zw-contact-item {
  border-radius: 6px;
}