.page-cases {
  --cases-card-bg: var(--color-surface);
  --cases-gap: var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* ============ 首屏 ============ */
.page-cases .cases-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-cases .cases-hero::before {
  content: "";
  position: absolute;
  right: -140px;
  top: 20px;
  width: 280px;
  height: 280px;
  border: var(--border-thick) solid var(--color-primary-soft);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.page-cases .cases-hero .container {
  position: relative;
  z-index: 1;
}

.page-cases .breadcrumbs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}

.page-cases .breadcrumbs a {
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}

.page-cases .breadcrumbs a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-focus);
}

.page-cases .breadcrumbs span[aria-hidden] {
  padding: 0 var(--space-1);
  color: var(--color-line);
}

.page-cases .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.page-cases .hero-eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  height: var(--border-thin);
  background: var(--color-accent);
}

.page-cases .hero-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 17ch;
}

.page-cases .hero-lead {
  margin: 0 0 var(--space-6);
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

/* ============ 首屏拼贴矩阵 ============ */
.page-cases .matrix-collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cases-gap);
}

.page-cases .m-block {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  min-height: 128px;
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-1);
}

.page-cases .m-num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.page-cases .m-label {
  display: block;
  max-width: 30ch;
  font-size: var(--text-sm);
  line-height: 1.55;
}

.page-cases .m-block--a {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-color: var(--color-contrast-line);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.page-cases .m-block--a .m-num {
  color: var(--color-contrast-accent);
}

.page-cases .m-block--a .m-label {
  color: var(--color-contrast-ink);
  opacity: 0.82;
}

.page-cases .m-block--b {
  background: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: var(--radius-md);
}

.page-cases .m-block--b .m-num,
.page-cases .m-block--c .m-num {
  color: var(--color-primary-ink);
}

.page-cases .m-block--b .m-label,
.page-cases .m-block--c .m-label {
  color: var(--color-primary-ink);
  opacity: 0.9;
}

.page-cases .m-block--c {
  background: var(--color-accent);
  border-color: var(--color-accent);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}

.page-cases .m-block--d {
  background: var(--color-surface);
  border-left: var(--border-thick) solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.page-cases .m-block--e {
  background: var(--color-surface-deep);
  border-radius: var(--radius-lg);
}

.page-cases .m-token {
  display: inline-block;
  margin: 0 var(--space-1) var(--space-1) 0;
  padding: var(--space-1) var(--space-2);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink);
}

/* ============ 场景分组 ============ */
.page-cases .case-group {
  padding-block: var(--section-y);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-cases .case-group--alt {
  background: var(--color-surface-alt);
}

.page-cases .case-group--deep {
  background: var(--color-surface-deep);
}

.page-cases .case-group--dark {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-bottom-color: var(--color-contrast-line);
}

.page-cases .group-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-6);
}

.page-cases .group-index {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.page-cases .group-index--dark {
  color: var(--color-contrast-accent);
}

.page-cases .group-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.page-cases .group-lead {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
  font-size: var(--text-base);
  color: var(--color-ink-soft);
}

.page-cases .group-lead--dark {
  color: var(--color-contrast-ink);
  opacity: 0.84;
}

.page-cases .group-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-cases .group-points li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.page-cases .group-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 16px;
  height: var(--border-thin);
  background: var(--color-accent);
}

.page-cases .group-points--dark li {
  color: var(--color-contrast-ink);
  opacity: 0.86;
}

.page-cases .group-points--dark li::before {
  background: var(--color-contrast-accent);
}

/* ============ 分组配图 ============ */
.page-cases .group-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-deep);
  border: var(--border-thick) solid var(--color-line);
}

.page-cases .group-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-cases .group-figure--round {
  border-radius: var(--radius-lg);
}

.page-cases .group-figure--cut {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}

.page-cases .group-figure--edge {
  border-radius: var(--radius-sm);
  border-left: var(--border-thick) solid var(--color-primary);
}

.page-cases .group-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: var(--space-1) var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
  border-right: var(--border-thin) solid var(--color-line);
  border-top-right-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.page-cases .group-caption--dark {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-color: var(--color-contrast-line);
}

/* ============ 场景条目 ============ */
.page-cases .group-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.page-cases .scene {
  position: relative;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--cases-card-bg);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}

.page-cases .scene::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-3);
  bottom: var(--space-3);
  width: var(--border-thick);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.page-cases .scene:hover,
.page-cases .scene:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.page-cases .scene:hover::before,
.page-cases .scene:focus-within::before {
  background: var(--color-focus);
}

.page-cases .scene-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.page-cases .scene-fields {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.page-cases .scene-field dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
}

.page-cases .scene-field dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.page-cases .scene-result {
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-highlight);
  font-family: var(--font-mono);
  color: var(--color-ink);
}

.page-cases .scene--on-dark {
  background: var(--color-surface);
}

/* ============ 组尾刻度 ============ */
.page-cases .group-ticks {
  height: var(--space-2);
  margin-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-line);
  background-image: repeating-linear-gradient(
    to right,
    var(--color-line) 0,
    var(--color-line) var(--border-thin),
    transparent var(--border-thin),
    transparent var(--space-3)
  );
  background-repeat: repeat-x;
  background-size: var(--space-3) 100%;
}

.page-cases .group-ticks--dark {
  border-top-color: var(--color-contrast-line);
  background-image: repeating-linear-gradient(
    to right,
    var(--color-contrast-line) 0,
    var(--color-contrast-line) var(--border-thin),
    transparent var(--border-thin),
    transparent var(--space-3)
  );
}

/* ============ 复用要点 ============ */
.page-cases .reuse {
  padding-block: var(--section-y-lg);
  background: var(--color-surface);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-cases .reuse-index {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.page-cases .reuse-title {
  margin: 0 0 var(--space-3);
  max-width: 24ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.page-cases .reuse-lead {
  margin: 0 0 var(--space-6);
  max-width: var(--measure);
  font-size: var(--text-base);
  color: var(--color-ink-soft);
}

.page-cases .reuse-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.page-cases .reuse-item {
  position: relative;
  padding: var(--space-3);
  border-top: var(--border-thick) solid var(--color-primary-soft);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}

.page-cases .reuse-num {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.page-cases .reuse-item-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
}

.page-cases .reuse-item-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-cases .reuse-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-cases .reuse-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}

.page-cases .reuse-link:hover,
.page-cases .reuse-link:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ============ 不适用说明 ============ */
.page-cases .limits {
  padding-block: var(--section-y);
  background: var(--color-surface-deep);
}

.page-cases .limits-index {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-ink-muted);
}

.page-cases .limits-title {
  margin: 0 0 var(--space-3);
  max-width: 22ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.page-cases .limits-lead {
  margin: 0 0 var(--space-6);
  max-width: var(--measure);
  font-size: var(--text-base);
  color: var(--color-ink-soft);
}

.page-cases .limits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-cases .limit-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-cases .limit-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.page-cases .limit-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

/* ============ 桌面端 ============ */
@media (min-width: 760px) {
  .page-cases .matrix-collage {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-2);
  }

  .page-cases .m-block--a { grid-column: 1 / 6; }
  .page-cases .m-block--b { grid-column: 6 / 10; transform: translateY(22px); }
  .page-cases .m-block--c { grid-column: 10 / 13; transform: translateY(46px); }
  .page-cases .m-block--d { grid-column: 2 / 6; }
  .page-cases .m-block--e { grid-column: 6 / 12; }

  .page-cases .reuse-list,
  .page-cases .reuse-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .page-cases .cases-hero {
    padding-top: var(--space-8);
    padding-bottom: var(--section-y);
  }

  .page-cases .group-head {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-6);
  }

  .page-cases .group-items {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .page-cases .reuse-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-cases .reuse-links {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-cases .scene,
  .page-cases .reuse-link,
  .page-cases .breadcrumbs a {
    transition: none;
  }

  .page-cases .scene:hover,
  .page-cases .scene:focus-within {
    transform: none;
  }
}
<<<END>>>