/*
 * Theme matched to superduperkyle.com / shop.superduperkyle.com:
 * white background, black text, his pink (#eb66ae, sampled directly from
 * the "Add to Cart" button on shop.superduperkyle.com), a retro monospace
 * display font for headings/buttons (his store uses a custom-uploaded font
 * called "VCR" — that file lives on his paid Shopify plan, so this uses
 * VT323, a free/open equivalent with the same VHS-timestamp look; swap in
 * his actual font file here if he wants pixel-perfect matching), and
 * mostly-square corners rather than rounded pill buttons.
 */
@font-face {
  font-family: "VT323";
  src: url("/fonts/vt323-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --border: #e5e5e8;
  --text: #111111;
  --text-dim: #6b6b70;
  --accent: #eb66ae;
  --accent-text: #ffffff;
  --danger: #d1274a;
  --radius: 4px;
  --display-font: "VT323", "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.site-header {
  padding: 20px 20px 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.header-bar {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo { height: 56px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 12px; }
.nav-link {
  font-family: var(--display-font);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-link:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.tagline { color: var(--text-dim); margin: 10px 0 0; font-size: 15px; text-align: center; }

/* Full-width hype banner — the team wants this to be the loud, exciting
   element of the header, so it takes the space freed up by pulling the logo
   and "Main Site" link close together above (see .header-bar) instead of
   spreading them across the whole row. */
.countdown-banner {
  max-width: 960px;
  margin: 14px auto 0;
  padding: 14px 20px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.countdown-label {
  display: block;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.countdown-clock {
  display: block;
  color: var(--accent);
  font-family: var(--display-font);
  font-weight: 400;
  font-size: clamp(40px, 9vw, 88px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.catalog {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.loading { text-align: center; color: var(--text-dim); }

.section-heading {
  font-family: var(--display-font);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  margin: 0;
}

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

.featured-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
}
.featured-art { flex: 0 0 44%; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.featured-body {
  flex: 1 1 auto;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.featured-badge {
  align-self: flex-start;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--display-font);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.featured-body h2 { margin: 0 0 6px; font-family: var(--display-font); font-size: 32px; font-weight: 400; }
.featured-body .card-meta { margin: 0 0 20px; }
.featured-body .buy-button { font-size: 14px; padding: 12px 18px; }

/* Sold out — stays fully browsable (art, tracklist, previews), just can't
   be bought. Grayscale + a banner communicates that at a glance without
   hiding the release, and the buy button is restyled but stays clickable
   so fans can still open the modal to look around. */
.is-sold-out .card-art img,
.is-sold-out .featured-art img,
.is-sold-out .art-placeholder {
  filter: grayscale(1) brightness(0.8);
}
.sold-out-banner {
  position: absolute;
  top: 18%;
  left: -8%;
  right: -8%;
  transform: rotate(-8deg);
  background: rgba(17, 17, 17, 0.82);
  color: #fff;
  text-align: center;
  padding: 6px 0;
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.is-sold-out .buy-button {
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.sold-out-notice {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 0 16px;
}

@media (max-width: 640px) {
  .featured-card { flex-direction: column; }
  .featured-art { flex: none; width: 100%; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(17,17,17,0.10); }

.card-art, .featured-art { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.card-art img, .featured-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.card:hover .card-art img { transform: scale(1.04); }
.art-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #f4f4f5, #e5e5e8); }

.card-body { padding: 14px 16px 18px; }
.card-body h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.card-meta { color: var(--text-dim); font-size: 13px; margin: 0 0 14px; text-transform: capitalize; }

.card-actions { display: flex; gap: 8px; }
.preview-button, .buy-button {
  border: none;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.preview-button {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.preview-button:disabled { opacity: 0.4; cursor: not-allowed; }
.buy-button {
  background: var(--accent);
  color: var(--accent-text);
  flex: 1 1 auto;
}
.buy-button:hover, .preview-button:hover:not(:disabled) { filter: brightness(1.05); }

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(17,17,17,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 10;
}
.modal-backdrop.hidden { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 380px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; color: var(--text-dim);
  font-size: 24px; cursor: pointer; line-height: 1;
}

.modal-art { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); margin-bottom: 14px; background: var(--surface-2); }
.modal h2 { margin: 0 0 4px; font-family: var(--display-font); font-size: 28px; font-weight: 400; }
.modal-subtitle { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; }

.track-list {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  max-height: 240px;
  overflow-y: auto;
}
.track-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
}
.track-row:last-child { border-bottom: none; }
.track-row-locked { opacity: 0.55; }
.track-play-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.track-play-btn:hover:not(:disabled) { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.track-play-btn:disabled { cursor: not-allowed; }
.track-row-title { flex: 1 1 auto; font-size: 14px; }
.track-row-title em { color: var(--text-dim); font-style: normal; font-size: 12px; }
.track-row-duration { flex: 0 0 auto; color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }

.price-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.price-row strong { color: var(--accent); font-family: var(--display-font); font-size: 22px; font-weight: 400; }

.pwyw-note { font-size: 13px; color: var(--text-dim); margin: 0 0 12px; }
.amount-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.amount-chip {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.amount-chip.selected, .amount-chip:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.amount-input-label, .email-label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.amount-input-label input, .email-label input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.amount-input-label input:focus, .email-label input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.pay-button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.pay-button:hover { filter: brightness(1.05); }
.pay-button:disabled { opacity: 0.6; cursor: wait; }

.modal-error { color: var(--danger); font-size: 13px; margin-top: 10px; }
.fine-print { color: var(--text-dim); font-size: 11px; text-align: center; margin-top: 14px; }

.hidden { display: none; }

.success-page {
  max-width: 480px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}
.success-page h2 { font-family: var(--display-font); font-size: 32px; font-weight: 400; }
.download-list { list-style: none; padding: 0; }
.download-list li { margin-bottom: 10px; }
.download-list a {
  display: block;
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-weight: 700;
}
.download-list a:hover { filter: brightness(1.05); }
.back-link { display: inline-block; margin-top: 24px; color: var(--text-dim); }