/* ==========================================================================
   SUBROOM RECORDS - design system
   Brand: black ground, white type, single green accent (#1DBF6A).
   Type:  Encode Sans Expanded (display) / Encode Sans (text).
   ========================================================================== */

:root{
  /* ground */
  --ink:        #050506;
  --ink-2:      #0B0B0F;
  --ink-3:      #121218;
  --line:       rgba(255,255,255,.12);
  --line-soft:  rgba(255,255,255,.06);

  /* type */
  --fg:         #FFFFFF;
  --fg-dim:     rgba(255,255,255,.72);
  --muted:      #83838F;

  /* accent */
  --accent:     #1DBF6A;
  --accent-dim: rgba(29,191,106,.18);
  --accent-ink: #04140C;

  /* families */
  --display: "Encode Sans Expanded", "Encode Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text:    "Encode Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* rhythm */
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --shell:   1680px;
  --section: clamp(4.5rem, 10vw, 9rem);
  --radius:  2px;

  /* motion */
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--fg-dim);
  font-family:var(--text);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--accent); color:var(--accent-ink); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* --------------------------------------------------------------- layout -- */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--narrow{ max-width:860px; }

.section{ padding-block:var(--section); }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.section + .section{ border-top:1px solid var(--line-soft); }

/* ---------------------------------------------------------------- type --- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--fg);
  margin:0 0 .5em;
  text-wrap:balance;
}

.display{
  font-size:clamp(2.5rem, 7.5vw, 6.5rem);
  text-transform:uppercase;
  letter-spacing:-.035em;
  line-height:.95;
}
.h2{ font-size:clamp(1.9rem, 4vw, 3.25rem); text-transform:uppercase; }
.h3{ font-size:clamp(1.2rem, 2vw, 1.6rem); }

p{ margin:0 0 1.25em; max-width:62ch; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--fg-dim); }

/* small caps label - the connective tissue of the whole design */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  font-family:var(--text);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.5rem;
}
.kicker::before{
  content:"";
  width:1.75rem; height:1px;
  background:var(--accent);
  flex:0 0 auto;
}
.kicker--plain::before{ display:none; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.section-head p{ margin-bottom:0; }

/* -------------------------------------------------------------- buttons -- */

.btn{
  --btn-bg:var(--accent);
  --btn-fg:var(--accent-ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  padding:1.05em 2.1em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--text);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1;
  border-radius:var(--radius);
  border:1px solid var(--btn-bg);
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--fg);
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--fg); background:var(--fg); color:var(--ink); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* text link with an animated rule */
.link{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg);
  padding-bottom:.35em;
  border-bottom:1px solid var(--line);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.link:hover{ border-color:var(--accent); color:var(--accent); }
.link .arrow{ transition:transform .25s var(--ease); }
.link:hover .arrow{ transform:translateX(4px); }

/* --------------------------------------------------------------- header -- */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(5,5,6,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled{ background:rgba(5,5,6,.94); border-bottom-color:var(--line); }

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:5rem;
}

.brand{ display:flex; align-items:center; gap:.75rem; flex:0 0 auto; }
/* The wide lockup (assets/img/logo-lockup.png), sized by height. On desktop
   it grows with the screen, so the full menu still fits beside it at 1024px,
   up to 48px tall (about 150px wide). */
.brand img{ height:2.25rem; width:auto; }
@media (min-width:1024px){ .site-header .brand img{ height:clamp(2rem, 3.2vw, 3rem); } }
.brand__word{
  font-family:var(--display);
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg);
}

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.25rem); }
.nav ul{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.25rem); list-style:none; margin:0; padding:0; }
.nav a{
  position:relative;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  padding-block:.4rem;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--fg); }
.nav a:hover::after,
.nav .current-menu-item > a::after{ transform:scaleX(1); }
.nav .current-menu-item > a{ color:var(--fg); }

.header-cta{ display:flex; align-items:center; gap:1rem; flex:0 0 auto; }

/* PL | EN switch. */
.lang{ display:flex; align-items:center; gap:.1rem; }
.lang a{
  padding:.4rem .5rem;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--muted);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.lang a:hover{ color:var(--fg); }
.lang a[aria-current]{ color:var(--fg); }
.lang a + a::before{ content:"/"; margin-right:.6rem; color:var(--line); font-weight:400; }
.header-cta .btn{ padding:.85em 1.6em; font-size:.72rem; }

.nav-toggle{
  display:none;
  width:2.75rem; height:2.75rem;
  align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.nav-toggle span{
  position:relative;
  display:block;
  width:1.1rem; height:1.5px;
  background:var(--fg);
  transition:background-color .2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; left:0;
  width:100%; height:1.5px; background:var(--fg);
  transition:transform .3s var(--ease);
}
.nav-toggle span::before{ top:-5px; }
.nav-toggle span::after{ top:5px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-5px) rotate(-45deg); }

/* Six items in Polish ("Strona główna" ... "Booking", "Kontakt") need about
   1160px at full spacing; below that the menu closes up so it stays on one
   line beside the logo down to 1024px. */
@media (min-width:1024px) and (max-width:1199px){
  .site-header__inner{ gap:1.25rem; }
  .site-header__nav ul{ gap:1rem; }
  .site-header__nav a{ letter-spacing:.08em; }
}

@media (max-width:1023px){
  .nav-toggle{ display:inline-flex; }
  .site-header__nav{
    position:fixed;
    inset:5rem 0 auto 0;
    display:block;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    padding:1.5rem var(--gutter) 2.5rem;
    transform:translateY(-120%);
    /* Closed, the menu is out of the tab order and hidden from screen
       readers too: visibility switches off once it has slid away. */
    visibility:hidden;
    transition:transform .4s var(--ease), visibility 0s linear .4s;
    max-height:calc(100dvh - 5rem);
    overflow-y:auto;
  }
  .site-header__nav.is-open{ transform:translateY(0); visibility:visible; transition:transform .4s var(--ease); }
  .site-header__nav ul{ flex-direction:column; align-items:flex-start; gap:.25rem; }
  .site-header__nav a{ display:block; padding:.85rem 0; font-size:1rem; letter-spacing:.12em; }
  .header-cta .btn{ display:none; }
}

/* ----------------------------------------------------------------- hero -- */

.hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(38rem, 88vh, 54rem);
  padding-block:clamp(6rem,14vh,10rem) clamp(3rem,6vw,5rem);
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.hero__media{
  position:absolute; inset:0; z-index:0;
}
.hero__media img,
.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,.25) 35%, rgba(5,5,6,.95) 100%),
    radial-gradient(90% 60% at 50% 40%, transparent 0%, rgba(5,5,6,.6) 100%);
}
.hero__inner{ position:relative; z-index:1; width:100%; }
.hero .display{ margin-bottom:clamp(1.5rem,3vw,2.5rem); max-width:16ch; }

.hero__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  margin-top:clamp(3rem,7vw,5.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}

.socials{ display:flex; align-items:center; gap:.5rem; list-style:none; margin:0; padding:0; }
.socials a{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--fg-dim);
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.socials a:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.socials svg{ width:1rem; height:1rem; fill:currentColor; }

/* ------------------------------------------------------------- featured -- */

.featured{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media (max-width:900px){ .featured{ grid-template-columns:1fr; } }

.featured__art{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--ink-2);
}
.featured__art img{ width:100%; height:100%; object-fit:cover; }
.featured__art::after{
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 120px rgba(0,0,0,.55);
  pointer-events:none;
}
.featured__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.75rem;
  margin:0 0 2rem; padding:0; list-style:none;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.featured__meta strong{ color:var(--fg); font-weight:600; }
.featured .h2{ margin-bottom:.35em; }
.featured__artist{
  font-family:var(--text);
  font-size:.85rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.75rem;
}

/* ------------------------------------------------------ releases grid ---- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap:clamp(1rem,2.5vw,2rem);
}

.release{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.release__art{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--ink-2);
  border:1px solid var(--line-soft);
}
.release__art img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .4s var(--ease);
}
.release:hover .release__art img{ transform:scale(1.05); filter:brightness(.55); }

.release__play{
  position:absolute;
  inset:auto auto 1rem 1rem;
  width:2.9rem; height:2.9rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:var(--accent-ink);
  opacity:0;
  transform:translateY(8px) scale(.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.release:hover .release__play,
.release:focus-within .release__play{ opacity:1; transform:translateY(0) scale(1); }
.release__play svg{ width:.9rem; height:.9rem; fill:currentColor; }

.release__title{
  font-family:var(--display);
  font-size:1rem; font-weight:700; line-height:1.25;
  color:var(--fg);
  margin:0;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.release__title a::after{ content:""; position:absolute; inset:0; }
.release__artist{ font-size:.82rem; color:var(--muted); margin:.35rem 0 0; }
.release__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding-top:.85rem; border-top:1px solid var(--line-soft);
}
.release:hover .release__foot{ color:var(--fg-dim); }

/* ------------------------------------------------------------- artists --- */

.artists{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap:clamp(1rem,2.5vw,2rem);
}
.artist{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--ink-2);
  border:1px solid var(--line-soft);
}
.artist img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.artist:hover img{ transform:scale(1.06); filter:grayscale(0) contrast(1); }
.artist__body{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(1.25rem,2.5vw,2rem);
  background:linear-gradient(180deg, transparent, rgba(5,5,6,.92) 65%);
}
.artist__name{
  font-family:var(--display);
  font-size:clamp(1.15rem,2vw,1.5rem);
  font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  color:var(--fg); margin:0;
}
.artist__role{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:.5rem 0 0;
}

/* ------------------------------------------------------------- cta band -- */

.band{
  position:relative;
  background:var(--accent);
  color:var(--accent-ink);
  overflow:hidden;
}
.band__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2.5rem; flex-wrap:wrap;
  padding-block:clamp(3rem,6vw,5rem);
}
.band h2{ color:var(--accent-ink); margin:0; max-width:18ch; }
.band p{ color:rgba(4,20,12,.78); margin:.75rem 0 0; max-width:44ch; }
.band .btn{ --btn-bg:var(--accent-ink); --btn-fg:var(--fg); }

/* ------------------------------------------------------------- footer ---- */

.site-footer{
  background:var(--ink-2);
  border-top:1px solid var(--line-soft);
  padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr minmax(0,1fr) 1.3fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--line-soft);
}
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid > :first-child{ grid-column:1 / -1; }
}
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

.footer-title{
  font-family:var(--text);
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.25rem;
}
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.footer-list a{ font-size:.9rem; color:var(--fg-dim); transition:color .2s var(--ease); }
.footer-list a:hover{ color:var(--accent); }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding-top:2rem;
  font-size:.75rem; letter-spacing:.1em; color:var(--muted);
}

/* ------------------------------------------------------------ newsletter - */

.newsletter form{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem; }
.newsletter input[type="email"]{
  flex:1 1 12rem;
  min-width:0;
  padding:1em 1.1em;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg);
  font-family:var(--text);
  font-size:.9rem;
  transition:border-color .25s var(--ease);
}
.newsletter input::placeholder{ color:var(--muted); }
.newsletter input:focus{ border-color:var(--accent); outline:none; }

/* -------------------------------------------------------- single release - */

.release-hero{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
  padding-block:clamp(3rem,7vw,6rem) var(--section);
}
@media (max-width:900px){ .release-hero{ grid-template-columns:1fr; } }

.dsp-list{ display:grid; gap:.6rem; margin:2rem 0 0; padding:0; list-style:none; }
.dsp{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05em 1.35em;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--ink-2);
  font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg);
  transition:border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.dsp:hover{ border-color:var(--accent); background:var(--accent-dim); transform:translateX(4px); }
.dsp__go{ color:var(--accent); }

.prose{ max-width:68ch; }
.prose h2,.prose h3{ margin-top:2em; }
/* Text links only: a .btn in the content keeps its own colours. */
.prose a:not(.btn){ color:var(--accent); border-bottom:1px solid var(--accent-dim); }
.prose a:not(.btn):hover{ border-bottom-color:var(--accent); }
.prose ul,.prose ol{ padding-left:1.25em; }
.prose li{ margin-bottom:.5em; }
.prose img{ border-radius:var(--radius); margin-block:2rem; }
.prose blockquote{
  margin:2rem 0; padding-left:1.5rem;
  border-left:2px solid var(--accent);
  font-size:1.1rem; color:var(--fg);
}

/* ------------------------------------------------------------- page head - */

.page-head{
  padding-block:clamp(5rem,11vw,9rem) clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--line-soft);
}
.page-head .display{ margin-bottom:0; }
.page-head p{ margin-top:1.5rem; }

/* ------------------------------------------------------------ utilities -- */

.embed{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink-2);
}
.embed iframe{ display:block; width:100%; border:0; }

.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

.empty{
  padding:clamp(3rem,7vw,5rem);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  text-align:center;
  color:var(--muted);
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* pagination */
.pagination{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:clamp(2.5rem,5vw,4rem); }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.75rem; height:2.75rem; padding-inline:.75rem;
  border:1px solid var(--line); border-radius:var(--radius);
  font-size:.8rem; font-weight:700; letter-spacing:.1em; color:var(--fg-dim);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.pagination .page-numbers:hover{ border-color:var(--fg); color:var(--fg); }
.pagination .current{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* WordPress core alignment classes */
.alignwide{ max-width:1100px; margin-inline:auto; }
.alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
.aligncenter{ margin-inline:auto; }

/* ------------------------------------------------------------ additions -- */

/* Hero keeps depth even with no background image set. */
.hero{
  background:
    radial-gradient(70% 50% at 20% 0%, rgba(29,191,106,.10) 0%, transparent 60%),
    radial-gradient(60% 50% at 90% 20%, rgba(255,255,255,.05) 0%, transparent 55%),
    var(--ink);
}

/* Artwork placeholder when a release has no featured image yet. */
.release__art-fallback,
.featured__art:empty::before{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--display);
  font-size:2.5rem; font-weight:800; letter-spacing:-.03em;
  color:rgba(255,255,255,.14);
  background:linear-gradient(140deg, var(--ink-2), var(--ink-3));
  text-transform:uppercase;
}

/* Footer detail. */
.site-footer .brand img{ height:2.5rem; }
.footer-socials{ margin-top:1.75rem; }
.footer-bottom .nav ul{ gap:1.5rem; }
.footer-bottom .nav a{ font-size:.72rem; }

/* The Newsletter plugin renders its own markup - normalise it here. */
.newsletter form,
.newsletter .tnp-field{ margin-top:.75rem; }
.newsletter input[type="text"],
.newsletter input[type="email"]{
  width:100%;
  padding:1em 1.1em;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg);
  font-family:var(--text);
  font-size:.9rem;
}
.newsletter input[type="submit"],
.newsletter .tnp-submit{
  width:100%;
  margin-top:.6rem;
  padding:1em 1.5em;
  background:var(--accent);
  color:var(--accent-ink);
  border:0; border-radius:var(--radius);
  font-family:var(--text);
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  transition:transform .25s var(--ease);
}
.newsletter input[type="submit"]:hover{ transform:translateY(-2px); }
.newsletter label{ font-size:.78rem; color:var(--muted); }
.newsletter .privacy-note{ margin:.75rem 0 0; font-size:.72rem; line-height:1.5; color:var(--muted); }

/* Search form, used by the empty state. */
.search-form{ display:flex; gap:.6rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap; }
.search-form label{ flex:1 1 16rem; max-width:22rem; }
.search-form input[type="search"]{
  width:100%;
  padding:1em 1.1em;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg);
  font-family:var(--text);
}
.search-form input[type="submit"]{
  padding:1em 1.75em;
  background:var(--fg); color:var(--ink);
  border:0; border-radius:var(--radius);
  font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
}

/* Cookie banner + GTranslate sit on top of everything else. */
.cky-consent-container,
.gtranslate_wrapper{ z-index:200; }

/* Headline cleared in the Customizer - tighten the kicker so the photo takes
   the space the headline used to hold. */
.hero--no-headline .kicker{ margin-bottom:1rem; }

/* Hero video fills the hero; plays everywhere, phones included. */
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

/* ------------------------------------------------------------- forms -- */
.form{ display:grid; gap:1.25rem; max-width:34rem; }
.form__row{ display:grid; gap:.5rem; }
.form label{
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.form input, .form textarea, .form select{
  width:100%; padding:.9em 1em;
  background:var(--ink-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius);
  font:inherit; font-size:.95rem;
  transition:border-color .2s var(--ease);
}
.form input:focus, .form textarea:focus{ outline:0; border-color:var(--accent); }
.form textarea{ min-height:9rem; resize:vertical; }
/* .form .form__consent, not .form__consent: .form label would win otherwise. */
.form .form__consent{
  display:flex; gap:.75rem; align-items:flex-start;
  font-size:.82rem; line-height:1.5; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400;
}
.form__consent input{ width:auto; margin-top:.2em; flex:0 0 auto; }

/* Links to the privacy policy (mu-plugins/subroom-privacy.php). */
.privacy-link{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.privacy-link:hover{ color:var(--fg); border-bottom-color:var(--accent); }
.form [aria-invalid="true"]{ border-color:#e5484d; }
.form__error{ margin:0; font-size:.82rem; color:#ff8b8e; }
.form__notice{
  margin:0; padding:1em 1.2em;
  border:1px solid var(--line); border-radius:var(--radius);
  font-size:.95rem; line-height:1.5;
}
.form__notice--ok{ border-color:var(--accent); color:var(--fg); }
.form__notice--err{ border-color:#e5484d; color:var(--fg); }
/* Spam trap: hidden from people, inline-styled too in case this CSS is not loaded. */
.form__trap{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* contact details list */
.contact-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
.contact-item__label{
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .4rem;
}
.contact-item__value{ font-size:1.05rem; margin:0; }
.contact-item__value a{ color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line); }
.contact-item__value a:hover{ border-bottom-color:var(--accent); }

/* Artist streams and followers, from [subroom_stats] (mu-plugins). */
.bio__stats{
  display:flex; gap:2.5rem; flex-wrap:wrap;
  margin:0 0 2rem; padding:0; list-style:none;
}
.bio__stat strong{ display:block; font-family:var(--display); font-size:clamp(1.8rem,4vw,2.6rem); line-height:1; }
.bio__stat span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
/* Songstats credit under the numbers. */
.bio__source{ margin:-.75rem 0 2rem; font-size:.72rem; color:var(--muted); }
.bio__source a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.bio__source a:hover{ color:var(--fg); border-bottom-color:var(--accent); }

/* ------------------------------------------------------- side columns -- */
/* On desktop a page's main column gets a partner (form + photo, form + demo
   notes, bio + releases), so no text sits alone in the middle of a wide
   screen. Below 1024px the two stack in source order. */
.split{ display:grid; gap:clamp(3rem,6vw,4rem); }
.split__aside > .photo + .socials{ margin-top:1.5rem; }
@media (min-width:1024px){
  .split{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(3rem,5vw,6rem); align-items:start; }
  .split--even{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .split__main{ grid-column:1; grid-row:1; }
  /* Stays in view while the longer column scrolls past (5rem is the header). */
  .split__aside{ grid-column:2; grid-row:1; position:sticky; top:7rem; }
  .split__main.prose{ font-size:1.0625rem; }

  /* Forms use the wider column: short fields in pairs, the message and
     everything after it full width. */
  .split .form{ max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.25rem; }
  .split .form > *{ grid-column:1 / -1; }
  .split .form > .form__row:not(:has(textarea)){ grid-column:auto; }
}

/* Side column content: short blocks, each under a small title. */
.side > * + *{ margin-top:2.25rem; padding-top:2.25rem; border-top:1px solid var(--line-soft); }
.side__title{
  font-family:var(--text);
  font-size:.72rem; font-weight:700; line-height:1.4; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.1rem;
}
.side p{ margin:0; }

.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.tags li{
  padding:.6em 1em;
  border:1px solid var(--line); border-radius:var(--radius);
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg);
}

/* A small grid of release covers (Demo notes, artist releases). */
.covers{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin:0 0 1.5rem; padding:0; list-style:none; }
.covers--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cover{
  display:block; aspect-ratio:1/1; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--radius);
  background:var(--ink-2);
}
.cover img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .4s var(--ease); }
.cover:hover img{ transform:scale(1.05); filter:brightness(.7); }

/* Contents list beside a long document (the privacy policy). subroom.js
   builds it for any page with five or more sections; phones skip it. */
.toc{ display:none; }
.toc-body h2{ scroll-margin-top:7rem; }
@media (min-width:1024px){
  .shell--narrow.has-toc{
    max-width:var(--shell);
    display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    column-gap:clamp(3rem,5vw,6rem); align-items:start;
  }
  .has-toc .toc{ display:block; position:sticky; top:7rem; }
  .has-toc .toc-body{ font-size:1.0625rem; }
}
/* .toc first: the list sits inside .prose, whose list and link styles
   would win otherwise. */
.toc .toc__list{ display:grid; margin:0; padding:0; list-style:none; border-left:1px solid var(--line-soft); }
.toc .toc__list li{ margin:0; }
.toc .toc__list a{
  display:block; margin-left:-1px; padding:.45rem 0 .45rem 1.1rem;
  border:0; border-left:1px solid transparent;
  font-size:.88rem; line-height:1.4; color:var(--muted);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.toc .toc__list a:hover{ color:var(--fg); }
.toc .toc__list a[aria-current]{ color:var(--fg); border-left-color:var(--accent); }

/* Release page: the description sits under the streaming links, next to the
   cover, and the cover stays in view while it is read. */
.release-hero__desc{ margin-top:2.5rem; }
@media (min-width:900px){ .release-hero > .featured__art{ position:sticky; top:7rem; } }

/* ------------------------------------------------------------- photos -- */
/* Photos (assets/img/photos/) get the motion heads' look, held still: scan
   lines, a little grain, a dark edge and a small on-screen label. */
.photo{
  position:relative; isolation:isolate; overflow:hidden;
  aspect-ratio:4/3; margin:0;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--ink-2);
}
.photo img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--focus, 50% 50%);
  transition:transform 1.2s var(--ease);
}
.photo:hover img{ transform:scale(1.03); }
.photo::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:url(../img/noise.png) repeat; mix-blend-mode:screen; opacity:.1;
}
.photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0,rgba(0,0,0,.26) 1px,transparent 1px,transparent 3px);
  box-shadow:inset 0 0 120px rgba(0,0,0,.55);
}
.photo__osd{
  position:absolute; z-index:2; top:.55rem; left:.85rem; margin:0; max-width:none;
  font-family:"VT323", ui-monospace, monospace; font-size:1.35rem; line-height:1; letter-spacing:.06em;
  color:var(--accent); text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.photo--tall{ aspect-ratio:3/4; }

/* O nas: two photos, the second smaller and over a corner of the first. */
.duo{ position:relative; padding-bottom:22%; }
.duo .photo{ box-shadow:0 30px 60px -20px rgba(0,0,0,.7); }
.duo__a{ width:84%; }
.duo__b{ position:absolute; right:0; bottom:0; width:44%; outline:6px solid var(--ink); }
.duo__b.photo--tall{ width:36%; }
.duo--flip .duo__a{ margin-left:auto; }
.duo--flip .duo__b{ right:auto; left:0; }

/* O nas: each section beside its photos, alternating sides on desktop. */
.story__row{ display:grid; gap:2.5rem; }
.story__row + .story__row{ margin-top:clamp(4rem,9vw,8rem); }
.story__text > :first-child{ margin-top:0; }
@media (min-width:1024px){
  .story__row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(3rem,6vw,7rem); align-items:center; }
  .story__row--flip .story__media{ grid-column:1; grid-row:1; }
  .story__row--flip .story__text{ grid-column:2; grid-row:1; }
  .story__row--solo{ grid-template-columns:minmax(0,1fr); }
  .story__text{ font-size:1.125rem; }
}

/* Artist pages: a wide live photo above the bio. */
.photo--band{ aspect-ratio:3/2; margin-bottom:clamp(3rem,6vw,5rem); }
@media (min-width:768px){ .photo--band{ aspect-ratio:5/2; } }

/* Nasi artyści: the intro paragraphs side by side on desktop. */
@media (min-width:1024px){
  .shell--narrow.prose--cols{
    max-width:var(--shell);
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(3rem,5vw,6rem);
    font-size:1.125rem;
  }
}

/* ------------------------------------------------------- motion heads -- */
/* Page headers with motion, one look per page: O nas (signal lock), Wydania
   (crate dig), Nasi artyści (channel surfing), artist pages (live numbers),
   Kontakt and Demo (oscilloscope). CSS only, apart from the oscilloscope and
   the count-up in subroom.js. Every layer rests in its final state and the
   animations run from the start state back to it, so with reduced motion, or
   before an animation begins, the header still looks finished. Heads that
   are off screen pause (subroom.js sets .is-off). */
.mo{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:clamp(26rem,64vh,38rem);
  padding-block:clamp(5rem,10vw,7rem) clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid var(--line-soft);
  background:var(--ink);
}
.mo > .shell{ position:relative; z-index:3; width:100%; }
.mo .display{ margin-bottom:0; }
.mo .lead{ margin:1.25rem 0 0; max-width:44ch; }
.mo__layer{ position:absolute; inset:0; pointer-events:none; }
.mo__grain{
  position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:url(../img/noise.png) repeat;
  animation:mo-grain .45s steps(1) infinite;
}
@keyframes mo-grain{
  0%{transform:translate(0,0)} 17%{transform:translate(-7%,4%)} 33%{transform:translate(5%,-8%)}
  50%{transform:translate(-3%,-3%)} 67%{transform:translate(8%,6%)} 83%{transform:translate(-5%,9%)}
}
.mo__scan{ background:repeating-linear-gradient(0deg,rgba(0,0,0,.36) 0,rgba(0,0,0,.36) 1px,transparent 1px,transparent 3px); }
.mo__osd{
  position:absolute; z-index:3; top:1.25rem;
  font-family:"VT323", ui-monospace, monospace; font-size:1.5rem; line-height:1.15;
  letter-spacing:.06em; color:var(--accent);
}
.mo__osd--l{ left:var(--gutter); }
.mo__osd--r{ right:var(--gutter); text-align:right; }
.mo__blink{ animation:mo-blink 1s steps(1) infinite; }
@keyframes mo-blink{ 50%{opacity:0} }

.mo.is-off *, .mo.is-off *::before, .mo.is-off *::after{ animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce){
  .mo *, .mo *::before, .mo *::after{ animation:none !important; transition:none !important; }
}

/* O nas: the logo tunes in through static, then glitches every 6 s. */
.mo--signal{ background:radial-gradient(ellipse at 68% 45%,#141418 0%,var(--ink) 72%); }
.mo__static{
  position:absolute; inset:0; overflow:hidden; mix-blend-mode:screen; opacity:.14;
  animation:mo-static-in 2.4s ease-out backwards, mo-static-loop 6s linear 2.4s infinite;
}
@keyframes mo-static-in{ from{opacity:.9} }
@keyframes mo-static-loop{ 0%,86%{opacity:.14} 88%{opacity:.6} 90%{opacity:.26} 92%,100%{opacity:.14} }
.mo__roll{
  position:absolute; left:0; right:0; top:-150px; height:150px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.05),transparent);
  animation:mo-roll 5.5s linear infinite;
}
@keyframes mo-roll{ to{transform:translateY(calc(100vh + 150px))} }
.mo__vig{ background:radial-gradient(ellipse at 68% 46%,transparent 38%,rgba(0,0,0,.88) 100%); }
.mo__logo{ position:relative; width:min(80vw,26rem); aspect-ratio:900/289; margin-bottom:2.5rem; }
@media (min-width:900px){
  .mo__logo{ position:absolute; right:var(--gutter); bottom:3.5rem; width:min(46vw,40rem); margin:0; }
}
.mo__lg{
  position:absolute; inset:0;
  -webkit-mask:url(../img/logo-lockup.png) center/contain no-repeat;
          mask:url(../img/logo-lockup.png) center/contain no-repeat;
}
.mo__lg--c{ background:#18e0ff; mix-blend-mode:screen; animation:mo-c-in 2.4s cubic-bezier(.2,.7,.2,1) backwards, mo-c-loop 6s linear 2.4s infinite; }
.mo__lg--r{ background:#ff2a3d; mix-blend-mode:screen; animation:mo-r-in 2.4s cubic-bezier(.2,.7,.2,1) backwards, mo-r-loop 6s linear 2.4s infinite; }
.mo__lg--w{ background:var(--fg); animation:mo-w-in 2.4s steps(1) backwards, mo-w-loop 6s steps(1) 2.4s infinite; }
@keyframes mo-r-in{ 0%{transform:translate(-46px,4px);opacity:0} 12%{opacity:1} 35%{transform:translate(-22px,-3px)} 60%{transform:translate(-8px,1px)} 82%{transform:translate(0,0)} }
@keyframes mo-c-in{ 0%{transform:translate(42px,-3px);opacity:0} 14%{opacity:1} 35%{transform:translate(20px,3px)} 60%{transform:translate(7px,-1px)} 82%{transform:translate(0,0)} }
@keyframes mo-w-in{ 0%{opacity:0} 18%{opacity:.85} 22%{opacity:0} 30%{opacity:1} 34%{opacity:.25} 42%{opacity:1} }
@keyframes mo-r-loop{ 0%,87%{transform:translate(0,0)} 88%{transform:translate(-18px,0)} 90%{transform:translate(9px,0)} 92%,100%{transform:translate(0,0)} }
@keyframes mo-c-loop{ 0%,87%{transform:translate(0,0)} 88%{transform:translate(14px,0)} 90%{transform:translate(-10px,0)} 92%,100%{transform:translate(0,0)} }
@keyframes mo-w-loop{ 0%,87%{clip-path:inset(0 0 0 0);transform:translate(0,0)} 88%{clip-path:inset(28% 0 50% 0);transform:translate(10px,0)} 90%{clip-path:inset(60% 0 14% 0);transform:translate(-8px,0)} 92%,100%{clip-path:inset(0 0 0 0);transform:translate(0,0)} }

/* Wydania: a tilted wall of covers drifting past; hover pauses it and tunes
   the cover in. The wall is decoration: the grid below holds the real links. */
.mo--crate::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.35) 0%,rgba(5,5,6,.86) 52%,var(--ink) 82%);
}
@media (min-width:900px){
  .mo--crate::after{ background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 34%,rgba(5,5,6,.82) 46%,rgba(5,5,6,0) 70%); }
}
.mo__wall{
  position:absolute; z-index:0; top:-30%; left:-8%;
  display:flex; gap:18px; transform:rotate(-9deg); transform-origin:top left;
}
@media (min-width:900px){ .mo__wall{ top:-22%; left:38%; } }
.mo__col{
  display:flex; flex-direction:column; gap:18px; padding-bottom:18px;
  width:clamp(130px,15vw,210px);
  animation:mo-up 60s linear infinite;
}
.mo__col:nth-child(2){ animation-name:mo-down; animation-duration:68s; }
.mo__col:nth-child(3){ animation-duration:75s; }
.mo__col:nth-child(4){ animation-name:mo-down; animation-duration:82s; }
.mo__col:nth-child(5){ animation-duration:89s; }
@keyframes mo-up{ from{transform:translateY(0)} to{transform:translateY(-50%)} }
@keyframes mo-down{ from{transform:translateY(-50%)} to{transform:translateY(0)} }
.mo__wall:hover .mo__col{ animation-play-state:paused; }
.mo__cv{ position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:var(--radius); color:var(--accent); }
.mo__cv img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.9) brightness(.42) contrast(1.15);
  transition:filter .35s var(--ease), transform .35s var(--ease);
}
.mo__cv::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url(../img/noise.png) repeat; opacity:.28; mix-blend-mode:screen;
  transition:opacity .35s var(--ease);
}
.mo__cv:hover img{ filter:none; transform:scale(1.05); }
.mo__cv:hover::after{ opacity:0; }
.mo__cv-t{
  position:absolute; left:.6rem; right:.6rem; bottom:.4rem; z-index:1;
  font-family:"VT323", ui-monospace, monospace; font-size:1.3rem; line-height:1;
  opacity:0; transition:opacity .25s var(--ease); text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.mo__cv:hover .mo__cv-t{ opacity:1; }

/* Nasi artyści: the roster as TV channels that cut through static in turn. */
.mo--channels .shell{ display:grid; gap:2.5rem; align-items:end; }
@media (min-width:900px){ .mo--channels .shell{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2.5rem,5vw,4.5rem); } }
.mo__tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.6rem,2vw,1.5rem); }
.mo__ch{
  position:relative; display:block; aspect-ratio:12/17; overflow:hidden;
  background:#000; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--fg); text-decoration:none;
  transition:border-color .25s var(--ease);
}
.mo__ch:hover{ color:var(--fg); border-color:rgba(29,191,106,.6); }
.mo__ch-l{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mo__ch-img{ filter:grayscale(1) contrast(1.2) brightness(.8); transition:filter .3s var(--ease); }
.mo__ch-r, .mo__ch-c, .mo__ch-slice{ opacity:0; transition:opacity .2s var(--ease); }
.mo__ch-r{ mix-blend-mode:screen; filter:grayscale(1) sepia(1) saturate(9) hue-rotate(-48deg) brightness(.9); }
.mo__ch-c{ mix-blend-mode:screen; filter:grayscale(1) sepia(1) saturate(9) hue-rotate(150deg) brightness(.9); }
.mo__ch-slice{ filter:grayscale(1) contrast(1.35) brightness(1.1); }
.mo__ch:hover .mo__ch-img{ filter:grayscale(.15) contrast(1.1) brightness(.95); }
.mo__ch:hover .mo__ch-r{ opacity:.7; animation:mo-rg-r .7s steps(1) infinite; }
.mo__ch:hover .mo__ch-c{ opacity:.7; animation:mo-rg-c .7s steps(1) infinite; }
.mo__ch:hover .mo__ch-slice{ opacity:1; animation:mo-slice 1.1s steps(1) infinite; }
@keyframes mo-rg-r{ 0%{transform:translate(-6px,0)} 30%{transform:translate(-3px,1px)} 60%{transform:translate(-9px,-1px)} }
@keyframes mo-rg-c{ 0%{transform:translate(6px,0)} 30%{transform:translate(3px,-1px)} 60%{transform:translate(8px,1px)} }
@keyframes mo-slice{ 0%{clip-path:inset(18% 0 74% 0);transform:translateX(-14px)} 25%{clip-path:inset(56% 0 36% 0);transform:translateX(12px)} 50%{clip-path:inset(80% 0 12% 0);transform:translateX(-8px)} 75%{clip-path:inset(34% 0 60% 0);transform:translateX(16px)} }
.mo__ch-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.06;
  background:url(../img/noise.png) repeat; mix-blend-mode:screen;
  animation:mo-tune 9s linear infinite, mo-gpos .35s steps(1) infinite;
}
.mo__ch:nth-child(2) .mo__ch-noise{ animation-delay:-3s,0s; }
.mo__ch:nth-child(3) .mo__ch-noise{ animation-delay:-6s,0s; }
@keyframes mo-tune{ 0%,6%{opacity:.95} 12%{opacity:.06} 84%{opacity:.06} 88%,100%{opacity:.95} }
@keyframes mo-gpos{ 0%{background-position:0 0} 25%{background-position:-37px 51px} 50%{background-position:63px -22px} 75%{background-position:-12px -71px} }
.mo__ch:hover .mo__ch-noise{ animation:mo-gpos .35s steps(1) infinite; opacity:.06; }
.mo__ch .mo__osd{ top:.4rem; left:.75rem; font-size:1.3rem; }
.mo__ch-name{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:3rem .9rem .9rem;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88));
}
.mo__ch-name small{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.mo__ch-name strong{ display:block; margin-top:.2rem; font-family:var(--display); font-weight:800; font-size:clamp(.85rem,1.6vw,1.45rem); text-transform:uppercase; line-height:1.1; }

/* Artist pages: portrait under a scan line, the name fills its outline,
   the Songstats numbers count up (subroom.js). */
.mo--artist{ align-items:center; }
.mo--artist .shell{ display:grid; gap:2.5rem; align-items:center; }
@media (min-width:900px){ .mo--artist .shell{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2.5rem,5vw,4.5rem); } }
.mo__portrait{ position:relative; aspect-ratio:4/5; max-height:34rem; overflow:hidden; border-radius:var(--radius); background:#000; }
.mo__portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.15) brightness(.9); }
.mo__tint{ background:linear-gradient(180deg,rgba(29,191,106,0),rgba(29,191,106,.22)); mix-blend-mode:color; }
.mo__pstatic{ position:absolute; inset:0; overflow:hidden; mix-blend-mode:screen; opacity:.08; animation:mo-pstatic 1.6s ease-out backwards; }
@keyframes mo-pstatic{ from{opacity:1} }
.mo__sweep{
  position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none;
  background:var(--accent); box-shadow:0 0 14px 2px rgba(29,191,106,.7); opacity:0;
  animation:mo-sweep 3.2s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes mo-sweep{ 0%{transform:translateY(0);opacity:0} 8%,92%{opacity:.75} 100%{transform:translateY(34rem);opacity:0} }
.mo__portrait .mo__osd{ top:.5rem; left:.9rem; }
.mo__name{
  background:linear-gradient(90deg,var(--fg) 0,var(--fg) 50%,rgba(244,244,242,0) 50%,rgba(244,244,242,0) 100%);
  background-size:200% 100%; background-position:0 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-stroke:2px var(--fg);
  animation:mo-fill 1.3s cubic-bezier(.7,0,.2,1) .5s backwards;
}
@keyframes mo-fill{ from{background-position:100% 0} }
.mo--artist .bio__statbox{ margin-top:2.25rem; }
.mo--artist .bio__source{ margin:-.75rem 0 0; }

/* Kontakt and Demo: an oscilloscope line pulsing on a 128 BPM kick that
   follows the cursor (drawn by subroom.js on the canvas). */
.mo--scope{ align-items:flex-start; min-height:clamp(26rem,62vh,36rem); background:radial-gradient(ellipse at 50% 78%,#0c1510 0%,var(--ink) 70%); }
.mo__grat{
  background-image:
    repeating-linear-gradient(90deg,rgba(29,191,106,.09) 0,rgba(29,191,106,.09) 1px,transparent 1px,transparent 80px),
    repeating-linear-gradient(0deg,rgba(29,191,106,.09) 0,rgba(29,191,106,.09) 1px,transparent 1px,transparent 80px);
}
.mo__scope{ position:absolute; z-index:1; left:0; bottom:0; width:100%; height:40%; display:block; pointer-events:none; }
.mo__soft{ position:absolute; inset:0; overflow:hidden; mix-blend-mode:screen; opacity:.08; pointer-events:none; }