/*
  WaxStack shared design system.

  One file, linked from every public page, instead of each template
  carrying its own copy of the same ~500 lines of tokens/topbar/footer/
  form CSS (the old Spindle-era pattern) -- this is the actual page design
  now, not per-page duplication of it. Page-specific layout still lives in
  each template's own <style> block; anything reused across two or more
  pages belongs here instead.

  Tokens and component rules below follow design_handoff_waxstack/README.md.
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* grounds */
  --char:        #2B2926;
  --char-deep:   #1A1917;
  --char-rule:   #413E39;
  --cream:       #EFE9DC;
  --panel:       #FFF8EA;
  --field:       #FFFDF6;
  --tint:        #F5ECD7;
  --rule:        #DED6C2;
  --rule-soft:   #E7DFCC;

  /* ink */
  --ink:         #232120;
  --ink-2:       #3D3A34;
  --ink-cream:   #F7EED9;
  --secondary:   #55514A;
  --muted-dark:  #A8A296;

  /* accent */
  --orange:      #E2701E;
  --orange-ink:  #C25E15;
  --amber:       #F0A92D;
  --brown:       #6B5B3E;
  --green:       #4F7A52;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Archivo', Helvetica, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.mono {
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- topbar ---- */
.topbar { background: var(--char); color: var(--ink-cream); }
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.wordmark { font-family: 'Archivo', Helvetica, sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.042em; }
.wordmark .wax { color: var(--amber); }
.topbar-nav { display: flex; gap: 20px; font-size: 14px; font-weight: 500; }
.topbar-nav a { color: var(--muted-dark); text-decoration: none; }
.topbar-nav a:hover { color: var(--ink-cream); }
.topbar-nav a.current { color: var(--ink-cream); border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.topbar-stat { margin-left: auto; font-size: 11px; letter-spacing: 0.12em; color: var(--muted-dark); display: none; }
@media (min-width: 780px) { .topbar-stat { display: block; } }

/* ---- buttons ---- */
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
/* Orange/amber are light fills -- type on them is always --ink, never
   cream. This is the single most common way to break the brand, per the
   handoff README, so it's centralized here rather than left to each
   button's own rule to get right independently. */
.btn-primary { background: var(--orange); color: var(--ink); }
.btn-primary:hover { background: var(--orange-ink); color: var(--ink-cream); }
.btn-dark { background: var(--ink); color: var(--ink-cream); }
.btn-dark:hover { background: var(--char-rule); }

/* ---- status badges (scarcity ladder) ---- */
.status-badge {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 8px;
  display: inline-block;
}
.status-presale { background: var(--orange); color: var(--ink); }
.status-out { background: var(--green); color: var(--ink-cream); }
.status-announced { background: var(--char); color: var(--ink-cream); }
.status-sold_out { background: var(--brown); color: var(--ink-cream); }

/* ---- follow toggle: the mark itself, doubling as an on/off control ---- */
.follow-toggle {
  flex: none;
  width: 44px;
  height: 40px;
  border: 1px solid var(--rule);
  background: var(--field);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.follow-toggle svg { height: 20px; width: auto; filter: grayscale(1) opacity(0.55); }
.follow-toggle:hover { border-color: var(--orange-ink); }
.follow-toggle.is-on { background: var(--orange); border-color: var(--orange); }
.follow-toggle.is-on svg { filter: none; }

/* ---- forms / follow builder ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted-dark);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
input, select {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}

.chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ink);
  padding: 7px 8px;
  background: var(--field);
  min-height: 42px;
}
.chip-input:focus-within { outline: 2px solid var(--orange); outline-offset: -2px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ink);
  color: var(--ink-cream);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 6px 5px 10px;
  white-space: nowrap;
}
.chip-type, .suggestion-type {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
}
.suggestion-type { margin-left: auto; padding-left: 12px; color: var(--secondary); background: var(--tint); padding: 3px 6px; }
.chip-input .chip-remove {
  border: none;
  background: var(--char-rule);
  color: var(--ink-cream);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  width: 18px;
  height: 18px;
  padding: 0;
}
.chip-input .chip-remove:hover { background: var(--orange); color: var(--ink); }
.field-value .chip-input input {
  flex: 1 1 100px;
  min-width: 90px;
  border: none;
  padding: 4px 2px;
  background: transparent;
}
.field-value .chip-input input:focus { outline: none; }

.autocomplete-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--field);
  border: 1px solid var(--ink);
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
}
.autocomplete-list button {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}
.autocomplete-list button:hover, .autocomplete-list button.active { background: var(--tint); }

/* ---- footer ---- */
footer { background: var(--char); color: var(--muted-dark); margin-top: 24px; }
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-inner .wordmark { color: var(--ink-cream); font-size: 16px; }
.footer-links { display: flex; gap: 16px; }
.footer-links a {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
  text-decoration: none;
}
.footer-links a:hover { color: var(--ink-cream); }
.footer-note {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  max-width: 60ch;
  flex: 1 1 100%;
}

.flash {
  background: #fbf3d9;
  border: 1px solid #e6d38f;
  color: #4a3c0c;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 28px;
}

/* Release card grid + pagination -- shared by the catalog and the shop/artist hub pages. */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 36px; }
.pagination a, .pagination .disabled, .pagination .current {
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 9px 14px;
  border: 1px solid var(--rule);
  background: var(--panel);
}
.pagination a:hover { border-color: var(--orange-ink); color: var(--orange-ink); }
.pagination .disabled { color: var(--muted-dark); }
.pagination .current { background: var(--ink); border-color: var(--ink); color: var(--ink-cream); }
.pagination .page-meta { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--secondary); padding: 0 6px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(162px, 1fr)); gap: 16px; }

.card { background: var(--panel); border: 1px solid var(--rule); display: flex; flex-direction: column; transition: box-shadow 0.15s ease; }
.card:hover { box-shadow: 0 8px 20px rgba(43, 41, 38, 0.12); }

.cover { width: 100%; aspect-ratio: 1 / 1; position: relative; overflow: hidden; text-decoration: none; display: block; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-placeholder {
  width: 100%; height: 100%;
  background-image: repeating-linear-gradient(45deg, var(--tint), var(--tint) 7px, var(--panel) 7px, var(--panel) 14px);
}
.cover .status-badge { position: absolute; top: 8px; left: 8px; }

.card-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-label { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary); }
.card-title-link { text-decoration: none; color: inherit; }
.card-artist { font-weight: 800; font-size: 14.5px; letter-spacing: -0.02em; line-height: 1.25; }
.card-title { color: var(--secondary); font-size: 13px; line-height: 1.3; }
.card-meta { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted-dark); letter-spacing: 0.03em; }
.card-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.price { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; color: var(--ink); }
.card-date { font-family: 'DM Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brown); white-space: nowrap; }
.card-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule-soft); display: flex; align-items: center; gap: 8px; }
.card-buy { flex: 1; text-align: center; font-size: 12px; padding: 9px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.affiliate-note { margin: 6px 0 0; font-size: 12.5px; color: var(--secondary, #55514A); max-width: 70ch; }