/* Reset, CSS variables, body, and main container */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:        #fdfbf7;
  --fg:        #121212;
  --red:       #D02020;
  --blue:      #1040C0;
  --yellow:    #F0C020;
  --border:    #121212;
  --muted:     #E0E0E0;
  --card:      #ffffff;
  --text:      #121212;
  --radius:    0px;
  --radius-sm: 0px;
  --shadow:    4px 4px 0px 0px #121212;
  --shadow-lg: 8px 8px 0px 0px #121212;
  --header-height: 64px;
  --home-footer-height: 0px;
}

html {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bg);
  background-image: radial-gradient(#e5e0d8 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text);
  min-height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  min-height: calc(100dvh - var(--header-height) + var(--home-footer-height));
  display: flex;
  flex-direction: column;
}

.home-content {
  flex: 1;
  padding: 28px 20px calc(24px + var(--home-footer-height));
}

.card-grid {
  overflow: hidden !important;
}

@media (max-width: 540px) {
  .home-content { padding: 20px 12px calc(20px + var(--home-footer-height)); }
}

@media (min-width: 541px) {
  html {
    overflow-x: hidden;
  }
}