/* Basic reset */  
* { box-sizing: border-box; }  
html, body { height: 100%; margin: 0; }  
  
:root {  
  --bg: #faf9f7;  
  --card-bg: #fff;  
  --muted: #555;  
  --gap: 1rem;  
  --radius: 12px;  
}  
  
body {  
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;  
  background: var(--bg);  
  color: #111;  
  padding: 1rem;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  -webkit-tap-highlight-color: rgba(0,0,0,0);  
}  
  
/* Center content and limit width for larger screens */  
.container {  
  max-width: 1100px;  
  margin: 0 auto;  
  padding: 0 0.75rem;  
}  
  
/* Header */  
.site-header {  
  display: flex;  
  align-items: center;  
  gap: 1rem;  
  margin-bottom: 1rem;  
}  
  
.logo {  
  height: 64px;  
  width: auto;  
  display: block;  
}  
  
h1 {  
  margin: 0;  
  font-size: clamp(1rem, 3vw, 1.4rem);  
}  
  
/* Catalog grid */  
.catalog {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  
  gap: 1rem;  
}  
  
/* Card */  
.card {  
  background: var(--card-bg);  
  padding: 1.1rem;  
  border-radius: var(--radius);  
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);  
  transition: transform 120ms ease, box-shadow 120ms ease;  
  -webkit-tap-highlight-color: transparent;  
}  
  
.card:active {  
  transform: translateY(2px);  
}  
  
/* Content inside card */  
.name {  
  font-size: 1.05rem;  
  font-weight: 700;  
  margin-bottom: 0.25rem;  
}  
  
.row {  
  display: flex;  
  justify-content: space-between;  
  margin: 0.6rem 0;  
  align-items: center;  
}  
  
.potency {  
  font-size: 1rem;  
}  
  
/* Experience pills — make these easier to tap */  
.experiences {  
  display: flex;  
  flex-wrap: wrap;  
  gap: 0.5rem;  
}  
  
.experience {  
  display: inline-flex;  
  align-items: center;  
  gap: 0.4rem;  
  padding: 0.4rem 0.7rem;  
  border: 1px solid #d6d3cc;  
  border-radius: 999px;  
  background: rgba(0,0,0,0.01);  
  font-size: 0.95rem;  
  line-height: 1;  
  min-height: 36px; /* comfortable touch target */  
}  
  
.experience.unknown {  
  opacity: 0.7;  
}  
  
.summary {  
  color: var(--muted);  
  font-size: 0.95rem;  
  line-height: 1.4;  
  margin-top: 0.45rem;  
}  
  
/* Mobile / small screens */  
@media (max-width: 640px) {  
  body { padding: 0.5rem; }  
  
  .site-header {  
    flex-direction: column;  
    align-items: flex-start;  
    gap: 0.4rem;  
  }  
  
  .logo {  
    height: 48px;  
  }  
  
  .catalog {  
    grid-template-columns: 1fr; /* single column on phones */  
    gap: 0.75rem;  
  }  
  
  .card {  
    padding: 0.9rem;  
  }  
  
  .experience {  
    padding: 0.45rem 0.7rem;  
    font-size: 0.98rem;  
  }  
}  
  
/* Respect user motion preferences */  
@media (prefers-reduced-motion: reduce) {  
  .card { transition: none; transform: none; }  
}