/* Shared styles for the static copy of the Wix site.
   Layout mirrors Wix's fixed 980px desktop stage: every element is placed
   at the exact pixel position measured on the live site. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  min-height: 100vh;
  background: #000;
  font-family: "Courier New", Courier, monospace;
  color: #d0d0d0;
  -webkit-font-smoothing: antialiased;
}

/* 980px stage, centered; scrolls horizontally on narrower screens like Wix */
.stage {
  position: relative;
  width: 980px;
  margin: 0 auto;
}

.abs { position: absolute; }

a { color: inherit; text-decoration: none; }

/* ---------- text styles ---------- */
.t20 { font-size: 20px; letter-spacing: 0.2em; line-height: 25px; padding-top: 2px; }
.t16 { font-size: 16px; letter-spacing: 0.2em; line-height: 21px; padding-top: 1px; }
.t14 { font-size: 14px; line-height: 16px; }
.t12 { font-size: 12px; letter-spacing: 0.2em; }

.right  { text-align: right; }
.center { text-align: center; }
.left   { text-align: left; }

/* ---------- form fields ---------- */
.field {
  position: absolute;
  height: 38px;
  background: #d0d0d0;
  border: 1px solid #000;
}
.field input,
.field select {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 12px;
  font: 16px "Courier New", Courier, monospace;
  color: #000;
}
.field input::placeholder { color: #404040; opacity: 1; }

.field select {
  -webkit-appearance: none;
  appearance: none;
  color: #404040;
  cursor: pointer;
  padding-right: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23404040' stroke-width='1.2'/%3E%3C/svg%3E") right 14px center no-repeat;
}
.field select.chosen { color: #000; }

.btn {
  position: absolute;
  height: 41px;
  border: 0;
  background: #d0d0d0;
  color: #000;
  font: 16px "Courier New", Courier, monospace;
  cursor: pointer;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- audio player (listen page) ---------- */
.player {
  position: absolute;
  height: 40px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.player button {
  flex: 0 0 18px;
  width: 18px;
  height: 20px;
  border: 0;
  background: none;
  cursor: pointer;
  color: #d0d0d0;
}
.player button svg { display: block; width: 18px; height: 20px; fill: currentColor; }
.player .bar {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 50px;
  background: rgba(208, 208, 208, 0.22);
  cursor: pointer;
}
.player .bar span {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 50px;
  background: #d0d0d0;
}
.player .bar span::after {
  content: ""; position: absolute; right: -3px; top: -1px;
  width: 6px; height: 6px; border-radius: 50%; background: #d0d0d0;
}

/* ---------- form status message ---------- */
.form-msg { color: #d0d0d0; }
.form-msg.error { color: #e8a0a0; }
.btn:disabled { opacity: 0.6; cursor: default; }

/* ---------- thank-you screen (buy page) ---------- */
main[hidden] { display: none !important; }
#thanks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 8vh;
}
#thanks[hidden] { display: none; }
#thanks .t16 { margin-bottom: 96px; }
#thanks .t12 { margin-top: 10px; }

.player-light {
  width: 280px;
  height: 27px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #000;
}
.player-light button {
  flex: 0 0 14px; width: 14px; height: 16px;
  border: 0; background: none; padding: 0; cursor: pointer; color: #000;
}
.player-light button svg { display: block; width: 14px; height: 16px; fill: currentColor; }
.player-light .bar {
  position: relative; flex: 1; height: 2px;
  background: #c8c8c8; cursor: pointer;
}
.player-light .bar span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #000;
}
.player-light .bar span::after {
  content: ""; position: absolute; right: -2px; top: -1px;
  width: 4px; height: 4px; border-radius: 50%; background: #000;
}

/* ---------- graphic EQ (listen page) ---------- */
.eq {
  --cols: 34px repeat(12, 36px) 36px;
  width: 506px;
  font-size: 11px;
  color: #d0d0d0;
  user-select: none;
}
.eq-head, .eq-body, .eq-foot {
  display: grid;
  grid-template-columns: var(--cols);
  text-align: center;
}
.eq-head { height: 22px; align-items: center; }
.eq-head span:first-child, .eq-foot span:first-child { text-align: left; }
.eq-db { font-size: 10px; color: #8a8a8a; }
.eq-foot { height: 18px; align-items: center; }
.eq-foot .eq-db { grid-column: -2; }

.eq-body { position: relative; height: 196px; }
.eq-lines {
  position: absolute; left: 8px; right: 30px; top: 12px; bottom: 12px;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
.eq-lines i { display: block; height: 1px; background: #2a2a2a; }

.eq-faders {
  grid-column: 2 / span 12;
  display: grid; grid-template-columns: repeat(12, 36px);
  padding: 12px 0;
  position: relative;
}
.eq-fader { position: relative; height: 100%; cursor: ns-resize; touch-action: none; outline: none; }
.eq-slot {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 8px;
  transform: translateX(-50%);
  background: #000;
}
.eq-slot::before {             /* frame around the slot */
  content: ""; position: absolute; left: -5px; right: -5px; top: -10px; bottom: -10px;
  border: 1px solid #555; background: #111; z-index: -1;
}
.eq-cap {
  position: absolute; left: 50%; width: 22px; height: 30px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(#000, #000) center / 100% 1px no-repeat,
    repeating-linear-gradient(#d0d0d0 0 3px, #6a6a6a 3px 4px);
  border: 1px solid #000;
  box-shadow: 0 0 0 1px #555;
}
.eq-fader:focus-visible .eq-cap { box-shadow: 0 0 0 2px #fff; }

.eq-scale {
  position: relative; padding: 12px 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
.eq-scale span { height: 1px; line-height: 1px; font-size: 10px; color: #8a8a8a; }

.eq-reset {
  display: block; margin: 10px auto 0;
  background: none; border: 0; cursor: pointer;
  font: 12px "Courier New", Courier, monospace; letter-spacing: 0.2em; color: #d0d0d0;
}

/* =====================================================================
   PHONE LAYOUT (screens up to 700px wide)
   Everything is taken out of the fixed 980px desktop positions and
   stacked in one column. !important is needed to override the inline
   desktop positions. Desktop is not affected by anything below.
   ===================================================================== */
@media (max-width: 700px) {
  .stage {
    width: auto !important;
    height: auto !important;
    min-height: 100vh;
    padding: 36px 20px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .stage .abs, .stage .field, .stage .btn, .stage .player, .stage .form-msg {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important;
  }

  /* text sizes */
  .t20 { font-size: 13px; line-height: 18px; padding-top: 0; }
  .t16 { font-size: 12px; line-height: 17px; padding-top: 0; }
  .t14 { font-size: 12px; line-height: 17px; }
  .t12 { font-size: 11px; }

  /* "back" link on every subpage */
  .stage:not(.page-home):not(.page-store) > a[href]:first-child { margin-bottom: 28px; padding: 6px 12px; }

  /* ---------- home: contact · logo · store in one row ---------- */
  .page-home { flex-direction: row; justify-content: center; gap: 12px; padding: 0 12px; }
  .stage.page-home img { width: min(52vw, 240px) !important; height: auto !important; }
  .stage.page-home > a { margin: 0; padding: 6px 0; }

  /* ---------- store: back / listen · logo · buy / releases ---------- */
  .page-store {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: ". back ." "listen logo buy" ". rel .";
    align-content: center; align-items: center; justify-items: center;
    row-gap: 18px; column-gap: 10px;
    padding: 0 12px;
  }
  .page-store > :nth-child(1) { grid-area: back; margin: 0; }
  .page-store > :nth-child(2) { grid-area: listen; justify-self: end; }
  .page-store > :nth-child(3) { grid-area: logo; height: auto !important; }
  .page-store > :nth-child(4) { grid-area: rel; }
  .page-store > :nth-child(5) { grid-area: buy; justify-self: start; }
  .page-store img { width: min(52vw, 240px) !important; height: auto !important; }

  /* ---------- forms (contact + buy) ---------- */
  .stage form {
    width: 100%; max-width: 420px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .stage form > * { grid-column: 1 / -1; }
  .field { height: 44px; }
  .btn { height: 46px; }
  .stage .form-msg { margin-top: 4px; }

  .page-contact { justify-content: center; }
  .page-contact form { grid-template-columns: 1fr 1.6fr; }
  .page-contact .field:has([name=name]),
  .page-contact .field:has([name=email]) { grid-column: auto; }

  .page-buy .field:has([name=city]),
  .page-buy .field:has([name="zip code"]) { grid-column: auto; }

  /* ---------- listen: title above its player, EQ below ---------- */
  .page-listen h1 { margin-bottom: 26px; text-align: center; }
  .track { width: 100%; max-width: 420px; margin-bottom: 16px; }
  .track .t14 { text-align: left !important; }
  .track .player { height: 32px; padding: 6px 0; gap: 14px; }

  .stage .eq {
    --cols: 22px repeat(12, minmax(0, 1fr)) 22px;
    width: 100% !important; max-width: 420px;
    margin-top: 30px;
    font-size: 9px;
  }
  .eq-faders { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .eq-lines { left: 4px; right: 20px; }
  .eq-cap { width: 18px; height: 26px; }
  .eq-slot { width: 6px; }
  .eq-slot::before { left: -4px; right: -4px; }
  .eq-db, .eq-scale span { font-size: 8px; }
  .eq-reset { padding: 8px 16px; }

  /* ---------- release notes ---------- */
  .page-notes {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-items: center; align-content: start;
    column-gap: 12px; row-gap: 18px;
  }
  .page-notes > * { grid-column: 1 / -1; text-align: center !important; max-width: 420px; }
  .page-notes > a:first-child { margin-bottom: 10px; }
  .page-notes .t14 { line-height: 19px !important; }
  .page-notes > p.t14 { padding: 0 !important; }
  .stage.page-notes > img {
    grid-column: auto;
    width: 100% !important; max-width: 200px; height: auto !important; aspect-ratio: 1;
  }
  .page-notes > img:nth-of-type(1) { justify-self: end; }
  .page-notes > img:nth-of-type(2) { justify-self: start; }
}