.page-content { padding: var(--spacing-8) 0 var(--spacing-xl); }
.page-intro-block {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-8);
  margin-bottom: var(--spacing-8);
  border: 1px solid var(--color-border-default);
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-4);
}
.page-intro-body {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  line-height: var(--line-height-body);
  max-width: 60ch;
}
.page-intro-body + .page-intro-body { margin-top: var(--spacing-3); }
.type-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-5);
}
.type-card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-6);
  border: 1px solid var(--color-border-default);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.type-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.type-card-name {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-1) 0;
}
.type-card-covers {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-4);
  font-style: italic;
  line-height: var(--line-height-body);
}
.type-card-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-5);
  flex: 1;
}
.type-dimensions {
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--spacing-4);
}
.type-dimensions-label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-3);
}
.dim-tag-list { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.dim-tag {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px var(--spacing-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.dim-tag.high {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent-text);
  border: 1px solid rgba(192, 80, 40, 0.2);
}
.dim-tag.low {
  background-color: var(--color-bg-inset);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-default);
}
.dim-tag.mid {
  background-color: var(--color-bg-section);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}
.trope-note-footer {
  background-color: var(--color-bg-section);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6) var(--spacing-8);
  margin-top: var(--spacing-8);
  border: 1px solid var(--color-border-default);
}
.trope-note-footer p {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-body);
}
.trope-note-footer p + p { margin-top: var(--spacing-3); }
@media (max-width: 900px) {
  .type-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .type-card-grid { grid-template-columns: 1fr; }
}