:root {
  --background: #f6f5f0;
  --foreground: #0f0f0f;
  --border: #f2decb;
  --fg-muted: #5c4232;
  --fg-faint: #8a7867;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }

.category-container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.footer-inner {
  width: min(100% - 2rem, 80rem);
  margin-inline: auto;
}
.category-hero {
  padding: 4rem 0 2.5rem;
  border-bottom: 1px solid var(--border);
}
.category-hero h1 {
  margin: 0;
  line-height: 1.05;
  font-weight: 500;
  font-size: 3.2rem;
  letter-spacing: 0;
}
.category-hero p {
  margin: .75rem 0 0;
  color: var(--fg-muted);
  font-size: 1.125rem;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.2rem;
  padding: 2.5rem 0 4rem;
}
.category-grid .card { display: flex; min-width: 0; flex-direction: column; }
.category-grid .card-body { display: flex; flex: 1; flex-direction: column; }

footer { margin-top: 2rem; border-top: 1px solid var(--border); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.5rem 0;
}
.footer-brand img { display: block; width: auto; height: 1.75rem; }
.footer-brand p { margin: .375rem 0 0; color: var(--fg-faint); font-size: .875rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer-nav a { color: var(--fg-muted); font-size: .875rem; }
.footer-nav a:hover { color: #d14d1b; }

@media (max-width: 960px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .category-container { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
  .category-container { padding-inline: 2rem; }
}
@media (max-width: 640px) {
  .footer-inner { width: min(100% - 2rem, 80rem); }
  .category-hero { padding: 2.75rem 0 2rem; }
  .category-hero p { font-size: 1rem; }
  .category-grid { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2rem; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}