/* Project Principles — page-specific styles (shared layout is in ../subpage.css) */

.principle-grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.principle-card {
  position: relative; padding: 1.75rem 2rem 1.75rem 6.5rem; background: #fff; border: 1px solid #ebe5da; border-radius: .5rem;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.principle-card:hover { transform: translateY(-3px); box-shadow: 0 1rem 2rem rgba(74,21,14,.08); border-color: rgba(220,161,93,.6); }
.principle-card--wide { grid-column: 1 / -1; }
.principle-card__n {
  position: absolute; left: 1.75rem; top: 1.5rem; width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--gold); color: var(--red-brand); font-family: var(--f-serif); font-weight: 500; font-size: 1.75rem; background: var(--cream);
}
.principle-card p { font-size: 1.1875rem; line-height: 1.75; color: #3f3f3f; font-weight: 400; }
.principle-card ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.principle-card ul li { position: relative; padding: 1rem 1rem 1rem 2.25rem; background: var(--cream); border-radius: .375rem; font-size: 1rem; line-height: 1.65; color: #4b4b4b; }
.principle-card ul li::before {
  content: ""; position: absolute; left: 1rem; top: 1.45rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold);
}

@media (max-width: 900px) {
  .principle-grid { grid-template-columns: 1fr; }
  .principle-card ul { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .principle-card { padding: 4.25rem 1.25rem 1.25rem; }
  .principle-card__n { top: 1.25rem; }
}