/* ===================== MATERIALS PAGE ===================== */
.materials-hero { padding-bottom: var(--space-7); }
.materials-hero .section-lead { margin-bottom: var(--space-5); }
.materials-toc { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.materials-toc a {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: background 160ms var(--ease);
}
.materials-toc a:hover { background: var(--color-primary-tint); }

.sheet { margin-top: var(--space-7); }
.sheet:first-of-type { margin-top: var(--space-5); }
.sheet-head { max-width: 720px; margin-bottom: var(--space-5); }
.sheet-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-tint);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.sheet-head h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: var(--space-2); }
.sheet-head p { color: var(--color-text-muted); }
.sheet-gallery {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
}
.sheet-gallery li { flex: 0 0 72%; scroll-snap-align: start; }
@media (min-width: 640px) { .sheet-gallery li { flex-basis: 40%; } }
@media (min-width: 1024px) { .sheet-gallery li { flex-basis: 27%; } }
.sheet-gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
}

#test { padding: var(--space-8) 0; }

.articles-empty {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 760px;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.articles-empty strong { color: var(--color-text); }
.articles-empty a { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.materials-cta { text-align: center; }
.materials-cta .section-title, .materials-cta .section-lead { margin-inline: auto; }
.materials-cta .section-lead { margin-bottom: var(--space-5); }