.case-page {
  padding-top: 76px
}

.case-hero {
  padding: 110px 0 80px
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .72rem;
  margin-bottom: 42px;
}

.case-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 90px;
  align-items: end;
}

.case-label {
  font-family: var(--mono);
  color: var(--blue);
  font-size: .65rem;
  letter-spacing: .1em;
}

.case-title {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(3.7rem, 7vw, 6.7rem);
  line-height: .95;
  letter-spacing: -.05em;
}

.case-subtitle {
  max-width: 680px;
  margin-top: 26px;
  color: var(--muted);
  line-height: 1.8;
}

.case-actions {
  display: flex;
  gap: 20px;
  margin-top: 30px
}

.case-meta {
  margin-top: 50px;
  border-top: 1px solid var(--border);
}

.case-meta div {
  display: grid;
  grid-template-columns: 120px 1fr;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.case-meta span {
  color: var(--muted-2);
  font-size: .64rem
}

.case-meta strong {
  font-size: .72rem;
  font-weight: 500
}

.case-diagram {
  border-left: 1px solid var(--border);
  padding-left: 34px;
}

.case-diagram small {
  color: var(--blue);
  font-family: var(--mono);
  font-size: .6rem;
}

.diagram-list {
  margin-top: 18px
}

.diagram-list div {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .64rem;
}

.case-section {
  padding: 100px 0;
  border-top: 1px solid var(--border);
}

.case-content {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 80px;
}

.case-side span {
  color: var(--blue);
  font-family: var(--mono);
  font-size: .6rem;
}

.case-side h2 {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 1.8rem;
}

.case-copy p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.85;
}

.feature-list {
  border-top: 1px solid var(--border)
}

.feature-list div {
  display: grid;
  grid-template-columns: 48px 180px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.feature-list i {
  color: var(--blue)
}

.feature-list strong {
  font-size: .76rem;
  font-weight: 500
}

.feature-list p {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.6
}

.case-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.case-stack span {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .6rem;
}

@media(max-width:900px) {

  .case-grid,
  .case-content {
    grid-template-columns: 1fr
  }

  .case-diagram {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 28px 0 0
  }
}

@media(max-width:640px) {
  .case-hero {
    padding-top: 80px
  }

  .case-title {
    font-size: clamp(3rem, 14vw, 4.8rem)
  }

  .case-actions {
    flex-direction: column;
    align-items: flex-start
  }

  .feature-list div {
    grid-template-columns: 30px 1fr;
  }

  .feature-list p {
    grid-column: 2
  }
}