/* =========================================================
   Artem Sokolov — Sound Engineer
   Minimal / editorial / monochrome + one ember accent
   ========================================================= */

:root{
  --bg:        #0A0A0A;
  --bg-2:      #101011;
  --fg:        #F2F0EC;
  --muted:     #8B8780;
  --faint:     #575450;
  --line:      rgba(242,240,236,.12);
  --line-soft: rgba(242,240,236,.06);
  --accent:    #D9583C;

  --sans: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --pad: clamp(20px, 5vw, 80px);
  --sec: clamp(96px, 13vw, 200px);
  --ease: cubic-bezier(.22,1,.36,1);
  --nav-h: 76px;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.62;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* subtle film grain over the whole page */
body::after{
  content:"";
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9999;
  opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:#fff; }

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

.container{
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{ padding-block:var(--sec); position:relative; }

/* ── shared type ───────────────────────────────────────── */
.label,.eyebrow,.meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.sec-head{ margin-bottom:clamp(48px,7vw,96px); }
.sec-head .label{ display:block; margin-bottom:clamp(20px,3vw,36px); }

.sec-title{
  margin:0;
  font-size:clamp(34px,5.2vw,76px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:500;
}

.lead{
  font-size:clamp(19px,2.1vw,30px);
  line-height:1.4;
  letter-spacing:-.03em;
  font-weight:400;
}

.credits-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:clamp(18px,2.4vw,28px);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  transition:color .35s;
}
.credits-link:hover{ color:var(--accent); }
.credits-link svg,.credits-link span{ transition:transform .35s var(--ease); }
.credits-link:hover span{ transform:translate(2px,-2px); }

/* ── genre filter (Credits section) ───────────────────────── */
.genre-filter{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:clamp(28px,4vw,44px);
}
.genre-filter__btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px;
  border-radius:100px;
  border:1px solid var(--line);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  transition:color .3s, border-color .3s, background .3s;
}
.genre-filter__btn span{
  font-size:9px; color:var(--faint);
  transition:color .3s;
}
.genre-filter__btn:hover{ color:var(--fg); border-color:rgba(242,240,236,.35); }
.genre-filter__btn.is-active{
  background:var(--fg); color:var(--bg); border-color:var(--fg);
}
.genre-filter__btn.is-active span{ color:rgba(10,10,10,.55); }

.genre-filter__empty{
  margin:0 0 clamp(28px,4vw,44px);
  font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; color:var(--faint);
}

/* rows leaving/entering the current filter — quick fade+collapse
   rather than an abrupt visibility snap */
.row.is-filtered{
  display:none;
}

/* rows 31–265: collapsed until the show-all toggle opens the list.
   An active search overrides the collapse — it scans the whole
   catalogue, so matches behind the toggle must be able to surface. */
.rows:not(.is-open):not(.is-searching) .row.is-extra{ display:none; }

.rows-toggle{
  display:flex;
  margin:clamp(30px,4vw,48px) auto 0;
}
/* expand/collapse is meaningless mid-search — the query decides */
.rows.is-searching + .rows-toggle{ display:none; }

/* search input, trailing the genre pills */
.row-search{
  flex:1 1 220px; max-width:320px;
  margin-left:auto;
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  border-radius:0;
  padding:8px 0;
  color:var(--fg);
  font:inherit; font-size:14px;
  transition:border-color .4s;
}
.row-search::placeholder{ color:var(--faint); }
.row-search:focus{ outline:none; border-bottom-color:var(--fg); }
.row-search::-webkit-search-cancel-button{ -webkit-appearance:none; }
@media (max-width:640px){
  .row-search{ flex-basis:100%; max-width:none; margin-left:0; margin-top:8px; }
}

/* rows with no Muso preview keep the grid shape, minus the invitation */
.row__btn[disabled]{ opacity:.22; pointer-events:none; }

/* ── buttons ───────────────────────────────────────────── */
.btn{
  --b-fg:var(--fg);
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px;
  border-radius:100px;
  font-size:14px; font-weight:500; letter-spacing:.01em;
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn svg{ width:8px; height:10px; fill:currentColor; transition:transform .45s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--fg);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover svg{ transform:translateX(3px); }

.btn--solid{ background:var(--fg); color:var(--bg); }
.btn--solid::before{ background:var(--accent); }
.btn--solid:hover{ color:#fff; }

.btn--ghost{ border:1px solid var(--line); }
.btn--ghost:hover{ color:var(--bg); border-color:var(--fg); }

/* ── nav ───────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav__inner{
  width:100%; max-width:1440px; margin-inline:auto;
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; letter-spacing:.02em;
}
.nav__mark{
  width:7px; height:7px; border-radius:50%;
  background:var(--fg);
  transition:background .4s, transform .4s var(--ease);
}
.nav__brand:hover .nav__mark{ background:var(--accent); transform:scale(1.5); }

.nav__links{ display:flex; gap:clamp(20px,3vw,44px); }
.nav__links a{
  position:relative;
  font-size:15px;
  color:var(--muted);
  transition:color .35s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px;
  width:100%; height:1px; background:var(--fg);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--fg); }

.nav__actions{ display:flex; align-items:center; gap:12px; }

/* language switcher */
.lang{ display:flex; align-items:center; gap:2px; margin-right:6px; }
.lang__btn{
  padding:6px 7px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; color:var(--faint);
  transition:color .3s;
}
.lang__btn:hover{ color:var(--muted); }
.lang__btn.is-active{ color:var(--fg); }
.lang--menu{ margin:26px 0 0; gap:10px; }
.lang--menu .lang__btn{ font-size:14px; padding:8px 10px; }

.nav__cta{
  position:relative;
  display:inline-flex; align-items:center;
  padding:10px 20px;
  border-radius:100px;
  background:var(--fg); color:var(--bg);
  font-size:15px; font-weight:500; letter-spacing:-.005em;
  overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s;
}
.nav__cta span{ position:relative; z-index:1; }
.nav__cta::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.nav__cta:hover{ color:#fff; }
.nav__cta:hover::before{ transform:translateY(0); }
.nav__cta:active{ transform:scale(.96); }

.nav__cta--ghost{
  background:transparent; color:var(--muted);
  border:1px solid var(--line);
}
.nav__cta--ghost:hover{ color:#fff; border-color:transparent; }

/* already the hover colour by default — the sliding ::before layer
   would be invisible against a same-colour background, so it's turned
   off here and swapped for a plain brightness lift instead */
.nav__cta--accent{ background:var(--accent); color:#fff; }
.nav__cta--accent::before{ content:none; }
.nav__cta--accent:hover{ color:#fff; filter:brightness(1.1); }

.nav__burger{ display:none; width:28px; height:28px; position:relative; }
.nav__burger span{
  position:absolute; left:3px; right:3px; height:1px; background:var(--fg);
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__burger span:first-child{ top:11px; }
.nav__burger span:last-child{ top:17px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:99;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--pad);
  opacity:0; transition:opacity .4s var(--ease);
}
/* the class rule above would otherwise beat the UA's [hidden]{display:none}
   and leave an invisible full-screen overlay swallowing every click */
.menu[hidden]{ display:none; }
.menu.is-open{ opacity:1; }
.menu a{
  font-size:clamp(34px,10vw,56px);
  letter-spacing:-.045em; line-height:1.28;
}
.menu__actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:28px;
}
@media (max-width:480px){
  .menu__actions{ gap:12px; }
  .menu__cta{ flex:1 1 100%; justify-content:center; }
}
.menu__cta{
  display:inline-flex; align-items:center;
  padding:15px 30px;
  border-radius:100px;
  background:var(--fg); color:var(--bg);
  font-size:17px; font-weight:500; letter-spacing:-.005em;
  transition:transform .3s var(--ease), background .3s, border-color .3s, color .3s;
}
.menu__cta:active{ transform:scale(.96); background:var(--accent); color:#fff; }

.menu__cta--ghost{
  background:transparent; color:var(--fg);
  border:1px solid var(--line);
}
.menu__cta--ghost:active{ background:var(--accent); border-color:var(--accent); }

.menu__cta--accent{ background:var(--accent); color:#fff; }
.menu__mail{
  margin-top:36px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; color:var(--muted);
}

/* ── hero ──────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  padding-top:calc(var(--nav-h) + 4vh);
  padding-bottom:88px;
  display:flex; flex-direction:column; justify-content:center;
}
.hero__grid{
  flex:1;
  width:100%; max-width:1440px; margin-inline:auto;
  padding-inline:var(--pad);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,80px);
  align-items:center;
}

.hero__text .eyebrow{ display:block; margin-bottom:clamp(20px,3vw,32px); }

.hero__title{
  margin:0;
  font-size:clamp(48px,8.7vw,138px);
  line-height:1.05;
  letter-spacing:-.055em;
  font-weight:500;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero__title .reveal-line{
  display:block;
  transform:translateY(105%);
  transition:transform 1.15s var(--ease);
}
.hero__title .line:nth-child(2) .reveal-line{ transition-delay:.09s; }
.is-loaded .hero__title .reveal-line{ transform:translateY(0); }

.hero__intro{
  margin:clamp(24px,3.4vw,40px) 0 0;
  max-width:26ch;
  font-size:clamp(17px,1.6vw,22px);
  line-height:1.45;
  letter-spacing:-.025em;
  color:var(--fg);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,4vw,48px); }

/* ── hero slider (Instagram-story style) ───────────────── */
.hero__media{
  position:relative; margin:0;
  width:100%;                      /* pin the width — otherwise aspect-ratio
                                       + max-height can shrink it below the
                                       grid column instead of just cropping */
  aspect-ratio:1/1;
  max-height:74svh;
  overflow:hidden;
  background:var(--bg-2);
  opacity:0;
  transition:opacity 1.4s ease;
  touch-action:pan-y;              /* let vertical page scroll through */
}
.is-loaded .hero__media{ opacity:1; }

.slider__track{
  display:flex; height:100%;
  will-change:transform;
  transition:transform .62s var(--ease);
}
.slider__track.is-dragging{ transition:none; }

.slider__slide{ flex:0 0 100%; height:100%; overflow:hidden; }
.slider__slide img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  filter:grayscale(1) contrast(1.22) brightness(.82);
  transform:scale(1.12);
  transition:transform 1.9s var(--ease);
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}
.is-loaded .slider__slide img{ transform:scale(1); }

.hero__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.42) 0%,rgba(10,10,10,0) 34%,rgba(10,10,10,.62) 100%);
}

/* segmented progress bars, like stories */
.slider__bars{
  position:absolute; top:12px; left:12px; right:12px; z-index:3;
  display:flex; gap:5px;
}
.slider__bars span{
  flex:1; height:2px; border-radius:2px;
  background:rgba(242,240,236,.28);
  overflow:hidden;
}
.slider__bars i{ display:block; height:100%; width:0; background:var(--fg); }
.slider__bars span.is-done i{ width:100%; }
.slider__bars span.is-active i{ animation:barFill var(--slide-dur,5s) linear forwards; }
.hero__media.is-paused .slider__bars span.is-active i{ animation-play-state:paused; }
@keyframes barFill{ from{ width:0; } to{ width:100%; } }

/* arrows — desktop affordance, hidden until hover */
.slider__nav{
  position:absolute; top:50%; z-index:3;
  width:38px; height:38px; margin-top:-19px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(11,11,12,.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(242,240,236,.16);
  color:var(--fg); font-size:20px; line-height:1;
  opacity:0; transform:scale(.9);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s;
}
.slider__nav--prev{ left:12px; }
.slider__nav--next{ right:12px; }
.hero__media:hover .slider__nav{ opacity:1; transform:none; }
.slider__nav:hover{ background:rgba(11,11,12,.75); }
.slider__nav:active{ transform:scale(.92); }

.hero__media figcaption{
  position:absolute; left:16px; bottom:14px; z-index:3;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(242,240,236,.72);
}

@media (hover:none){
  .slider__nav{ display:none; }   /* swipe is the gesture on touch */
}

.hero__foot{
  width:100%; max-width:1440px; margin-inline:auto;
  padding-inline:var(--pad);
  margin-top:clamp(28px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  opacity:0; transform:translateY(14px);
  transition:opacity 1s ease .9s, transform 1s var(--ease) .9s;
}
.is-loaded .hero__foot{ opacity:1; transform:none; }

.scroll{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .35s;
}
.scroll:hover{ color:var(--fg); }
.scroll__line{ display:block; width:56px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.scroll__line::after{
  content:""; position:absolute; inset:0; background:var(--fg);
  transform:translateX(-100%);
  animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{
  0%{ transform:translateX(-100%); }
  55%{ transform:translateX(0); }
  100%{ transform:translateX(100%); }
}

/* ── about ─────────────────────────────────────────────── */
.about__grid{
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:clamp(40px,7vw,120px);
  align-items:start;
}
.about__copy p{ max-width:52ch; color:var(--muted); }
.about__copy .lead{ color:var(--fg); margin-bottom:1.6em; }
/* the headings carry the structure now, so the list stays plain —
   bordering every one of them would over-rule the column */
/* no text-transform: the client's capitalisation is part of the copy */
.about__h{
  margin:clamp(34px,4vw,48px) 0 clamp(12px,1.4vw,18px);
  font-size:clamp(17px,1.5vw,21px);
  letter-spacing:-.02em; line-height:1.25;
  color:var(--fg); font-weight:500;
}
.about__h + p{ margin-top:0; }

.about__list{
  margin:0; padding:0;
  list-style:none;
  display:grid; gap:12px;
  color:var(--muted);
}
.about__list li{ display:flex; gap:12px; max-width:52ch; }
.about__list li::before{ content:"—"; color:var(--line); flex:none; }

.about__badges{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(22px,3vw,36px);
  margin-top:clamp(20px,2.6vw,30px);
}
.about__badge{ display:block; width:152px; height:auto; }

.facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin:clamp(44px,6vw,72px) 0 0;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.facts dt{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin-bottom:8px;
}
.facts dd{ margin:0; font-size:clamp(15px,1.3vw,19px); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

.about__media{ margin:0; overflow:hidden; aspect-ratio:3/4; background:var(--bg-2); }
/* the copy now runs about twice the photo's height, which left the right
   column empty for most of the section — pin it so it travels along */
@media (min-width:901px){
  .about__media{ position:sticky; top:calc(var(--nav-h) + 32px); }
}
.about__media img{
  width:100%; height:100%; object-fit:cover;
  /* the frame is portrait and the photo landscape, so cover shows only
     half the width — biased left, otherwise the crop cuts through his
     face (centre would start the window ~320px into a 1280px photo) */
  object-position:10% center;
  filter:grayscale(1) contrast(1.08) brightness(.92);
  transition:transform 1.2s var(--ease), filter .8s ease;
}
.about__media:hover img{ transform:scale(1.04); filter:grayscale(.55) contrast(1.08) brightness(.95); }

/* ── featured ──────────────────────────────────────────── */
.featured{ border-top:1px solid var(--line-soft); }
.feature-list{ display:flex; flex-direction:column; gap:clamp(72px,11vw,160px); }

.feature{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(28px,5vw,72px);
  align-items:center;
  cursor:pointer;
}
.feature__out,.feature .player__wave{ cursor:default; }
.feature--flip .feature__media{ order:2; }

.feature__media{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:1/1; background:var(--bg-2);
}
.feature__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.86);
  transform:scale(1.02);
  transition:transform 1.3s var(--ease), filter 1s ease;
}
.feature:hover .feature__media img{ transform:scale(1.06); filter:grayscale(.35) contrast(1.1) brightness(.95); }
.feature__num{
  position:absolute; top:16px; left:18px; z-index:2;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; color:rgba(242,240,236,.8);
}
.feature.is-playing .feature__media img{ filter:grayscale(0) contrast(1.08) brightness(.98); }

.feature__meta{
  display:flex; flex-wrap:wrap; gap:18px;
  margin:0 0 clamp(14px,2vw,22px);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.feature__meta span:first-child{ color:var(--fg); }
.feature__title{
  margin:0;
  font-size:clamp(30px,4.2vw,60px);
  line-height:1.02; letter-spacing:-.045em; font-weight:500;
}
.feature__desc{
  margin:clamp(16px,2vw,24px) 0 clamp(28px,4vw,44px);
  max-width:44ch; color:var(--muted);
}

/* ── waveform player ───────────────────────────────────── */
.player{
  display:flex; align-items:center; gap:clamp(14px,2vw,24px);
  padding-top:22px;
  border-top:1px solid var(--line);
}
.player__btn{
  flex:none;
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  position:relative; overflow:hidden;
  transition:border-color .4s, color .4s;
}
.player__btn::before{
  content:""; position:absolute; inset:0;
  background:var(--fg); border-radius:50%;
  transform:scale(0); transition:transform .45s var(--ease);
}
.player__btn:hover{ border-color:var(--fg); color:var(--bg); }
.player__btn:hover::before{ transform:scale(1); }
.player__btn svg{ position:relative; z-index:1; width:11px; height:13px; fill:currentColor; }
.player__btn .ico-play{ margin-left:2px; }
.player__btn .ico-pause{ display:none; }
.is-playing .player__btn{ border-color:var(--accent); color:var(--accent); }
.is-playing .player__btn::before{ background:var(--accent); }
.is-playing .player__btn:hover{ color:var(--bg); }
.is-playing .player__btn .ico-play{ display:none; }
.is-playing .player__btn .ico-pause{ display:block; }

.player__wave{
  flex:1; min-width:0;
  height:56px; display:block; cursor:pointer;
}
.player__time{
  flex:none;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; color:var(--muted);
  font-variant-numeric:tabular-nums;
  min-width:4ch; text-align:right;
}

/* ── work rows ─────────────────────────────────────────── */
.work{ border-top:1px solid var(--line-soft); }
.rows{ border-top:1px solid var(--line); }

.row{
  position:relative;
  display:grid;
  grid-template-columns:44px 52px minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr) 60px 22px;
  align-items:center;
  gap:clamp(12px,2vw,28px);
  padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-inline .5s var(--ease);
}
.row::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1;
  background:var(--bg-2);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.row:hover{ padding-inline:clamp(10px,1.6vw,22px); }
.row:hover::before{ transform:scaleY(1); transform-origin:top; }

.row__idx{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; color:var(--faint);
  transition:color .4s;
}
.row:hover .row__idx{ color:var(--muted); }

.row__btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:var(--muted);
  transition:border-color .4s, color .4s, background .4s, transform .4s var(--ease);
}
.row__btn svg{ width:9px; height:11px; fill:currentColor; }
.row__btn .ico-play{ margin-left:2px; }
.row__btn .ico-pause{ display:none; }
.row:hover .row__btn{ color:var(--fg); border-color:var(--fg); }
.row__btn:hover{ background:var(--fg); color:var(--bg); transform:scale(1.06); }
.row.is-playing .row__btn{ background:var(--accent); border-color:var(--accent); color:#fff; }
.row.is-playing .row__btn .ico-play{ display:none; }
.row.is-playing .row__btn .ico-pause{ display:block; }

.row__artist{
  font-size:clamp(14px,calc(1.8vw - 3px),23px);
  letter-spacing:-.035em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row__track{
  font-size:clamp(15px,1.4vw,20px);
  letter-spacing:-.03em; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .4s, transform .5s var(--ease);
}
.row:hover .row__track{ color:var(--fg); transform:translateX(6px); }
.row__role,.row__year{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  transition:color .4s;
}
.row__year{ text-align:right; }
.row:hover .row__role,.row:hover .row__year{ color:var(--muted); }
.row.is-playing .row__artist{ color:var(--accent); }

.row__bar{
  position:absolute; left:0; bottom:-1px; height:1px;
  width:0; background:var(--accent);
  transition:width .12s linear;
}

/* link out to the release */
.row__out{
  font-family:var(--mono); font-size:12px; color:var(--faint);
  text-align:right;
  opacity:0; transform:translate(-4px,4px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), color .3s;
}
.row:hover .row__out{ opacity:1; transform:none; }
.row__out:hover{ color:var(--accent); }

.feature__out{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:clamp(20px,2.4vw,28px);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  transition:color .35s;
}
.feature__out:hover{ color:var(--accent); }
.feature__out span{ transition:transform .35s var(--ease); }
.feature__out:hover span{ transform:translate(2px,-2px); }

/* hover thumbnail that follows the cursor */
.row-preview{
  position:fixed; top:0; left:0; z-index:50;
  width:210px; height:264px;
  pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
  overflow:hidden;
  will-change:transform;
}
.row-preview img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.9);
  transition:filter .6s var(--ease);
}
.row-preview.is-visible{ opacity:1; transform:translate(-50%,-50%) scale(1); }
/* same filter function list as above, so it interpolates instead of snapping */
.row-preview.is-visible img{ filter:grayscale(0) contrast(1) brightness(1); }

/* ── services ──────────────────────────────────────────── */
.services{ border-top:1px solid var(--line-soft); }
/* three standalone package cards */
.svc{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px);
  align-items:stretch;
}

.pkg{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(28px,2.6vw,38px);
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--bg-2);
  transition:transform .5s var(--ease), border-color .45s, box-shadow .5s var(--ease);
}
.pkg:hover{
  transform:translateY(-7px);
  border-color:rgba(242,240,236,.28);
  box-shadow:0 26px 55px rgba(0,0,0,.5);
}

.pkg__num{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; color:var(--faint);
}
.pkg__tag{
  position:absolute; top:clamp(28px,2.6vw,38px); right:clamp(28px,2.6vw,38px);
  padding:5px 11px; border-radius:100px;
  background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
}

/* the main package — permanently emphasised and raised above its siblings,
   which stay plain-bordered so this is the only one that reads as "the one" */
.pkg--hot{
  border-color:rgba(217,88,60,.45);
  background:linear-gradient(180deg,rgba(217,88,60,.15),var(--bg-2) 62%);
  transform:translateY(-16px);
  box-shadow:0 30px 65px rgba(0,0,0,.5);
}
.pkg--hot:hover{ transform:translateY(-22px); border-color:rgba(217,88,60,.6); }
.pkg--hot .pkg__title{ color:var(--accent); }

.pkg__title{
  margin:clamp(20px,2.4vw,30px) 0 0;
  font-size:clamp(23px,1.9vw,29px);
  line-height:1.1; letter-spacing:-.04em; font-weight:500;
  transition:color .4s;
}
.pkg__sub{
  margin:11px 0 0;
  color:var(--muted); font-size:14px; line-height:1.5;
}

.pkg__list{
  margin:clamp(24px,2.6vw,32px) 0 0; padding:clamp(24px,2.6vw,32px) 0 0;
  border-top:1px solid var(--line-soft);
  list-style:none;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  display:grid; gap:12px;
}
.pkg__list li{ display:flex; gap:10px; }
.pkg__list li::before{ content:"—"; color:var(--line); }

.pkg__foot{ margin-top:auto; padding-top:clamp(26px,3vw,34px); }
.pkg__price{
  margin:0 0 16px;
  display:flex; align-items:baseline; gap:7px;
}
.pkg__from{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.pkg__price b{
  font-size:clamp(26px,2.4vw,32px);
  letter-spacing:-.04em; font-weight:500;
}
.pkg__price span{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* outline by default; only the featured middle card keeps the solid
   white button, so the emphasis matches the card treatment above it */
.pkg__book{
  position:relative; overflow:hidden; isolation:isolate;
  width:100%; padding:14px 24px;
  border-radius:100px;
  background:transparent; color:var(--fg);
  border:1px solid var(--line);
  font-size:15px; font-weight:500; letter-spacing:-.005em;
  transition:color .4s var(--ease), border-color .4s;
}
.pkg__book::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.pkg__book:hover{ color:#fff; border-color:transparent; }
.pkg__book:hover::after{ transform:translateY(0); }
.pkg__book:active{ transform:scale(.97); }

.pkg--hot .pkg__book{ background:var(--fg); color:var(--bg); border-color:transparent; }
.pkg--hot .pkg__book:hover{ color:#fff; }

/* first-time-client offer, sitting under the three cards */
.svc-offer{
  margin:clamp(28px,3.4vw,44px) 0 0;
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px);
  border:1px solid rgba(217,88,60,.55);
  border-radius:16px;
  background:rgba(217,88,60,.06);
  color:var(--fg);
  font-size:15px; line-height:1.6;
}

/* ── presets ───────────────────────────────────────────── */
.preset-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px);
}

.preset{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-2);
  transition:transform .5s var(--ease), border-color .45s, box-shadow .5s var(--ease);
}
.preset:hover{
  transform:translateY(-7px);
  border-color:rgba(242,240,236,.28);
  box-shadow:0 26px 55px rgba(0,0,0,.5);
}

/* no cover photography yet — a flat tinted panel with the index number
   reads as a deliberate cover treatment rather than a missing asset */
.preset__cover{
  aspect-ratio:4/3;
  display:flex; align-items:flex-end;
  padding:clamp(20px,2.2vw,28px);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(217,88,60,.22), transparent 60%),
    var(--bg-2);
  border-bottom:1px solid var(--line-soft);
}
.preset__cover[data-tone="b"]{
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(217,88,60,.16), transparent 60%),
    var(--bg-2);
}
.preset__cover[data-tone="c"]{
  background:
    radial-gradient(140% 160% at 50% 100%, rgba(217,88,60,.18), transparent 65%),
    var(--bg-2);
}
.preset__idx{
  font-family:var(--mono); font-size:13px;
  letter-spacing:.16em; color:var(--faint);
}

.preset__title{
  margin:clamp(22px,2.4vw,28px) clamp(22px,2.4vw,28px) 0;
  font-size:19px; letter-spacing:-.03em; font-weight:500;
}
.preset__desc{
  margin:10px clamp(22px,2.4vw,28px) 0;
  color:var(--muted); font-size:14px; line-height:1.55;
}
.preset__foot{
  margin-top:auto;
  padding:clamp(22px,2.4vw,28px);
}
.preset__soon{
  display:inline-flex; align-items:center;
  padding:9px 16px;
  border-radius:100px;
  border:1px dashed var(--line);
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}

.preset-note{
  margin:clamp(28px,3.4vw,40px) 0 0;
  color:var(--muted); font-size:14px;
}
.preset-note__link{
  background:none; border:0; padding:0; margin:0;
  font:inherit; cursor:pointer;
  color:var(--fg); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--line);
  transition:text-decoration-color .3s;
}
.preset-note__link:hover{ text-decoration-color:var(--fg); }

/* ── contact ───────────────────────────────────────────── */
.contact{ border-top:1px solid var(--line-soft); }
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(48px,6vw,96px);
  align-items:start;
}
.contact__left{ max-width:640px; }
.contact__right{ padding-top:clamp(8px,1.6vw,20px); }
.contact__formlead{
  margin:0 0 clamp(26px,3.4vw,36px);
  max-width:36ch;
  color:var(--muted); font-size:17px; line-height:1.55;
}
.contact__actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(36px,5vw,56px);
}
@media (max-width:480px){
  .contact__actions{ gap:12px; }
  .contact__actions .btn{ flex:1 1 100%; justify-content:center; }
}
.contact__title{
  margin:0 0 clamp(28px,4vw,48px);
  font-size:clamp(38px,6vw,88px);
  line-height:.98; letter-spacing:-.05em; font-weight:500;
}
.contact__mail{
  display:inline-block;
  font-size:clamp(17px,1.9vw,26px);
  letter-spacing:-.03em;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:background-size .55s var(--ease), color .4s;
  padding-bottom:3px;
}
.contact__mail:hover{ color:var(--accent); background-size:100% 1px; }

.socials{
  list-style:none; margin:clamp(44px,6vw,72px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(22px,3.4vw,36px);
}
.social{
  display:flex; flex-direction:column; align-items:center; gap:13px;
  text-align:center;
}

.social__icon{
  position:relative;
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--muted);
  border:1px solid var(--line);
  transition:background .4s var(--ease), color .35s, border-color .4s,
             transform .45s var(--ease), box-shadow .45s var(--ease);
}
.social__icon svg{
  width:22px; height:22px;
  transition:transform .45s var(--ease);
}

/* little accent badge that pops in on hover, like a notification */
.social__arrow{
  position:absolute; top:-3px; right:-3px;
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:#fff;
  font-size:9px; line-height:1;
  opacity:0; transform:scale(.3) rotate(-45deg);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}

.social__label{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  transition:color .35s;
}

.social:hover .social__icon,
.social:focus-visible .social__icon{
  background:var(--fg); color:var(--bg); border-color:var(--fg);
  transform:translateY(-5px);
  box-shadow:0 16px 30px rgba(0,0,0,.4);
}
.social:hover .social__icon svg{ transform:rotate(-10deg) scale(1.08); }
.social:hover .social__arrow{ opacity:1; transform:scale(1) rotate(0deg); }
.social:hover .social__label{ color:var(--accent); }
.social:active .social__icon{ transform:translateY(-2px) scale(.94); }

/* ── form ──────────────────────────────────────────────── */
.form{ display:grid; gap:clamp(20px,2.6vw,30px); }
.field{ display:grid; gap:10px; }
/* Direct children only, throughout. The pill group nests its own
   <label>s and radios inside .field, and a descendant selector here
   outspecifies their rules — which silently forced the radios to
   width:100% and blew out the panel horizontally. */
.field > label{
  font-family:var(--mono); font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg);
}
.field > input,.field > textarea{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:10px 0;
  color:var(--fg);
  font:inherit; font-size:19px; letter-spacing:-.01em;
  border-radius:0;
  transition:border-color .4s;
  resize:vertical;
}
.field > input::placeholder,.field > textarea::placeholder{ color:var(--faint); }
.field > input:focus,.field > textarea:focus{ outline:none; border-bottom-color:var(--fg); }
.field.is-invalid > input,.field.is-invalid > textarea{ border-bottom-color:var(--accent); }

/* file input: the rule above sizes text fields, which leaves the native
   control oversized and misaligned — pull it back and dress the button */
.field > input[type="file"]{
  font-size:14px; color:var(--muted);
  padding:14px 0;
  cursor:pointer;
}
.field > input[type="file"]::file-selector-button{
  margin-right:14px;
  padding:9px 18px;
  border-radius:100px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  transition:color .3s, border-color .3s, background .3s;
}
.field > input[type="file"]::file-selector-button:hover{
  background:var(--fg); color:var(--bg); border-color:var(--fg);
}

.filenote{
  margin:8px 0 0; min-height:1.3em;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; color:var(--faint);
  overflow-wrap:anywhere;
}
.filenote.is-ok{ color:var(--muted); }
.filenote.is-error{ color:var(--accent); }
/* help text under the input's underline */
.field__hint{
  margin:0;
  font-size:13px; line-height:1.5; color:var(--faint);
}
.form__submit{ justify-self:start; margin-top:8px; }

.pill-group{ display:flex; flex-wrap:wrap; gap:10px; }
.pill-group__input{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0,0,0,0); overflow:hidden;
}
.pill-group__btn{
  display:inline-flex; align-items:center;
  padding:10px 19px;
  border-radius:100px;
  border:1px solid var(--line);
  font-family:var(--mono); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  cursor:pointer;
  transition:color .3s, border-color .3s, background .3s;
}
.pill-group__btn:hover{ color:var(--fg); border-color:rgba(242,240,236,.35); }
.pill-group__input:checked + .pill-group__btn{
  background:var(--fg); color:var(--bg); border-color:var(--fg);
}
.pill-group__input:focus-visible + .pill-group__btn{
  outline:2px solid var(--accent); outline-offset:2px;
}
.form__note{
  margin:0; min-height:1.4em;
  font-family:var(--mono); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  transition:color .3s;
}
.form__note.is-ok{ color:var(--fg); }
.form__note.is-error{ color:var(--accent); }

/* honeypot — visible to bots, not to people. Clipped rather than parked
   at left:-9999px, which pushes the panel's overflow box sideways. */
.hp{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0,0,0,0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
  pointer-events:none;
}

.form.is-sending{ opacity:.75; }
.form__submit:disabled{ cursor:progress; }

/* two-column layout for the longer (distribution) form. Hints sit
   BELOW their input (label → input → hint), so rows align by their
   tops and labels stay glued to their fields — bottom-aligning with
   hints above the input left holes wherever hint lengths differed. */
@media (min-width:700px){
  .form--grid{
    grid-template-columns:1fr 1fr;
    column-gap:clamp(26px,3vw,38px);
    row-gap:clamp(20px,2.4vw,28px);
    align-items:start;
  }
  .form--grid .field--wide,
  .form--grid .form__submit,
  .form--grid .form__note{ grid-column:1 / -1; }
}

/* ── contact modal ─────────────────────────────────────── */
body.modal-open{ overflow:hidden; }

.modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  visibility:hidden; opacity:0;
  transition:opacity .4s var(--ease), visibility .4s;
}
.modal.is-open{ visibility:visible; opacity:1; }

.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(6,6,7,.72);
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
}

.modal__panel{
  position:relative; z-index:1;
  width:100%; max-width:460px;
  max-height:calc(100svh - 48px);
  /* a dialog scrolls vertically only — never sideways. Note overflow-y
     alone would compute overflow-x to auto, which is how the sideways
     scroll appeared in the first place. */
  overflow-x:hidden; overflow-y:auto;
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:20px;
  padding:clamp(30px,5vw,46px);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateY(18px) scale(.97);
  transition:transform .45s var(--ease);
}
.modal.is-open .modal__panel{ transform:none; }

.modal__close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  font-size:22px; line-height:1; color:var(--muted);
  background:rgba(242,240,236,.06);
  border:1px solid var(--line-soft);
  transition:color .3s, background .3s, transform .3s var(--ease);
}
.modal__close:hover{ color:var(--fg); background:rgba(242,240,236,.12); }
.modal__close:active{ transform:scale(.92); }
.modal__close svg{
  width:13px; height:13px;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
}

.modal__title{
  margin:0 0 10px;
  padding-right:34px;
  font-size:clamp(24px,4.4vw,32px);
  line-height:1.08; letter-spacing:-.04em; font-weight:500;
}
.modal__sub{
  margin:0 0 clamp(26px,3.6vw,34px);
  max-width:38ch;
  color:var(--muted); font-size:17px; line-height:1.55;
}

/* wider panel for the distribution form — scoped above the mobile
   breakpoint so it can't fight .modal__panel{max-width:none} there */
@media (min-width:641px){
  .modal--wide .modal__panel{ max-width:760px; }
}

/* selected package summary — [hidden] needs the override because the
   grid display below would otherwise beat the UA's [hidden]{display:none} */
.pkg-pick{
  display:grid; gap:6px;
  margin:0 0 clamp(26px,3.6vw,34px);
  padding:16px 20px;
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:12px;
  background:rgba(242,240,236,.04);
}
.pkg-pick[hidden]{ display:none; }
.pkg-pick__label{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.pkg-pick__name{ font-size:19px; letter-spacing:-.02em; color:var(--fg); }
.pkg-pick__price{
  font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:640px){
  .modal{ align-items:flex-end; padding:0; }
  .modal__panel{
    max-width:none;
    border-radius:20px 20px 0 0;
    padding:30px 22px calc(26px + env(safe-area-inset-bottom));
    max-height:88svh;
    transform:translateY(100%);
  }
  .modal.is-open .modal__panel{ transform:none; }
}

/* ── footer ────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--line); padding-block:36px; }
/* the badge plate is pure black against a #0A0A0A page — near-invisible
   by design, so the mark reads as white type. Never recoloured. */
.footer__cert{ margin-bottom:30px; }
.footer__cert img{
  display:block;
  width:128px; height:auto;
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.footer__top{ transition:color .35s; }
.footer__top:hover{ color:var(--fg); }

.footer__by{ white-space:nowrap; transition:color .35s; }
.footer__by:hover{ color:var(--accent); }
.footer__by span{ display:inline-block; transition:transform .35s var(--ease); }
.footer__by:hover span{ transform:translate(2px,-2px); }

/* ── scroll reveal ─────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s ease, transform 1s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ═══════════════ mobile player ═══════════════
   Never toggled with [hidden] — visibility+transform keeps the slide
   animation and takes the panels out of hit-testing when closed. */

/* ── mini bar ──────────────────────────────────────────── */
.mini{
  position:fixed; z-index:150;
  left:10px; right:10px; bottom:10px;
  display:flex;
  align-items:center; gap:12px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(22,22,23,.86);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(242,240,236,.1);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  visibility:hidden;
  transform:translateY(calc(100% + 18px));
  transition:transform .55s var(--ease), visibility .55s;
}
.mini.is-on{ visibility:visible; transform:none; }

.mini__open{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:11px;
  text-align:left; padding:0;
}
.mini__art{
  flex:none; width:40px; height:40px;
  border-radius:6px; object-fit:cover;
  background:var(--bg-2);
}
.mini__text{ display:grid; gap:2px; min-width:0; }
.mini__title,.mini__artist{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.25;
}
.mini__title{ font-size:14px; letter-spacing:-.02em; }
.mini__artist{ font-size:12px; color:var(--muted); }

.mini__toggle{
  flex:none;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  transition:background .3s;
}
.mini__toggle:active{ background:rgba(242,240,236,.1); }
.mini__toggle svg{ width:12px; height:14px; fill:var(--fg); }
.mini__toggle .ico-play{ margin-left:2px; }
.mini__toggle .ico-pause,
.mini.is-playing .mini__toggle .ico-play{ display:none; }
.mini.is-playing .mini__toggle .ico-pause{ display:block; }

.mini__close{
  flex:none;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--muted);
  transition:color .3s, background .3s;
}
.mini__close svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.mini__close:hover{ color:var(--fg); }
.mini__close:active{ background:rgba(242,240,236,.1); color:var(--fg); }

.mini__bar{
  position:absolute; left:12px; right:12px; bottom:4px;
  height:2px; border-radius:2px;
  background:rgba(242,240,236,.14);
  overflow:hidden;
}
.mini__bar i{
  display:block; height:100%; width:0;
  background:var(--accent);
  transition:width .15s linear;
}

/* ── full-screen sheet ─────────────────────────────────── */
.np{
  position:fixed; inset:0; z-index:200;
  display:flex;
  flex-direction:column; align-items:stretch;
  padding:10px clamp(22px,7vw,40px) calc(26px + env(safe-area-inset-bottom));
  background:#0B0B0C;
  visibility:hidden;
  transform:translateY(100%);
  transition:transform .55s var(--ease), visibility .55s;
  overflow:hidden;
}
.np.is-open{ visibility:visible; transform:none; }
.np.is-dragging{ transition:none; }

/* blurred artwork wash behind everything */
.np__bg{
  position:absolute; inset:-25%;
  background-size:cover; background-position:center;
  filter:blur(70px) saturate(180%) brightness(.5);
  opacity:.55;
  transition:opacity .6s ease;
  pointer-events:none;
}
.np > *:not(.np__bg){ position:relative; z-index:1; }

.np__grab{
  flex:none;
  display:grid; place-items:center;
  height:30px; margin-bottom:2vh;
}
.np__grab span{
  display:block; width:38px; height:5px; border-radius:3px;
  background:rgba(242,240,236,.3);
}

/* corner close — desktop only (the grab handle is the mobile idiom) */
.np__x{
  display:none; place-items:center;
  width:44px; height:44px; border-radius:50%;
  color:var(--fg);
  background:rgba(11,11,12,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(242,240,236,.16);
  transition:color .3s, background .3s, transform .3s var(--ease);
}
.np__x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
/* higher specificity than ".np > *:not(.np__bg)" above, which would
   otherwise win the position property and drop this into flex flow */
.np > .np__x{ position:absolute; top:20px; right:24px; z-index:3; }
.np__x:hover{ color:var(--fg); background:rgba(11,11,12,.6); }
.np__x:active{ transform:scale(.92); }

/* share — mirrors .np__x but on the left, and visible on every screen
   (there's no mobile-only affordance standing in for it like the grab
   handle does for close) */
.np__share{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  color:var(--fg);
  background:rgba(11,11,12,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(242,240,236,.16);
  transition:color .3s, background .3s, border-color .3s, transform .3s var(--ease);
}
.np__share svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.np > .np__share{ position:absolute; top:20px; left:24px; z-index:3; }
.np__share:hover{ background:rgba(11,11,12,.6); }
.np__share:active{ transform:scale(.92); }
.np__share.is-copied{ color:var(--accent); border-color:rgba(217,88,60,.45); }

.np__share-note{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-4px);
  padding:6px 13px; border-radius:100px;
  background:var(--fg); color:var(--bg);
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.np__share.is-copied .np__share-note{ opacity:1; transform:translateX(-50%) translateY(0); }

.np__art{
  flex:none;                          /* keep it a perfect square in the flex column */
  margin:0 auto;
  width:min(78vw,340px); aspect-ratio:1/1;
  border-radius:12px; overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.62);
  transform:scale(.84);
  transition:transform .55s var(--ease);
}
.np.is-playing .np__art{ transform:scale(1); }
.np__art img{ width:100%; height:100%; object-fit:cover; display:block; }

.np__meta{ margin-top:5vh; }
.np__title{
  margin:0;
  font-size:clamp(21px,5.6vw,27px);
  letter-spacing:-.035em; font-weight:600; line-height:1.2;
}
.np__artist{
  margin:5px 0 0;
  font-size:clamp(16px,4.4vw,20px);
  letter-spacing:-.02em; color:var(--accent);
}

/* scrubber */
.np__scrub{ margin-top:4vh; }
.np__track{
  position:relative; display:block;
  height:6px; border-radius:4px;
  background:rgba(242,240,236,.18);
  cursor:pointer; touch-action:none;
}
/* the bar stays 6px tall but grabbing it is a finger-sized target */
.np__track::before{ content:""; position:absolute; inset:-15px 0; }
.np__fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  border-radius:4px; background:rgba(242,240,236,.85);
  transition:width .15s linear;
}
.np__knob{
  position:absolute; top:50%; left:0;
  width:13px; height:13px; border-radius:50%;
  background:var(--fg);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .3s var(--ease), left .15s linear;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.np__track:active .np__knob,.np__track.is-scrubbing .np__knob{ transform:translate(-50%,-50%) scale(1); }
.np__track.is-scrubbing .np__fill,.np__track.is-scrubbing .np__knob{ transition:none; }

.np__times{
  display:flex; justify-content:space-between;
  margin-top:9px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* transport */
.np__ctrl{
  margin-top:auto; padding-top:4vh;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(30px,10vw,54px);
}
.np__btn{ display:grid; place-items:center; padding:10px; }
.np__btn svg{ width:26px; height:21px; fill:var(--fg); transition:opacity .3s, transform .3s var(--ease); }
.np__btn:active svg{ transform:scale(.88); }
.np__btn:disabled svg{ opacity:.28; }

.np__play{
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--fg);
  transition:transform .3s var(--ease);
}
.np__play:active{ transform:scale(.93); }
.np__play svg{ width:22px; height:26px; fill:var(--bg); }
.np__play .ico-play{ margin-left:3px; }
.np__play .ico-pause,
.np.is-playing .np__play .ico-play{ display:none; }
.np.is-playing .np__play .ico-pause{ display:block; }

.np__out{
  margin-top:3.2vh; text-align:center;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.np__out:active{ color:var(--fg); }

/* the player exists on every screen now */
body.np-open{ overflow:hidden; }

/* phones: full-width pill + edge-to-edge sheet */
@media (max-width:900px){
  body.has-mini{ padding-bottom:74px; }
}

/* desktop: centered floating pill + centered now-playing panel */
@media (min-width:901px){
  .mini{
    left:50%; right:auto; bottom:20px;
    width:min(460px,calc(100vw - 48px));
    transform:translateX(-50%) translateY(calc(100% + 32px));
  }
  .mini.is-on{ transform:translateX(-50%); }
  body.has-mini{ padding-bottom:104px; }

  .np{ justify-content:center; align-items:center; padding:6vh 24px; }
  .np__grab{ display:none; }
  .np__x{ display:grid; }
  .np__art{ width:min(46vh,340px); }
  .np__meta{ margin-top:4vh; text-align:center; }
  .np__meta,.np__scrub,.np__ctrl,.np__out{ width:100%; max-width:440px; margin-inline:auto; }
  .np__ctrl{ margin-top:4vh; }        /* override the mobile margin-top:auto */
}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1080px){
  .row{ grid-template-columns:36px 44px minmax(0,1fr) minmax(0,1fr) 74px 22px; }
  .row__role{ display:none; }
}

@media (max-width:900px){
  :root{ --nav-h:64px; }
  .nav__links,.nav__actions{ display:none; }
  .nav__burger{ display:block; }

  .hero{ min-height:100svh; padding-bottom:56px; }
  .hero__grid{ grid-template-columns:1fr; gap:32px; align-content:center; }
  .hero__media{ order:-1; aspect-ratio:4/3; max-height:36svh; }
  .hero__title{ font-size:clamp(48px,15vw,90px); }
  .hero__intro{ max-width:32ch; }
  .hero__foot-mid{ display:none; }

  .about__grid{ grid-template-columns:1fr; gap:40px; }
  .about__media{ aspect-ratio:16/10; }
  .facts{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }

  .feature{ grid-template-columns:1fr; gap:26px; }
  .feature--flip .feature__media{ order:0; }
  .feature__media{ aspect-ratio:16/10; }

  .svc{ grid-template-columns:1fr; }
  .pkg:hover{ transform:none; }        /* no lift on touch */
  .pkg--hot{ transform:none; }         /* stacked cards: no raised offset */
  .pkg--hot:hover{ transform:none; }

  .preset-grid{ grid-template-columns:1fr; }
  .preset:hover{ transform:none; }

  .socials{ justify-content:center; }
  .row-preview{ display:none; }

  .contact__grid{ grid-template-columns:1fr; gap:clamp(40px,7vw,60px); }
  .contact__right{ padding-top:0; }
}

@media (max-width:640px){
  .row{
    grid-template-columns:40px minmax(0,1fr) 62px;
    gap:14px;
    padding:18px 0;
  }
  .row__idx,.row__out{ display:none; }
  .row__track{ grid-column:2; font-size:14px; }
  .row__artist{ grid-column:2; grid-row:1; }
  .row__btn{ grid-row:span 2; }
  .row__year{ grid-row:span 2; }
  .row:hover .row__track{ transform:none; }

  .player{ gap:14px; }
  .player__btn{ width:46px; height:46px; }
  .player__wave{ height:46px; }

  .footer__inner{ flex-direction:column; align-items:flex-start; gap:14px; }
  .footer__mid{ display:none; }
}

/* ── motion preferences ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title .reveal-line{ transform:none; }
  .hero__media img{ opacity:1; transform:none; }
  .hero__foot{ opacity:1; transform:none; }
}