/* =============================================================
   MAGMA BASSLINE — arkusz stylów
   Kolory i odstępy sterujesz zmiennymi w :root poniżej.
   ============================================================= */

:root{
  --ground:#060505;
  --ink:#F2ECE6;
  --dim:rgba(242,236,230,.52);
  --line:rgba(242,236,230,.16);
  --accent:#FF5A12;           /* nadpisywane per wydawnictwo z releases.js */

  /* CZYTELNOŚĆ TŁA — jedna liczba.
     0 = tło pełną mocą (jak na starej stronie), 1 = prawie czarne.
     0.62 to kompromis: lawa widoczna, tekst czytelny.            */
  --veil:.62;

  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --goth:"Grenze Gotisch","Archivo",serif;
  --orange:#FF3B10;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --quad:"Quadrillion",var(--mono);

  --pad:clamp(16px,3.4vw,44px);
  --hud:clamp(44px,6.2vh,62px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--ground); color:var(--ink);
  font-family:var(--mono);
  font-size:14px; line-height:1.5;
  overflow-x:hidden;
  min-height:100svh;
}
::selection{background:var(--accent); color:#000}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* ---------- TŁO (jedyny element przeniesiony ze starej strony) ---------- */
.bg{position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--ground)}
#fx{position:absolute; inset:0; width:100%; height:100%; display:block}
.bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .4s}
.bg.live img{opacity:0}

.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,5,5,.94) 0%, rgba(6,5,5,.42) 34%, rgba(6,5,5,.42) 62%, rgba(6,5,5,.96) 100%),
    rgba(6,5,5,var(--veil));
}
/* skanline + ziarno — faktura, nie efekt */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(180deg,
      rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}

/* ---------- RAMA / HUD ---------- */
.hud{position:fixed; inset:0; z-index:40; pointer-events:none}
.hud .bar{
  position:absolute; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 var(--pad); height:var(--hud);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.hud .top{top:0; border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(6,5,5,.86),rgba(6,5,5,0))}
.hud .bot{bottom:0; color:var(--dim); font-size:10px}
.hud a,.hud button{pointer-events:auto}

.brand{display:flex; align-items:baseline; gap:9px}
.brand b{font-family:var(--disp); font-weight:800; font-stretch:82%; letter-spacing:.02em; font-size:14px}
.brand span{color:var(--accent); font-size:10px; letter-spacing:.2em}

.nav{display:flex; align-items:center; gap:clamp(14px,2.4vw,28px)}
.nav a{position:relative; color:var(--dim); transition:color .18s}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px;
  background:var(--accent); transition:right .25s cubic-bezier(.22,.7,.2,1);
}
.nav a:hover{color:var(--accent); text-shadow:0 0 16px rgba(255,90,18,.5)} .nav a:hover::after{right:0}
.menu-btn{display:none; letter-spacing:.16em; font-size:11px; text-transform:uppercase; transition:color .18s}
.menu-btn:hover,.menu-btn:active{color:var(--accent); text-shadow:0 0 16px rgba(255,90,18,.5)}
.menu-btn b{display:inline-block; width:1.2em}

/* krzyżyki w rogach */
.cross{position:absolute; width:9px; height:9px; opacity:.5}
.cross::before,.cross::after{content:""; position:absolute; background:var(--accent)}
.cross::before{left:4px; top:0; width:1px; height:9px}
.cross::after{top:4px; left:0; height:1px; width:9px}
.c1{left:calc(var(--pad) - 4px); top:calc(var(--hud) + 10px)}
.c2{right:calc(var(--pad) - 4px); top:calc(var(--hud) + 10px)}
.c3{left:calc(var(--pad) - 4px); bottom:calc(var(--hud) + 10px)}
.c4{right:calc(var(--pad) - 4px); bottom:calc(var(--hud) + 10px)}
@media (max-width:720px){ .cross{display:none} }

.topbar{z-index:55}
body.nav-open .hud .bot{opacity:0}
.hud .bot{transition:opacity .2s}

/* pasek postępu przewijania */
.prog{position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:60; transition:width .08s linear}

/* ---------- MENU PEŁNOEKRANOWE (mobile) ---------- */
.sheet{
  position:fixed; inset:0; z-index:50; background:rgba(6,5,5,.97);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:calc(var(--hud) + 12px) var(--pad) var(--hud);
  opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s;
}
.sheet.open{opacity:1; visibility:visible}
.sheet a{
  font-family:var(--disp); font-weight:800; font-stretch:78%;
  font-size:clamp(30px,9vw,54px); line-height:1.06; letter-spacing:-.01em;
  text-transform:uppercase; border-bottom:1px solid var(--line); padding:12px 0;
  display:flex; justify-content:space-between; align-items:baseline;
}
.sheet a i{font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent)}
.sheet a i .ar{width:15px; height:15px}
.sheet a:active{color:var(--accent)}

/* ---------- UKŁAD ---------- */
#app{position:relative; z-index:10}
.view{opacity:1; transition:opacity .2s ease}
.view.out{opacity:0}
section{padding:0 var(--pad)}
.wrap{max-width:1320px; margin:0 auto; width:100%}

.label{
  display:flex; align-items:center; gap:12px;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
  margin-bottom:clamp(18px,3vh,34px);
}
.label::after{content:""; flex:1; height:1px; background:var(--line)}
.label b{color:var(--accent); font-weight:400}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:var(--hud); padding-bottom:calc(var(--hud) + 10px);
}
.hero h1{
  font-family:var(--disp); font-weight:900; font-stretch:74%;
  font-size:clamp(58px,19.5vw,250px); line-height:.84; letter-spacing:-.035em;
  text-transform:uppercase; margin:0;
}
.hero h1 .mg{display:block; color:var(--ink)}
.hero h1 .sub{
  display:block; font-weight:900; font-stretch:74%;
  -webkit-text-stroke:2px rgba(242,236,230,.88); color:#A8240A;
}

/* wjazd: MAGMA z lewej, chwilę później BASSLINE z prawej */
.hero h1 .mg { animation:inLeft 1.15s .40s cubic-bezier(.16,.86,.22,1) both }
.hero h1 .sub{ animation:inRight 1.15s .95s cubic-bezier(.16,.86,.22,1) both }
.hero .cue   { animation:fadeUp   .8s 1.68s ease both }
@keyframes inLeft {from{opacity:0; transform:translateX(-26%)} to{opacity:1; transform:none}}
@keyframes inRight{from{opacity:0; transform:translateX( 26%)} to{opacity:1; transform:none}}
@keyframes fadeUp {from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

.hero .meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:clamp(20px,3.4vh,38px);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.hero .meta b{color:var(--accent); font-weight:400}
.hero .meta .co{display:inline-flex; align-items:center; gap:8px; letter-spacing:.14em}
.gl{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.1; opacity:.85; flex:0 0 auto}
.hero .cue:hover{color:var(--accent); text-shadow:0 0 16px rgba(255,90,18,.45)}
.hero .cue{
  position:relative; z-index:2; align-self:flex-start;
  margin-top:clamp(30px,6vh,64px);
  display:inline-flex; align-items:center; gap:clamp(12px,1.6vw,20px);
  font-family:var(--disp); font-weight:700; font-stretch:84%;
  font-size:clamp(19px,3.4vw,38px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  padding-bottom:10px; border-bottom:1px solid var(--line);
  transition:color .2s, border-color .2s, gap .25s cubic-bezier(.22,.7,.2,1);
}
.hero .cue .ar{width:.86em; height:.86em; stroke-width:1.7}
.hero .cue span{display:inline-block; animation:bob 2.4s ease-in-out infinite}
.hero .cue:hover{
  color:var(--accent); border-color:var(--accent);
  gap:clamp(18px,2.4vw,30px); text-shadow:0 0 18px rgba(255,90,18,.45);
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}




.gothic{font-family:var(--goth); font-weight:700; letter-spacing:.01em}

/* kod kreskowy sciekajacy w krople */



/* ---------- LISTA WYDAWNICTW ---------- */
.releases{padding-top:clamp(46px,9vh,110px); padding-bottom:clamp(34px,6vh,70px)}
.pub{
  margin:calc(-1 * clamp(8px,1.4vh,16px)) 0 clamp(18px,3vh,30px);
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.pub b{color:var(--ink); font-weight:400; letter-spacing:.14em}

.rel-list{border-top:1px solid var(--line)}
.rel{
  display:grid; align-items:center; gap:clamp(12px,2vw,26px);
  grid-template-columns:auto 78px 1fr auto auto;
  padding:clamp(14px,2vh,20px) clamp(8px,1.4vw,18px);
  border-bottom:1px solid var(--line);
  position:relative; isolation:isolate; z-index:1;
  transition:color .22s, padding-left .28s cubic-bezier(.22,.7,.2,1),
             transform .32s cubic-bezier(.16,.86,.22,1), box-shadow .32s ease;
}
.rel::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--accent);
  transform:scaleY(0); transform-origin:bottom; transition:transform .28s cubic-bezier(.22,.7,.2,1);
}
.rel:hover::before,.rel:focus-visible::before{transform:scaleY(1); transform-origin:top}
.rel:hover,.rel:focus-visible{
  color:#0A0707; padding-left:clamp(14px,2.4vw,30px); outline:none;
  z-index:3; transform:translateY(-3px) scale(1.014);
  box-shadow:0 22px 48px rgba(0,0,0,.62), 0 0 0 1px rgba(255,90,18,.55),
             0 0 34px rgba(255,90,18,.22);
}
.rel:hover .rel-no,.rel:hover .rel-by,.rel:hover .rel-yr{color:rgba(10,7,7,.66)}
.rel:hover .rel-cover{filter:none; transform:scale(1.04)}
.rel:hover .rel-go{transform:translateX(6px)}

.rel-no{font-size:11px; letter-spacing:.12em; color:var(--dim); transition:color .2s}
.rel-cover{
  width:78px; aspect-ratio:1/1; height:auto; object-fit:contain;
  border:1px solid var(--line); background:#090707;
  filter:grayscale(.3) contrast(1.05); transition:filter .3s, transform .3s;
}
/* kafelek zastępczy, gdy okładki jeszcze nie ma */
.rel-cover.ph{
  background:
    linear-gradient(135deg, rgba(255,90,18,.14), rgba(255,90,18,0) 60%),
    repeating-linear-gradient(45deg, rgba(242,236,230,.05) 0 6px, transparent 6px 12px),
    #0C0909;
  filter:none;
}
.frame.noart img{display:none}
.frame.noart{
  aspect-ratio:16/9;
  background:
    linear-gradient(135deg, rgba(255,90,18,.16), rgba(255,90,18,0) 62%),
    repeating-linear-gradient(45deg, rgba(242,236,230,.05) 0 10px, transparent 10px 20px),
    #0C0909;
}

.rel-t{min-width:0}
.rel-t h3{
  font-family:var(--disp); font-weight:800; font-stretch:78%;
  font-size:clamp(24px,5.4vw,52px); line-height:1; letter-spacing:-.02em; text-transform:uppercase;
}
.rel-by{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-top:6px; transition:color .2s}
.rel-yr{font-size:11px; letter-spacing:.14em; color:var(--dim); transition:color .2s}
.rel-go{font-size:16px; transition:transform .25s cubic-bezier(.22,.7,.2,1)}
.tag{
  display:inline-block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid currentColor; padding:2px 6px; margin-left:8px; vertical-align:middle;
  color:var(--accent);
}
.rel:hover .tag{color:inherit}

@media (max-width:720px){
  .rel{grid-template-columns:64px 1fr auto; gap:14px}
  .rel-no{display:none}
  .rel-cover{width:64px}
  .rel-yr{display:none}
}

/* ---------- O NAS / STOPKA ---------- */
.about{padding-top:clamp(34px,6vh,70px); padding-bottom:clamp(60px,12vh,140px)}
.about-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(26px,5vw,80px); align-items:start}
.lead{font-size:clamp(16px,1.7vw,21px); line-height:1.6; color:rgba(242,236,230,.9); max-width:44ch;
  margin-bottom:clamp(22px,3.6vh,40px)}
.about p{font-size:clamp(15px,1.5vw,19px); line-height:1.65; max-width:62ch; color:rgba(242,236,230,.86)}
.about .big{
  font-family:var(--disp); font-weight:800; font-stretch:76%;
  font-size:clamp(30px,6vw,64px); line-height:1; letter-spacing:-.02em;
  text-transform:uppercase; margin-bottom:clamp(16px,2.6vh,28px);
}
.about .big em{font-style:normal; color:var(--ink)}
.about .big em.gothic{font-size:1.16em; letter-spacing:.005em; line-height:.98; display:inline-block}
.about .big em.gothic span{color:var(--accent)}
.motto{
  margin-top:clamp(16px,2.6vh,26px);
  font-family:var(--disp); font-weight:800; font-stretch:82%;
  font-size:clamp(14px,1.5vw,19px); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink);
}
.motto::before{
  content:""; display:block; width:26px; height:1px; background:var(--accent);
  margin-bottom:clamp(12px,1.8vh,18px);
}

.soc{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.soc a{
  display:flex; align-items:center; gap:12px; padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  transition:color .18s, padding-left .22s;
}
.soc a svg{width:16px; height:16px; fill:currentColor; flex:0 0 auto; transform-origin:50% 50%}
.soc a em{margin-left:auto; font-style:normal; color:var(--dim); font-size:14px; transition:transform .22s}
.soc a:hover{color:var(--accent); padding-left:8px; text-shadow:0 0 18px rgba(255,90,18,.45)}
.soc a:hover svg{filter:drop-shadow(0 0 10px rgba(255,90,18,.65))}
.soc a:hover em{transform:translateX(5px)}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr; gap:24px} }

.soc a,.svc a{will-change:transform}

.foot{
  border-top:1px solid var(--line); margin-top:clamp(30px,6vh,60px);
  padding:22px 0 calc(var(--hud) + 30px);
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}

/* ---------- PODSTRONA WYDAWNICTWA ---------- */
.rv{padding-top:calc(var(--hud) + clamp(24px,6vh,64px)); padding-bottom:clamp(50px,10vh,120px)}
.back{
  display:inline-flex; align-items:center; gap:10px; color:var(--dim);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:clamp(22px,4vh,44px); transition:color .18s, gap .22s;
}
.back:hover{color:var(--accent); gap:14px; text-shadow:0 0 16px rgba(255,90,18,.45)}

.rv-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,72px); align-items:start}
@media (max-width:900px){
  .rv-grid{display:flex; flex-direction:column; gap:26px}
  .col{display:contents}
  .b-head{order:1} .b-art{order:2} .b-spec{order:3} .b-svc{order:4} 
  .b-spec{margin-top:0}
}



.rv h1{
  font-family:var(--disp); font-weight:900; font-stretch:72%;
  font-size:clamp(46px,11vw,132px); line-height:.86; letter-spacing:-.035em;
  text-transform:uppercase; margin:0 0 14px;
}
.rv .by{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent)}
.rv .note{margin-top:clamp(18px,3vh,30px); font-size:15px; line-height:1.65; color:rgba(242,236,230,.82); max-width:52ch}

.spec{
  margin-top:clamp(22px,4vh,38px); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2,1fr);
}
.spec div{border-bottom:1px solid var(--line); padding:11px 0}
.spec div:nth-child(odd){padding-right:14px}
.spec dt{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim)}
.spec dd{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; margin-top:4px}
.spec dd.nw{white-space:nowrap; font-size:11.5px; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:7px}

/* okładka w ramce z krzyżykami */
.frame{position:relative; padding:10px}
.frame img{width:100%; height:auto; display:block}
.frame i{position:absolute; width:11px; height:11px; opacity:.75; font-style:normal}
.frame i::before,.frame i::after{content:""; position:absolute; background:var(--accent)}
.frame i::before{left:5px; top:0; width:1px; height:11px}
.frame i::after{top:5px; left:0; height:1px; width:11px}
.frame i:nth-child(1){left:-5px; top:-5px}
.frame i:nth-child(2){right:-5px; top:-5px}
.frame i:nth-child(3){left:-5px; bottom:-5px}
.frame i:nth-child(4){right:-5px; bottom:-5px}








/* lista serwisów */
.svc{margin-top:clamp(24px,4vh,40px); border-top:1px solid var(--line)}
.svc a{
  display:flex; align-items:center; gap:14px; padding:16px clamp(6px,1.2vw,14px);
  border-bottom:1px solid var(--line); position:relative; isolation:isolate;
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  transition:color .2s, padding-left .25s cubic-bezier(.22,.7,.2,1);
}
.svc a::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--accent);
  transform:scaleY(0); transform-origin:bottom; transition:transform .26s cubic-bezier(.22,.7,.2,1);
}
.svc a:hover::before{transform:scaleY(1); transform-origin:top}
.svc a:hover{color:#0A0707; padding-left:clamp(12px,2vw,24px)}
.svc a svg{width:19px; height:19px; fill:currentColor; flex:0 0 auto; transform-origin:50% 50%}
.svc a em{margin-left:auto; font-style:normal; font-size:15px; transition:transform .25s}
.svc a:hover em{transform:translateX(6px)}

/* lekkie drzenie ikon serwisow i socialow */
@keyframes jitter{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  18%{transform:translate(.5px,-.5px) rotate(-1.6deg)}
  36%{transform:translate(-.5px,.4px) rotate(1.3deg)}
  54%{transform:translate(.4px,.5px) rotate(-1.1deg)}
  72%{transform:translate(-.4px,-.4px) rotate(1.5deg)}
}
.soc a svg,.svc a svg{animation:jitter 2.8s ease-in-out infinite}
.soc a:nth-child(2) svg,.svc a:nth-child(2) svg{animation-duration:3.3s; animation-delay:-.7s}
.soc a:nth-child(3) svg,.svc a:nth-child(3) svg{animation-duration:2.4s; animation-delay:-1.4s}
.soc a:nth-child(4) svg,.svc a:nth-child(4) svg{animation-duration:3.0s; animation-delay:-2.0s}
.soc a:hover svg,.svc a:hover svg{animation-duration:.42s}

.ar{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:square; flex:0 0 auto; display:block}

a:focus-visible,button:focus-visible{outline:1px solid var(--accent); outline-offset:4px}

/* ---------- RESPONSYWNOŚĆ HUD ---------- */
@media (max-width:760px){
  .nav{display:none}
  .menu-btn{display:block}
  .hud .bot{font-size:9px; letter-spacing:.12em}
  .hud .bot span:last-child{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}