/* ===========================
   Mix Archive — site.css (blue, no tiling)
   =========================== */

/* --- Theme tokens --- */
:root{
  --text:#0f172a;        /* near-black */
  --muted:#475569;       /* gray text */
  --accent:#2563eb;      /* blue-600 */
  --accent-2:#0ea5e9;    /* sky-500 */
  --surface:#f1f5ff;     /* very light blue */
  --surface-2:#e6eeff;   /* lighter blue tint */
  --radius:16px;
}

/* --- Page background & base typography --- */
html, body { height:100%; }
body{
  margin:0;
  padding:32px;
  min-height:100dvh;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial;
  color:var(--text);

  /* Non-repeating, viewport-pinned blue gradient */
  background:
    radial-gradient(1100px 520px at 8% -10%, rgba(37,99,235,.25), transparent 60%),
    radial-gradient(1000px 480px at 95% 0%, rgba(14,165,233,.18), transparent 60%),
    linear-gradient(180deg, #c7d2fe 0%, #dbeafe 40%, #e6f0ff 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  background-size: 140% 140%, 140% 140%, cover;
}

/* --- Main container (transparent glass on blue) --- */
main{
  max-width:980px;
  margin:0 auto;
  padding:clamp(20px, 3vw, 36px);
  background: rgba(244,248,255,0.35);  /* soft blue glass, not white */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(30,64,175,.15); /* blue-800 @15% */
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15,23,42,.15);
}

/* --- Type --- */
h1{ margin:0 0 12px; font-size:clamp(26px, 2.6vw, 36px); font-weight:800; letter-spacing:.2px; }
h2{ margin:28px 0 10px; font-size:20px; }
p{ margin:0 0 16px; }
.lede{ color:var(--muted); margin-bottom:16px; }

/* --- Links --- */
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* --- Lists --- */
ul, ol{ margin:0 0 16px 20px; }
.meta .muted, .mix-meta{ color:var(--muted); }

/* ===========================
   Homepage: pretty title-only list
   =========================== */

.mix-list.pretty{
  list-style:none;
  padding:0;
  margin:20px 0 0;
  display:grid;
  gap:12px;
}

.mix-item{
  position:relative;
  border:1px solid rgba(30,64,175,.18); /* blue-800 @18% */
  border-radius:var(--radius);

  /* subtle blue-tinted surface (not white) */
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--surface), #fff 6%),
      color-mix(in oklab, var(--surface-2), #000 4%));

  overflow:hidden;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* accent sheen on hover */
.mix-item::before{
  content:"";
  position:absolute;
  inset:0 0 0 0;
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent), transparent 75%), transparent 100%);
  opacity:0;
  transform:scaleX(.98);
  transform-origin:left;
  transition:transform .25s ease, opacity .25s ease;
  pointer-events:none;
}

.mix-link{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  color:inherit;
  text-decoration:none;
}

.mix-text{ display:grid; gap:4px; }

.mix-title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(16px, 2vw, 18px);
}

.mix-meta{ font-size:14px; }

.mix-right{ display:inline-flex; align-items:center; gap:10px; }

.chip{
  font-size:12px;
  font-weight:700;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(30,64,175,.18);
  background: color-mix(in oklab, var(--surface), #000 6%);
  color:var(--text);
}

.arrow{ opacity:.6; transition:transform .15s ease, opacity .15s ease; }

.mix-item:hover{
  transform:translateY(-2px);
  border-color: var(--accent);
  box-shadow:0 12px 36px rgba(2,6,23,.18);
}
.mix-item:hover::before{ opacity:.16; transform:scaleX(1); }
.mix-item:hover .arrow{ transform:translateX(3px); opacity:1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mix-item, .arrow, .mix-item::before{ transition:none; }
}

/* ===========================
   Mix detail page (player, downloads, pager)
   =========================== */

audio{ width:100%; margin:16px 0; }

/* Download buttons */
.downloads{
  display:flex; flex-wrap:wrap; gap:10px; margin:16px 0;
}
.downloads a{
  display:inline-block;
  border:1px solid rgba(30,64,175,.18);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--surface), #fff 6%),
    color-mix(in oklab, var(--surface-2), #000 4%));
  color:var(--text);
  font-weight:600;
  padding:10px 14px;
  border-radius:12px;
  transition:.2s ease;
}
.downloads a:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
}

/* Smaller H1 on mix pages */
.mix-page h1{
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.2;
}

/* Prev/Next pager */
.pager{
  display:flex; align-items:center; gap:10px;
  margin-top:24px; padding-top:16px;
  border-top:1px solid rgba(30,64,175,.18);
}
.pager .spacer{ flex:1; }
.pager-link{
  text-decoration:none;
  border:1px solid rgba(30,64,175,.18);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--surface), #fff 6%),
    color-mix(in oklab, var(--surface-2), #000 4%));
  color:var(--text); font-weight:600;
  padding:10px 14px; border-radius:12px;
  transition:.2s ease;
}
.pager-link:hover{ transform:translateY(-1px); border-color:var(--accent); }