@font-face {
  font-family: "Geist Variable";
  src: url(/fonts/geist-latin-wght-normal.woff2) format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}
@font-face {
  font-family: "Geist Variable";
  src: url(/fonts/geist-latin-ext-wght-normal.woff2) format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0b0b0f;
  --surface: #15151c;
  --surface-2: #1c1c25;
  --border: #26262e;
  --border-strong: #34343f;
  --text: #ededed;
  --muted: #a1a1aa;
  --faint: #6b6b73;
  --accent: #ff2940;
  --accent-fill: #d92336;
  --accent-hover: #b81e2e;
  --on-accent: #fff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Geist Variable", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* chrome */
.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 11, 15, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top { background: var(--bg); } }
.bar { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.logo { font-weight: 800; letter-spacing: .06em; font-size: 18px; }
.logo b { color: var(--accent); font-weight: 800; }
.join {
  background: var(--accent-fill); color: var(--on-accent);
  font-weight: 600; font-size: 14px; padding: 9px 14px; border-radius: 8px;
  min-height: 40px; display: inline-flex; align-items: center;
}
.join:hover { background: var(--accent-hover); }
.pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pills a {
  flex: none; font-size: 13px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
}
.pills a:hover { border-color: var(--border-strong); color: var(--text); }
.pills a[aria-current] { color: var(--accent); border-color: var(--accent); }

/* headings */
.hero { padding: 36px 0 20px; }
.hero.sm { padding: 28px 0 16px; }
h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 8px; }
.hero p { color: var(--muted); margin: 0; max-width: 60ch; }
.hero p a { color: var(--accent); }
h2 { font-size: 20px; margin: 28px 0 12px; letter-spacing: -.01em; }

/* grid */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.card:hover { border-color: var(--border-strong); }
/* Same rule as the storefront's .card-img-wrap: a square white box that the
   photo is CONTAINED in, never cropped. overflow:hidden is load-bearing — an
   aspect-ratio box with visible overflow grows to fit a tall photo (pants). */
.ph { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s ease; }
.card:hover .ph img { transform: scale(1.04); }
.meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cat { font-size: 12.8px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.t {
  font-size: 14px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.t:hover { color: var(--accent); }
.row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr { font-weight: 700; font-variant-numeric: tabular-nums; }
.go { font-size: 13px; color: var(--accent); white-space: nowrap; }
.go:hover { text-decoration: underline; }
@media (max-width: 767px) { .cat { display: none; } .go { font-size: 12.8px; } }

/* category tiles */
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(4, 1fr); } }
.cats a {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 14px; min-height: 52px; font-weight: 600;
}
.cats a:hover { border-color: var(--accent); }
.cats small { color: var(--faint); font-weight: 400; font-variant-numeric: tabular-nums; }

/* pager */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px 0 8px; }
.pager a, .pager span {
  min-width: 44px; min-height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--muted);
}
.pager a:hover { border-color: var(--border-strong); color: var(--text); }
.pager span[aria-current] { border-color: var(--accent); color: var(--accent); }

.foot { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 20px; padding-bottom: 40px; color: var(--faint); font-size: 13px; }
.foot p { margin: 0; max-width: 70ch; }