/* Materials listing — Figma 428:7401. Shared navigation and footer stay in site.css. */
.materials-page { background: #f8f8f8; }
.materials-page .site-header { background: #f8f8f8; }
.materials-breadcrumb { margin: 28px 40px 0; }
.materials-content { width: min(1126px, calc(100% - 80px)); margin: 56px auto 0; padding-bottom: 96px; }
.materials-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; margin: 0 3px 60px; }
.materials-heading > img { flex: none; }
.materials-heading h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; font: 500 28px/50px var(--font-zen); letter-spacing: .15em; }
.materials-heading h1 span { color: var(--muted); font: 500 19px/38px var(--font-urbanist); letter-spacing: .08em; }
.materials-lead { margin: 0 3px 60px; color: #201e1e; font: 500 20px/40px var(--font-zen); letter-spacing: .08em; }
.materials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.materials-card { display: flex; flex-direction: column; align-items: center; gap: 24px; min-width: 0; padding: 20px; background: #fff; }
.materials-cover { display: block; width: 100%; height: auto; aspect-ratio: 602 / 340; object-fit: cover; }
.materials-card-copy { width: 100%; }
.materials-card h2 { margin: 0 0 16px; font: 700 20px/36px var(--font-zen); letter-spacing: .08em; text-align: center; }
.materials-card p { margin: 0; color: #595757; font: 500 14px/26px var(--font-body); letter-spacing: .08em; }
.materials-download { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(302px, 100%); min-height: 66px; margin-top: auto; padding: 17px 8px; border: 1px solid #201e1e; border-radius: 4px; background: #fff; color: #201e1e; font: 700 20px/24px var(--font-zen); letter-spacing: .08em; text-align: center; text-decoration: none; }
.materials-download img { flex: none; }
.materials-download:focus-visible { outline: 2px solid #595757; outline-offset: 4px; }
@media (min-width: 921px) and (max-width: 1150px) {
  .materials-card { padding: 16px; }
  .materials-card h2, .materials-download { font-size: 17px; }
  .materials-grid { gap: 16px; }
}
@media (max-width: 920px) {
  .materials-breadcrumb { margin: 20px 20px 0; }
  .materials-content { width: calc(100% - 56px); margin-top: 40px; padding-bottom: 64px; }
  .materials-heading { margin: 0 0 32px; }
  .materials-heading h1 { font-size: 28px; }
  .materials-heading h1 span { font-size: 16px; }
  .materials-lead { margin: 0 0 36px; font-size: 16px; line-height: 32px; }
  .materials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials-card h2 { font-size: 18px; line-height: 32px; }
  .materials-download { font-size: 17px; min-height: 60px; padding-block: 14px; gap: 8px; }
}
@media (max-width: 600px) {
  .materials-grid { grid-template-columns: minmax(0, 1fr); }
}