/* interlectra — shared chrome for the pages added after the SEO build
   (about, vinyl, remixes, label, blog, /releases/*). The original four pages
   keep their own inline CSS; this file exists so new pages don't fork it again. */

:root{--bg:#14121a;--card:#1c1c23;--text:#f0eff4;--dim:#8f8c9c;--pink:#ff6ea0;--brand:#d4145a;--blue:#5ba8d4}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:'Space Mono',monospace;color:var(--text);line-height:1.75}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--pink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}
img{max-width:100%}
html,body{overflow-x:hidden;max-width:100%}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- nav (mirrors the original pages) ---------- */
.nav{position:relative;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px 48px;border-bottom:1px solid rgba(255,255,255,.07);background:#14121a}
.nav-logo{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.16em;color:var(--text)}
.nav-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.nav-links a{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);padding:6px 2px}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{position:relative;color:var(--pink)}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--pink);box-shadow:0 0 10px rgba(255,110,160,.7)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:4px}
.nav-toggle span{width:22px;height:2px;background:#f0eff4;display:block;border-radius:2px}
@media(max-width:760px){
  .nav-toggle{display:flex}
  .nav{position:relative;flex-wrap:nowrap}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:#14121a;border-bottom:1px solid rgba(255,255,255,.1);padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease;z-index:60}
  .nav-links.open{max-height:480px;padding:6px 0}
  .nav-links a{padding:13px 22px;width:100%;font-size:11px}
}

/* ---------- About: a text page, so the column is centred rather than pinned
   left, which is what leaves a void on a wide screen. Same components and type
   as every other page — only the alignment differs. ---------- */
/* the page head stays left and full-bleed, glow included, exactly like Releases;
   only the body content below it is centred. */
.page-about .prose,.page-about .sec{max-width:820px;margin-left:auto;margin-right:auto}
/* the column is sized to the reading measure, so there is no slack beside the text */
.page-about .sec .grid{grid-template-columns:repeat(3,1fr)!important}
@media(max-width:820px){
  .page-about .sec .grid{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:600px){
  .page-about .sec .grid{grid-template-columns:repeat(2,1fr)!important}
}

/* ---------- page head ---------- */
.page-head{padding:52px 48px 30px;animation:fadeUp .7s ease both;background:radial-gradient(ellipse 50% 70% at 30% 20%,rgba(212,20,90,.12) 0%,transparent 70%)}
.page-head .kicker{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--pink);margin-bottom:10px}
.page-head h1{font-family:'Bebas Neue',sans-serif;font-size:60px;letter-spacing:.02em;line-height:1;margin:0;font-weight:400}
.page-head .standfirst{margin:14px 0 0;max-width:62ch;font-size:12.5px;line-height:1.95;color:#b9b5c6}

/* ---------- breadcrumbs ---------- */
.crumbs{padding:16px 48px 0;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.crumbs a{color:var(--dim)}
.crumbs a:hover{color:var(--pink)}
.crumbs span{margin:0 8px;opacity:.5}

/* ---------- prose ---------- */
.prose{padding:8px 48px 20px;max-width:74ch}
.prose h2{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:28px;letter-spacing:.03em;line-height:1.1;margin:40px 0 12px}
.prose h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin:32px 0 10px;font-weight:700}
.prose p{font-size:12.5px;line-height:2.05;color:#c3bfd0;margin:0 0 16px}
.prose ul{padding-left:20px;margin:0 0 16px}
.prose li{font-size:12.5px;line-height:2.05;color:#c3bfd0;margin-bottom:6px}
.prose a{color:var(--pink);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:#fff}
.prose strong{color:var(--text);font-weight:700}

/* ---------- release page ---------- */
.release{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;padding:44px 48px 12px;animation:fadeUp .7s ease both}
.release-art{width:260px;height:auto;aspect-ratio:1;object-fit:cover;max-width:100%;border-radius:12px;display:block}
.release-copy{flex:1;min-width:min(100%,320px);max-width:60ch}
.release-copy h1{font-family:'Bebas Neue',sans-serif;font-size:52px;letter-spacing:.02em;line-height:1;margin:0 0 10px;font-weight:400}
.release-copy .facts{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 22px}
.release-copy .facts a{color:var(--pink)}
.release-copy p{font-size:12px;line-height:2;color:#a5a2b2;margin:0 0 14px}
.release-copy .lbl{display:inline-block;min-width:74px;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.release-copy a{color:var(--pink)}
.release-copy .btn-pill,.release-copy .btn-ghost{color:#fff}
.release-copy .btn-ghost{color:var(--text)}
@media(max-width:900px){.release{padding:30px 20px 8px;gap:26px}.release-copy h1{font-size:40px}}
@media(max-width:600px){.release{padding:24px 16px 6px}.release-art{width:200px}.release-copy h1{font-size:36px}}

/* ---------- generic section + cards ---------- */
.sec{padding:26px 48px 36px;animation:fadeUp .9s ease .15s both}
.sec-title{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:.03em;margin:0 0 18px;font-weight:400}
.grid{display:grid;gap:16px}
.rel-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:11px;border-radius:12px;transition:transform .2s;background:var(--card)}
.rel-card:hover{transform:translateY(-3px);color:var(--text)}
.rel-card img.art{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.rel-title{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--text)}
.rel-meta{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:-4px;color:var(--dim)}

.card{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px 22px}
.card h3{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.03em;margin:0 0 6px;font-weight:400}
.card p{font-size:11.5px;line-height:1.9;color:#a5a2b2;margin:0}

.btn-pill{display:inline-block;padding:11px 22px;border-radius:999px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;background:var(--brand);color:#fff;transition:transform .2s}
.btn-pill:hover{color:#fff;transform:translateY(-2px)}
.btn-ghost{display:inline-block;padding:11px 22px;border-radius:999px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;border:1px solid rgba(255,255,255,.2);color:var(--text)}
.btn-ghost:hover{border-color:var(--pink)}

.meta-list{display:flex;flex-wrap:wrap;gap:10px 34px;padding:0;margin:0;list-style:none}
.meta-list div{display:flex;flex-direction:column;gap:3px}
.meta-list dt{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.meta-list dd{margin:0;font-size:12px;color:var(--text)}

/* ---------- footer ---------- */
.footer-contact{margin-top:56px;padding:48px 48px 40px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.footer-links a{color:var(--dim)}
.footer-links a:hover{color:var(--pink)}
.footer-bar{display:flex;justify-content:center;padding:20px 48px;border-top:1px solid rgba(255,255,255,.08);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

@media(max-width:900px){
  .nav{padding:16px 18px;gap:10px;flex-wrap:wrap}.nav-links{gap:14px}
  .page-head{padding:36px 20px 22px}.page-head h1{font-size:42px}
  .crumbs,.prose,.sec{padding-left:20px;padding-right:20px}
  .footer-contact{padding:28px 20px;flex-direction:column;align-items:flex-start}
  .sec .grid{grid-template-columns:repeat(3,1fr)!important;gap:12px}
}
@media(max-width:600px){
  .nav{padding:14px 16px}
  .page-head{padding:30px 16px 18px}.page-head h1{font-size:38px}
  .crumbs,.prose,.sec{padding-left:16px;padding-right:16px}
  .footer-contact{padding:24px 16px}
  .footer-bar{padding:18px 16px;text-align:center}
  .sec .grid{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .page-head .standfirst{font-size:12px}
}