:root{
    --bg:#0b0b0c; --panel:#111215; --text:#e9e9ee; --muted:#a8adbd;
    --accent:#ff7a1a; --accent-2:#8ab4ff; --border:#1e2026;
    --shadow:0 10px 30px rgba(0,0,0,.35); --radius:16px; --maxw:1200px;
    --card-w: 220px; /* width target for carousels */
  }
  @media (prefers-color-scheme: light){
    :root{ --bg:#f7f7fb; --panel:#fff; --text:#15151a; --muted:#5c6274;
           --accent:#e05500; --accent-2:#2f6fff; --border:#e9e9f1;
           --shadow:0 10px 30px rgba(16,22,60,.08); }
  }
  *{box-sizing:border-box}
  body{
    margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    color:var(--text);
    background:
      var(--bg);
    line-height:1.6;
  }
  /* Reset link styles globally */
    a { color: inherit; text-decoration: none; }

    /* Make just the title underline on hover for a nice affordance */
    .card:hover .title { text-decoration: underline; }

    /* Tidy the text stack */
    .card-body .title  { margin: 0 0 2px; }
    .card-body .artist { margin: 0 0 6px; color: var(--muted); }
    .card-body .date   { margin: 0;       color: var(--muted); font-size: .86rem; }

    /* Keyboard focus ring on cards (accessible but subtle) */
    .card:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--accent), white 20%);
    outline-offset: 2px;
    border-color: color-mix(in oklab, var(--accent), white 20%);
    }

  .container{ width:min(100%,var(--maxw)); margin:0 auto; padding:0 20px; }

  header.site-header{
    position:sticky; top:0; z-index:10; backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
    background: color-mix(in oklab, var(--bg), transparent 15%);
  }
  img{max-width:100%;display:block}
  .nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:14px 0; }
  .brand{ display:flex; align-items:center; gap:.8rem; }
  .brand-logo{ width:38px; height:38px; border-radius:10px;
    background: radial-gradient(80% 80% at 30% 20%, #fff3, transparent),
                linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: var(--shadow); }
  .brand h1{ font-size:1.1rem; margin:0; }
  .nav-links{ display:flex; gap:.8rem; align-items:center; }
  .nav-links a{ padding:.6rem .8rem; border-radius:10px; border:1px solid transparent; color:inherit; text-decoration:none; }
  .nav-links a:hover{ border-color:var(--border); background:color-mix(in oklab,var(--panel),transparent 20%); }

  h2.section-title{
    margin:28px 0 12px; font-size:1.2rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  }

  /* Card */
  .card{
    width:100%; background:var(--panel); border:1px solid var(--border); border-radius:12px;
    overflow:hidden; box-shadow:var(--shadow); transition:transform .12s ease, border-color .2s ease;
  }
  .card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.15); }
  .cardnot{
    width:100%; background:var(--panel); border:1px solid var(--border); border-radius:12px;
    overflow:hidden; box-shadow:var(--shadow); transition:transform .12s ease, border-color .2s ease;
  }
  .thumb{ aspect-ratio:1/1; background:#1a1c23; }
  .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .card-body{ padding:10px 12px 14px; }
  .title{ font-size:1rem; font-weight:700; margin:0 0 4px; line-height:1.25; }
  .artist{ color:var(--muted); font-size:.95rem; margin:0 0 6px; }
  .date{ color:var(--muted); font-size:.85rem; }

  /* ——— Sections 1 & 2: horizontal rails with arrows ——— */
  .rail-wrap{ position:relative; }
.rail {
  --gap: 14px;
  --per: 5; /* show 5 per view on desktop */
  display: grid;
  grid-auto-flow: column;
  gap: var(--gap);
  /* each column = (container width - total gaps) / items per view */
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0; /* ensure last card can fully align */
}
  .rail .card {
  scroll-snap-align: start;
  min-width: 0; /* prevent extra overflow from min-width defaults */
}
  .rail::-webkit-scrollbar{ height:8px; } .rail::-webkit-scrollbar-thumb{ background:#00000033; border-radius:8px; }
@media (max-width: 1200px) { .rail { --per: 4; } }
@media (max-width: 980px)  { .rail { --per: 3; } }
@media (max-width: 760px)  { .rail { --per: 2; } }
@media (max-width: 500px)  { .rail { --per: 1; } }
/* Add a small end spacer so the last card isn't tight against the right edge */
.rail::after {
  content: "";
  width: 1px;  /* grid treats this as one more column with minimal width */
}

  .arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; border-radius:999px; border:1px solid var(--border);
    background:color-mix(in oklab,var(--panel),transparent 10%);
    display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow);
    opacity: 0%;
  }
  .arrow:hover{ background:color-mix(in oklab,var(--panel),transparent 0%); }
  .arrow.left{ left:-8px; } .arrow.right{ right:-8px; }
  .arrow svg{ width:18px; height:18px; fill:var(--text); }

  /* ——— Section 3: full grid (5 across on desktop) ——— */
  .grid{
    display:grid; gap:16px;
    grid-template-columns: repeat(5, 1fr);
  }
  @media (max-width:1200px){ .grid{ grid-template-columns: repeat(4, 1fr);} }
  @media (max-width:980px){ .grid{ grid-template-columns: repeat(3, 1fr);} }
  @media (max-width:760px){ .grid{ grid-template-columns: repeat(2, 1fr);} :root{ --card-w: 46vw; } }
  @media (max-width:500px){ .grid{ grid-template-columns: 1fr;} :root{ --card-w: 82vw; } }

  .section-panel{
    background:var(--panel); border:1px solid var(--border); border-radius: var(--radius);
    padding:16px; box-shadow: var(--shadow);
  }

  footer{ border-top:1px solid var(--border); padding:28px 0 48px; color:var(--muted); font-size:.95rem; }

  .fav-badge{
  position: absolute; top: 8px; right: 8px;
  font-size: .9rem; line-height: 1;
  padding: .25rem .45rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,215,0,.25), transparent);
  border: 1px solid #ffd700; color: #ffd700;
  pointer-events: none; /* purely decorative */
}
/* Keep Favorites same width as others */
.favorites {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: 1rem;
}

.fav-title { color: rgb(255, 226, 64); text-shadow: 0 0 8px rgba(255,215,0,.6); }

.favorites .card{
  border: 2px solid rgba(255,215,0,.45);
  box-shadow: 0 0 10px rgba(255,215,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cardnot{
  border: 2px solid rgba(255,215,0,.45);
  box-shadow: 0 0 10px rgba(255,215,0,.15);
}
.favorites .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(255,215,0,.28);
}
.favorites .fav-badge{
  background: gold; color:#000; font-weight:700; border:none;
}
:root { --gold: #ffd700; --gold-ink: #3a3000; }

/* Make sure the gold title wins over .section-title */
h2.section-title.fav-title {
  color: var(--gold) !important;     /* stronger than the base rule */
  letter-spacing: .08em;
  position: relative;
  margin-bottom: 10px;
}
h2.section-title.fav-title::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:68px; height:2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}

/* Favorite cards: subtle golden outline + glow */
.favorites .card{
  border: 2px solid color-mix(in oklab, var(--gold), transparent 55%);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--gold), transparent 70%) inset,
    0 6px 18px rgba(255, 215, 0, .12);
}
.favorites .card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--gold), transparent 40%) inset,
    0 10px 24px rgba(255, 215, 0, .22);
}

/* Crown medal (replaces the star) */
.favorites .fav-medal{
  position:absolute; top:10px; right:10px;
  width:24px; height:24px; border-radius:999px;
  display:grid; place-items:center;
  background: radial-gradient(90% 90% at 30% 25%, #fff6, transparent 45%),
              linear-gradient(180deg, #ffe58a, var(--gold));
  border:1px solid color-mix(in oklab, var(--gold), black 30%);
  box-shadow: 0 4px 10px rgba(255,215,0,.25), 0 0 0 2px #0003;
  color: var(--gold-ink);
  pointer-events:none;
}
.favorites .fav-medal svg{ width:14px; height:14px; fill: currentColor; }

/* remove the old star style if it exists */
.favorites .fav-badge{ display:none; }
section.favorites.section-panel{
  background: linear-gradient(180deg, rgba(255,215,0,.04), transparent 40%) , var(--panel);
}
.rail { padding-block: 6px; }
.chip{display:inline-block;font-size:.8rem;padding:.25rem .6rem;border-radius:999px;background:rgba(138,180,255,.15);color:var(--accent-2);border:1px solid rgba(138,180,255,.25)}
.chipred{display:inline-block;font-size:.8rem;padding:.25rem .6rem;border-radius:999px;background:rgba(51, 51, 51, 0.15);color:white;border:1px solid rgba(50, 50, 50, 0.25)}

.favorite-albums-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.favorite-albums-grid .card {
  min-width: 0; /* prevent overflow */
}
@media (max-width: 1200px) { .favorite-albums-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 980px)  { .favorite-albums-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .favorite-albums-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .favorite-albums-grid { grid-template-columns: repeat(1, 1fr); } }