/* Mixtape.wiki — warm cinematic theme inspired by the game's painterly look */
:root{
  /* Comfort palette — lower contrast, fewer hot accents */
  --bg:#1a1610;            /* lifted warm-black, reduces dazzle vs pure black */
  --bg-2:#221c14;
  --paper:#dccfae;         /* default text — softer warm cream */
  --paper-2:#c9bb98;
  --ink:#d4c8a8;           /* body text — ~9:1 contrast (was ~13:1) */
  --ink-dark:#2a1f12;
  --muted:#9a886e;         /* secondary text — quiet warm grey */
  --orange:#cf7a40;        /* used sparingly, only for primary CTA */
  --orange-2:#a84d2b;
  --mustard:#c79a4a;       /* further tamed; reserved for links + accents */
  --olive:#8a8a3e;
  --rust:#a84a32;
  --teal:#5b8a8a;
  --line:rgba(220,207,174,.09);
  --card:rgba(220,207,174,.035);
  --card-2:rgba(220,207,174,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Page-wide noise overlay removed — it was the main source of scroll shimmer.
   A subtle paper texture is now only inside .hero (see below). */
body > *{position:relative;z-index:2}
a{color:var(--mustard);text-decoration:none}
a:hover{color:var(--orange)}
img{max-width:100%;display:block}
.container{max-width:1140px;margin:0 auto;padding:0 22px}

/* ============ NAV ============ */
nav.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(20,16,10,.78);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:18px;padding:14px 22px;max-width:1140px;margin:0 auto}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--paper)}
.brand .dot{display:inline-block;width:11px;height:11px;border-radius:2px;background:linear-gradient(135deg,var(--orange),var(--mustard));margin-right:9px;vertical-align:middle;transform:rotate(-8deg)}
.nav-links{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav-links a{padding:8px 12px;border-radius:8px;font-size:14px;color:var(--muted)}
.nav-links a.active,.nav-links a:hover{background:var(--card-2);color:var(--paper)}

/* ============ HERO ============ */
/* Distinguished from body sections via a darker base + subtle warm vignette,
   so the eye lands on the H1 first instead of scanning everywhere. */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(80% 60% at 78% 0%, rgba(207,122,64,.14), transparent 60%),
    linear-gradient(180deg,#1d1812 0%, #14110b 100%);
  border-bottom:1px solid var(--line);
}
/* soft warm sun, contained — clear focal point without glare */
.hero::before{
  content:"";position:absolute;top:-200px;right:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(199,154,74,.22) 0%, rgba(207,122,64,.08) 45%, transparent 72%);
  pointer-events:none;filter:blur(8px);
}
/* gentle fade at the bottom so the hero clearly ends and the next section begins */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:80px;
  background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none;
}
.hero-inner{padding:84px 22px 96px;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;position:relative}
@media(max-width:920px){.hero-inner{grid-template-columns:1fr;padding:56px 22px 80px;gap:36px}}

/* Hero-only typography: bigger and breathier than body H1 */
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.04;letter-spacing:-.025em;margin:20px 0 22px}
/* Subtle two-stop gradient on the accent line — warm but not loud */
.hero h1 .grad{
  background:linear-gradient(92deg,#d6a35a 0%, #c47a3f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
}
.hero p.lead{font-size:1.1rem;color:var(--paper-2);max-width:54ch}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--line);padding:6px 12px;border-radius:4px;font-weight:600}
.eyebrow::before{content:"●";color:var(--orange);font-size:9px;opacity:.85}

h1{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.02em;margin:18px 0 18px;color:var(--paper)}
/* The 'gradient' line is now solid mustard for one accent line only — no rainbow scan. */
h1 .grad{color:var(--mustard);font-weight:700;display:inline-block}
.grad-text{color:var(--mustard)}
h2{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.012em;margin:48px 0 14px;color:var(--paper)}
h2::before{content:"";display:inline-block;width:22px;height:2px;background:var(--muted);vertical-align:middle;margin-right:12px;transform:translateY(-6px);opacity:.7}
h3{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.12rem;font-weight:600;margin:26px 0 8px;color:var(--paper)}
p.lead{font-size:1.05rem;color:var(--paper-2);max-width:62ch;line-height:1.65}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:6px;font-weight:600;font-family:'Space Grotesk',sans-serif;letter-spacing:.02em;border:1px solid var(--line);background:var(--card);color:var(--paper);transition:.2s}
.btn.primary{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-2) 100%);border:none;color:#fff;box-shadow:0 8px 24px rgba(193,83,42,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.btn:hover{border-color:var(--paper-2);color:var(--paper);background:var(--card-2)}

/* ============ PLAYER WRAP — cassette tape framing (subdued) ============ */
.play-wrap{
  position:relative;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);
  background:#0a0805;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.play-wrap iframe{display:block;width:100%;height:480px;border:0;background:#000}
@media(max-width:920px){.play-wrap iframe{height:400px}}
.play-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;background:#15110b;border-top:1px solid var(--line);font-size:13px;color:var(--muted);font-family:'Space Grotesk',sans-serif}
.badge{display:inline-block;padding:3px 10px;border-radius:3px;background:var(--card-2);color:var(--paper-2);font-size:11px;letter-spacing:.12em;border:1px solid var(--line);font-weight:600;margin-right:6px}

/* "label" sticker on top of any media — cassette aesthetic */
.tape-label{
  position:absolute;top:14px;left:14px;
  background:var(--paper);color:var(--ink-dark);
  padding:4px 10px;border-radius:2px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transform:rotate(-2deg);z-index:3
}

/* ============ STATS ============ */
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.stat{padding:11px 15px;background:var(--card);border:1px solid var(--line);border-radius:6px;font-size:12px;color:var(--muted);font-family:'Space Grotesk',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.stat b{display:block;font-size:1.35rem;color:var(--paper);font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em;text-transform:none;margin-bottom:2px;font-weight:700}

/* ============ SECTIONS ============ */
.section{padding:54px 0;border-bottom:1px solid var(--line)}
.section.alt{background:linear-gradient(180deg,transparent 0%,rgba(224,122,58,.04) 50%,transparent 100%)}

/* ============ GRID + CARDS ============ */
.grid{display:grid;gap:18px}
.grid.cards-3{grid-template-columns:repeat(3,1fr)}
.grid.cards-4{grid-template-columns:repeat(4,1fr)}
.grid.cards-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:920px){.grid.cards-3,.grid.cards-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid.cards-3,.grid.cards-4,.grid.cards-2{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px;
  transition:.2s;color:inherit;display:block;
}
.card:hover{border-color:rgba(228,176,74,.5);background:var(--card-2);transform:translateY(-2px);color:inherit}
.card h3{margin:0 0 6px}
.card p{color:var(--muted);font-size:14px;margin:0;line-height:1.55}

/* media card with image on top */
.media-card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:block;color:inherit}
.media-card:hover{border-color:rgba(228,176,74,.5);color:inherit}
.media-card .thumb{aspect-ratio:16/9;width:100%;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.media-card .body{padding:16px 18px}
.media-card h3{margin:0 0 4px}
.media-card p{margin:0;color:var(--muted);font-size:13.5px}

/* ============ TABLES ============ */
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;background:var(--card);border-radius:8px;overflow:hidden;border:1px solid var(--line)}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
th{color:var(--paper-2);font-weight:600;background:rgba(220,207,174,.04);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-family:'Space Grotesk',sans-serif}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(245,232,200,.03)}

/* ============ MISC ============ */
ul.clean{list-style:none;padding:0;margin:14px 0}
ul.clean li{padding:9px 0;border-bottom:1px dashed var(--line);color:var(--paper-2)}
ul.clean li:last-child{border-bottom:none}
.kbd{display:inline-block;padding:2px 8px;background:#2a1f12;border:1px solid var(--line);border-radius:4px;font-family:ui-monospace,monospace;font-size:12px;color:var(--mustard)}
.callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--mustard);padding:14px 18px;border-radius:6px;margin:18px 0;color:var(--paper-2)}
.callout strong{color:var(--paper)}
.callout.warn{background:var(--card);border-color:var(--line);border-left-color:var(--rust)}
.crumb{font-size:13px;color:var(--muted);margin:18px 0 0;font-family:'Space Grotesk',sans-serif;letter-spacing:.04em}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--mustard)}
footer{padding:42px 22px 64px;color:var(--muted);font-size:13.5px;text-align:center;border-top:1px solid var(--line);background:rgba(0,0,0,.25)}
footer a{color:var(--paper-2)}
footer a:hover{color:var(--mustard)}
.tag{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:3px;background:var(--card-2);color:var(--paper-2);border:1px solid var(--line);margin-right:6px;font-weight:600;font-family:'Space Grotesk',sans-serif}
details{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 18px;margin:10px 0}
details summary{cursor:pointer;font-weight:600;font-family:'Space Grotesk',sans-serif;color:var(--paper)}
details[open]{border-color:rgba(228,176,74,.4);background:var(--card-2)}
.score{display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.25);border:1px solid var(--line);padding:6px 11px;border-radius:4px;font-family:'Space Grotesk',monospace;font-size:13px}
.score b{color:var(--paper)}

/* ============ EMBEDDED VIDEO (16:9) ============ */
.video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;border:1px solid var(--line)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
figure{margin:24px 0}
figcaption{font-size:13px;color:var(--muted);margin-top:8px;font-style:italic;text-align:center}

/* ============ CASSETTE DIVIDER ============ */
.cassette-divider{
  display:flex;align-items:center;gap:14px;margin:42px 0 28px;
  font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)
}
.cassette-divider::before,.cassette-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}