/* Repeat Listen – skivomslaget och innerpåsen.
   Papper i benvitt, svart tryck, en varm orange accent och genrernas färger på omslagen. */

:root {
  --bg: #f4f1ea;
  --bg-2: #e9e4d8;
  --card: #fbf9f4;
  --ink: #151515;
  --ink-2: #3d3a35;
  --muted: #77716a;
  --line: #d9d2c4;
  --accent: #e8572a;
  --accent-ink: #ffffff;
  --accent-soft: #fbe2d8;
  --accent-deep: #b23c14;
  --lemon: #f2c14e;
  --mint: #3f8f6b;
  --licorice: #151515;
  --solid: #151515;
  --on-solid: #f4f1ea;
  --shadow: 0 1px 2px rgba(21, 21, 21, .06), 0 10px 24px -12px rgba(21, 21, 21, .25);
  --shadow-lg: 0 2px 4px rgba(21, 21, 21, .08), 0 24px 48px -18px rgba(21, 21, 21, .35);
  --radius: 4px;
  --radius-sm: 3px;
  --font-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212; --bg-2: #1b1b1a; --card: #1a1918; --ink: #f1ede4; --ink-2: #cfc8bb; --muted: #9a9389;
    --line: #2f2d2a; --accent: #ff7a45; --accent-ink: #121212; --accent-soft: #3a1d12; --accent-deep: #ffa47a;
    --solid: #f1ede4; --on-solid: #121212;
  }
}
:root[data-theme="dark"] {
  --bg: #121212; --bg-2: #1b1b1a; --card: #1a1918; --ink: #f1ede4; --ink-2: #cfc8bb; --muted: #9a9389;
  --line: #2f2d2a; --accent: #ff7a45; --accent-ink: #121212; --accent-soft: #3a1d12; --accent-deep: #ffa47a;
  --solid: #f1ede4; --on-solid: #121212;
}

body { font-size: 18px; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.01em; line-height: 1.05; }
h3, h4 { font-family: var(--font-body); font-weight: 650; letter-spacing: 0; line-height: 1.2; }
.eyebrow, .byline, .kicker, .badge, .hero-stats dt, .pr-cols, .meter-text, .mono { font-family: var(--font-mono); }
.eyebrow { font-weight: 500; font-size: .74rem; letter-spacing: .14em; }

.btn { border-radius: 999px; background: var(--solid); border-color: var(--solid); color: var(--on-solid); box-shadow: none; font-family: var(--font-mono); font-weight: 500; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.btn-light { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-light:hover { background: #fff; border-color: #fff; color: #151515; }

/* Sidhuvud */
.site-header { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); }
.logo-mark { border-radius: 50%; }
.logo-word { font: 400 1.35rem/1 var(--font-display); font-style: normal; letter-spacing: -.02em; text-transform: uppercase; }
.site-nav a:not(.btn) { font-family: var(--font-mono); font-size: .82rem; }
.site-nav a[aria-current="page"]:not(.btn) { background: var(--ink); color: var(--bg); }
.nav-cta { background: var(--accent); border-color: var(--accent); color: #fff; }

.chip { font-family: var(--font-mono); font-size: .82rem; border-color: var(--line); }
.chip.is-on { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.badge { border-radius: 999px; }
.badge-reference { background: var(--solid); color: var(--on-solid); }
.badge-bulk { background: var(--accent); color: #fff; }
.badge-approved { background: var(--bg-2); color: var(--ink-2); }
.badge-fallen { background: #8a8378; color: #fff; }
.badge-award { background: #f2c14e; color: #3b2a00; }
.vote { font-family: var(--font-mono); font-size: .86rem; }
.toast { background: var(--solid); color: var(--on-solid); font-family: var(--font-mono); }

/* ---------- Omslaget ---------- */
.record-art { position: relative; display: block; aspect-ratio: 1; }
.cover { position: absolute; inset: 0; z-index: 1; display: grid; overflow: hidden; color: #fff; background: var(--c); box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 10px 22px -12px rgba(0, 0, 0, .45); padding: 9%; text-align: left; }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; }
.cover-photo { padding: 0; }
.cover-artist { font: 500 clamp(.62rem, 1.6vw, .8rem)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; align-self: start; position: relative; z-index: 1; }
.cover-title { font: 400 clamp(1.1rem, 2.9vw, 1.7rem)/1 var(--font-display); letter-spacing: -.02em; align-self: end; position: relative; z-index: 1; overflow-wrap: anywhere; text-wrap: balance; }
.cover-year { position: absolute; right: 9%; top: 9%; font: 500 .68rem/1 var(--font-mono); opacity: .8; z-index: 1; }
/* Fyra omslagstyper, valda av skivans namn */
.cover-v1 { background: #f4f1ea; color: #151515; }
.cover-v1::before { content: ''; position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: var(--c); right: -12%; top: 14%; }
.cover-v2 { background: repeating-linear-gradient(-35deg, var(--c) 0 14px, color-mix(in srgb, var(--c) 72%, #000) 14px 28px); }
.cover-v2 .cover-title { background: #151515; color: #fff; padding: .25em .35em; justify-self: start; }
.cover-v3 { background: #151515; color: var(--c); }
.cover-v3 .cover-title { font-size: clamp(1.3rem, 3.4vw, 2.1rem); }
.cover-v0::after { content: ''; position: absolute; left: 0; right: 0; top: 46%; height: 3px; background: rgba(255, 255, 255, .7); }
.cover-big .cover-title { font-size: clamp(2rem, 5vw, 3.6rem); }
.cover-big .cover-artist { font-size: .9rem; }
.cover-big .cover-year { font-size: .85rem; }
.vinyl { position: absolute; z-index: 0; top: 4%; right: 4%; width: 92%; aspect-ratio: 1; border-radius: 50%; transform: translateX(13%); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
  background: radial-gradient(circle, var(--accent) 0 15%, #151515 15.5% 17%, #232323 17.5% 30%, #151515 30.5% 31.5%, #232323 32% 46%, #151515 46.5% 47.5%, #222 48%); }
.record-card:hover .vinyl, .record-art-big:hover .vinyl { transform: translateX(30%) rotate(30deg); }
.rc-badges { margin-bottom: 6px; }
.rc-badges .badge { font-size: .62rem; }

/* ---------- Kort ---------- */
.sort-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 20px; }
.record-card { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.record-card:hover { transform: none; box-shadow: none; }
.record-card .sort-photo { background: none; border-radius: 0; overflow: visible; margin-right: 12%; }
.record-card .sort-text { padding: 12px 0 0; }
.rc-artist { font: 500 .74rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.record-card .sort-text strong { font: 650 1.12rem/1.2 var(--font-body); margin-top: 2px; }
.rc-meta { font: 400 .76rem/1.3 var(--font-mono); color: var(--muted); }
.rc-score { margin-top: 4px; }
.record-card .sort-badges { z-index: 2; top: 8px; left: 8px; }
.stars-fill { color: var(--accent); }

/* ---------- Skivans sida ---------- */
.record { padding: clamp(28px, 5vw, 64px) 0 20px; }
.record-inner { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.record-media { margin: 0; position: sticky; top: 100px; padding-right: 14%; }
.record-art-big .vinyl { transform: translateX(16%); }
.record-artist { font: 500 .9rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; }
.record-artist a { text-decoration: none; color: var(--accent); }
.record h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: .25em; }
.rl-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 22px 0; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.rl-meter dt { font: 500 .74rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rl-meter dd { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; }
.growth { display: inline-block; font: 500 .74rem/1 var(--font-mono); padding: 5px 9px; border-radius: 999px; vertical-align: 1px; }
.growth-up { background: color-mix(in srgb, var(--mint) 18%, var(--card)); color: var(--mint); }
.growth-down { background: var(--bg-2); color: var(--muted); }
.growth-even { background: var(--bg-2); color: var(--ink-2); }
.review h2 { font-size: 1.5rem; }
.verdict { border-left: 4px solid var(--accent); }
@media (max-width: 820px) {
  .record-inner { grid-template-columns: 1fr; }
  .record-media { position: static; max-width: 340px; }
}

/* ---------- Listor ---------- */
.bag-card-visual, .bag-detail-visual { background: none; }
.bag-card-visual { padding: 18px 14% 6px; }
.sleeve-svg { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .18)); }
.bag-card:hover .bag-svg { transform: rotate(-2deg); }
.bag-card .rank { font-family: var(--font-display); background: var(--solid); color: var(--on-solid); }
.sorts.is-ranked { list-style: none; counter-reset: rank; padding: 0; }
.sorts.is-ranked li { counter-increment: rank; }
.sorts.is-ranked li .dot { display: none; }
.sorts.is-ranked li::before { content: counter(rank); font: 500 .74rem var(--font-mono); color: var(--muted); display: inline-block; width: 1.6em; }
.bag-contents.is-ranked { counter-reset: rank; }
.bag-contents.is-ranked li { counter-increment: rank; grid-template-columns: 2.4em 1fr; }
.bag-contents.is-ranked li .dot { display: none; }
.bag-contents.is-ranked li::before { content: counter(rank); font: 400 1.4rem/1 var(--font-display); color: var(--accent); align-self: start; padding-top: 2px; }
.bag-contents-name em { display: block; font-size: .92rem; color: var(--ink-2); margin-top: 2px; }
.builder-visual { width: 70%; }
.slot-ranked .slot-head { align-items: center; }
.slot-rank { font: 400 1.2rem/1 var(--font-display); color: var(--accent); min-width: 1.4em; }
.slot-move { display: inline-flex; gap: 2px; }
.slot-move button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 3px; width: 26px; height: 24px; cursor: pointer; font-size: .8rem; line-height: 1; }
.slot-move button:disabled { opacity: .35; cursor: default; }
.slot-move button:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.slot-note { width: 100%; margin-top: 8px; font: inherit; font-size: .9rem; padding: 7px 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); color: var(--ink); }
.slot-name small { color: var(--muted); font-weight: 400; }
.meter { border-radius: 999px; }
.meter-fill { background: var(--accent); }
.pick .candy-blob { border-radius: 50%; background: radial-gradient(circle, var(--c) 0 32%, #151515 33% 100%); box-shadow: none; }

/* ---------- Startsidan ---------- */
.rl-hero { padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.rl-hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.rl-hero h1 { font-size: clamp(2.8rem, 7.4vw, 5.8rem); line-height: .95; margin-bottom: .3em; }
.rl-hero .lead { max-width: 52ch; }
.rl-stack { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; }
.stack-item { position: absolute; width: 64%; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.stack-0 { left: 0; top: 4%; transform: rotate(-8deg); z-index: 1; }
.stack-1 { left: 18%; top: 16%; transform: rotate(3deg); z-index: 2; }
.stack-2 { left: 36%; top: 30%; transform: rotate(-2deg); z-index: 3; }
.stack-item:hover { transform: rotate(0) translateY(-10px); z-index: 4; }
.genres, .decades { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.genre, .decade { display: grid; padding: 12px 16px; border-radius: var(--radius); text-decoration: none; min-width: 120px; background: var(--card); border: 1px solid var(--line); }
.genre { border-left: 6px solid var(--c); }
.genre b, .decade b { font: 400 1.1rem/1.1 var(--font-display); }
.genre small, .decade small { font: 400 .72rem var(--font-mono); color: var(--muted); }
.genre:hover, .decade:hover { border-color: var(--ink); color: var(--ink); }
.rl-manifest { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-band { background: var(--solid); color: var(--on-solid); }
.cta-band::after { display: none; }
.cta-band h2, .cta-band p { color: var(--on-solid); }
@media (max-width: 820px) {
  .rl-hero-inner { grid-template-columns: 1fr; }
  .rl-stack { max-width: 320px; }
}

/* Skiva i löptext */
.record-feature { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.rf-art { width: 110px; }
.rf-art .cover-title { font-size: .95rem; }
.rf-text h3 { margin: 2px 0; font-size: 1.1rem; }
.rf-text p { margin: 6px 0 0; font-size: .95rem; }

.site-footer { background: #151515; color: #cfc8bb; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.sort-tools select, .sort-tools input { border-radius: var(--radius-sm); }
@media (max-width: 480px) { .logo-word { font-size: 1.02rem; white-space: nowrap; } }

/* Spotify */
.spotify-box { margin: 26px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.spotify-box p { flex-basis: 100%; margin: 0; }
.spotify-play { background: #1db954; border-color: #1db954; color: #0b0b0b; }
.spotify-play:hover { background: #1ed760; border-color: #1ed760; color: #0b0b0b; }
.spotify-link { font: 500 .85rem var(--font-mono); }
.embed-frame { width: 100%; height: 352px; border: 0; border-radius: 12px; flex-basis: 100%; }
.pick .candy-blob.has-cover { border-radius: 3px; background: #151515; overflow: hidden; }
.pick .candy-blob.has-cover img { width: 100%; height: 100%; object-fit: cover; }