/* =========================================================================
   СТАС КОРОЛЬОВ — avant-garde artist landing
   Palette pulled from the portrait (steel/teal + bone) and his record covers
   (blood red on black, amber). Display: Unbounded. Quotes: Playfair Display.
   Body: Manrope. Data/labels: JetBrains Mono. Single breakpoint: 860px.
   ========================================================================= */
:root {
  --void:#0A0A0C;
  --void-2:#0E0E12;
  --panel:#141419;
  --panel-2:#1B1B22;
  --steel:#2C3F4D;
  --steel-deep:#15212A;

  --bone:#F2ECE1;
  --bone-dim:#A8A296;
  --mute:#6E695E;

  --blood:#E5402A;       /* primary signal */
  --blood-2:#FF5A3C;     /* hover / bright */
  --amber:#E99708;       /* secondary */

  --line:rgba(242,236,225,0.12);
  --line-strong:rgba(242,236,225,0.22);

  --display:"Unbounded", system-ui, sans-serif;
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Manrope", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --container:1240px;
  --pad-x:34px;
  --header-h:66px;
  --radius:6px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans);
  font-weight:400; font-size:16px; line-height:1.7;
  color:var(--bone); background:var(--void);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img, video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; transition:color .25s, opacity .25s; }
::selection { background:var(--blood); color:#fff; }

.container { max-width:var(--container); margin:0 auto; padding:0 var(--pad-x); }
section { padding:clamp(72px,10vw,134px) 0; position:relative; }

/* ---------- TYPE ---------- */
h1,h2,h3,h4,h5 { font-family:var(--display); font-weight:800; line-height:.96; letter-spacing:-.02em; text-transform:uppercase; }
h1 { font-size:clamp(3.2rem,13vw,10rem); line-height:.86; }
h1 em { font-style:normal; color:var(--blood); }
h2 { font-size:clamp(2.3rem,6.4vw,5rem); line-height:.94; margin-bottom:.4em; }
h2 em, h3 em, .hero-sub em, .album-feature-info em {
  font-family:var(--serif); font-style:italic; font-weight:600;
  text-transform:none; letter-spacing:0; color:var(--blood);
}
h3 { font-size:clamp(1.5rem,2.4vw,2rem); font-weight:700; }
h4 { font-size:1.3rem; font-weight:700; }
h5 { font-size:.82rem; font-weight:700; letter-spacing:.06em; }
p { margin-bottom:1em; color:var(--bone-dim); }
strong { color:var(--bone); font-weight:600; }
.lead { font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--bone-dim); max-width:620px; line-height:1.55; }

.eyebrow {
  font-family:var(--mono); font-size:.74rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--bone-dim);
  display:inline-block; margin-bottom:1.4em;
}
.eyebrow::before { content:"// "; color:var(--mute); }
.eyebrow.accent { color:var(--blood); }
.eyebrow.accent::before { color:var(--blood); }

.section-head { max-width:760px; margin:0 auto clamp(48px,6vw,82px); text-align:center; }
.section-head.left { margin-left:0; text-align:left; }
.section-head .lead { margin:1.4em auto 0; }
.section-head.left .lead { margin-left:0; }

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; font-family:var(--mono); font-size:.82rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; border:1px solid transparent;
  border-radius:0; cursor:pointer; transition:all .28s cubic-bezier(.2,.8,.2,1); white-space:nowrap;
}
.btn svg { width:18px; height:18px; }
.btn-sm { padding:11px 20px; font-size:.74rem; }
.btn-lg { padding:18px 38px; font-size:.86rem; }
.btn-primary { background:var(--blood); color:#fff; }
.btn-primary:hover { background:var(--blood-2); transform:translateY(-2px); box-shadow:0 14px 34px -14px var(--blood); }
.btn-ghost-light { background:transparent; border-color:var(--line-strong); color:var(--bone); }
.btn-ghost-light:hover { background:var(--bone); color:var(--void); border-color:var(--bone); }
.btn-outline-light { background:transparent; border-color:var(--bone); color:var(--bone); }
.btn-outline-light:hover { background:var(--bone); color:var(--void); }

/* ---------- HEADER ---------- */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100; padding:12px 0;
  background:rgba(10,10,12,0.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent; transition:padding .35s, background .35s, border-color .35s;
}
.site-header.scrolled { padding:7px 0; background:rgba(10,10,12,0.92); border-bottom-color:var(--line); }
.header-inner { display:flex; align-items:center; gap:24px; position:relative; }
.logo { display:flex; align-items:center; gap:11px; color:var(--bone); flex-shrink:0; }
.logo-mark { width:42px; height:42px; border-radius:50%; overflow:hidden; border:1px solid var(--line-strong); flex-shrink:0; }
.logo-mark img { width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.logo-text { font-family:var(--display); font-weight:800; font-size:.82rem; line-height:1; text-transform:uppercase; letter-spacing:.02em; }
.logo-text em { font-style:normal; color:var(--blood); }

.nav { display:flex; gap:24px; font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.nav > a { color:var(--bone-dim); position:relative; text-transform:uppercase; transition:color .25s; }
.nav > a:hover, .nav > a.is-active { color:var(--bone); }
.nav-indicator { position:absolute; bottom:-9px; left:0; width:0; height:2px; background:var(--blood); opacity:0; pointer-events:none; transition:left .4s cubic-bezier(.2,.8,.2,1), width .4s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.nav-indicator.is-visible { opacity:1; }

.header-actions { margin-left:auto; display:flex; align-items:center; gap:14px; }
.burger { display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; }
.burger span { width:24px; height:2px; background:var(--bone); transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-footer { display:none; }

/* ---------- HERO (photo-collage word "СТАС") ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero {
  --dot-x:50%; --dot-y:50%; --dot-opacity:0;
  position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(4px,1vw,14px);
  padding:96px 0 56px; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(circle at 16% 20%, rgba(233,151,8,.15), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(229,64,42,.17), transparent 28%),
    radial-gradient(circle at 50% 92%, rgba(44,63,77,.34), transparent 34%),
    var(--void);
}
.hero::before {
  content:""; position:absolute; inset:-40px; z-index:0; pointer-events:none; opacity:.13;
  background-image:
    linear-gradient(45deg, transparent 0 48%, rgba(242,236,225,.5) 49% 51%, transparent 52% 100%),
    radial-gradient(circle, rgba(242,236,225,.4) 1px, transparent 1.4px);
  background-size:42px 42px, 18px 18px; transform:rotate(-4deg) scale(1.05);
}
.hero::after {
  content:""; position:absolute; inset:-40px; z-index:0; pointer-events:none; opacity:var(--dot-opacity);
  background-image:radial-gradient(circle, rgba(229,64,42,.92) 1px, transparent 1.45px);
  background-size:18px 18px; transform:rotate(-4deg) scale(1.05);
  -webkit-mask-image:radial-gradient(circle at var(--dot-x) var(--dot-y), #000 0 76px, rgba(0,0,0,.62) 132px, transparent 230px);
  mask-image:radial-gradient(circle at var(--dot-x) var(--dot-y), #000 0 76px, rgba(0,0,0,.62) 132px, transparent 230px);
  transition:opacity 180ms ease;
}
.hero-collage { width:100%; display:grid; place-items:center; position:relative; z-index:1; }
.stage { width:min(94vw,1280px); position:relative; z-index:1; perspective:1100px; perspective-origin:50% 50%; }
.word { width:100%; height:clamp(150px,32vw,460px); position:relative; transform-style:preserve-3d; will-change:transform; }
.masked {
  --mask-x:0px; --mask-y:0px; --mask-z:0px;
  position:absolute; inset:0; z-index:var(--layer-z,1); overflow:hidden;
  -webkit-mask-image:var(--mask-url); mask-image:var(--mask-url);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center; opacity:0;
  transform:translate3d(calc(var(--pose-x,0px) + var(--mask-x)), calc(var(--pose-y,0px) + var(--mask-y)), var(--mask-z)) rotateZ(var(--pose-r,0deg)) scale(var(--pose-scale,1));
  transform-origin:var(--pose-origin,center); transform-style:preserve-3d;
  animation:letter-pop 1040ms cubic-bezier(.16,1.08,.22,1) forwards; animation-delay:var(--delay,0ms);
  backface-visibility:hidden; contain:layout paint style; will-change:transform, opacity;
}
.masked::after {
  content:""; position:absolute; inset:-18%; pointer-events:none;
  background:linear-gradient(105deg, transparent 28%, rgba(255,255,255,.78), rgba(233,151,8,.26), transparent 54%);
  opacity:0; transform:translateX(-46%) rotate(10deg);
  animation:letter-glint 900ms ease-out forwards; animation-delay:calc(var(--delay,0ms) + 280ms);
}
.grid {
  position:absolute; top:-44px; left:-44px; width:calc(100% + 88px); height:calc(100% + 88px);
  display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(6,1fr);
  gap:clamp(4px,.7vw,12px); padding:clamp(6px,.8vw,14px); background:#fff;
  transform:translate3d(calc(var(--shift-x,0px) + var(--grid-x,0px)), calc(var(--shift-y,0px) + var(--grid-y,0px)), 0);
  contain:layout paint style; backface-visibility:hidden;
}
.tile {
  min-height:0; background-size:cover; background-position:center;
  transform:rotate(var(--r)) scale(1.04);
  border:clamp(2px,.28vw,5px) solid #050505; box-shadow:0 0 0 2px rgba(255,255,255,.12) inset;
  backface-visibility:hidden; opacity:1; transition:opacity 180ms ease, transform 180ms ease;
}
.tile.is-swapping { opacity:.32; transform:rotate(var(--r)) scale(.96); }
.outline-group { position:absolute; inset:0; pointer-events:none; z-index:8; transform-style:preserve-3d; }
.outline-letter {
  position:absolute; inset:0; background-image:var(--outline-url); background-position:center; background-repeat:no-repeat; background-size:100% 100%; opacity:0;
  transform:translate3d(calc(var(--pose-x,0px) + var(--from-x,0px)), calc(var(--pose-y,0px) + var(--from-y,0px)), 170px) rotateX(var(--from-rx,0deg)) rotateY(var(--from-ry,0deg)) rotateZ(calc(var(--pose-r,0deg) + var(--from-rz,0deg))) scale(.9) scale(var(--pose-scale,1));
  transform-origin:var(--pose-origin,center);
  animation:outline-letter-in 820ms cubic-bezier(.18,.96,.24,1) forwards; animation-delay:var(--outline-delay,0ms);
  backface-visibility:hidden; will-change:transform, opacity;
}
@keyframes letter-pop {
  0%   { opacity:0; transform:translate3d(calc(var(--pose-x,0px) + var(--mask-x) - 92px), calc(var(--pose-y,0px) + var(--mask-y) + 140px), -460px) rotateX(72deg) rotateY(var(--entry-rotate,-38deg)) rotateZ(calc(var(--pose-r,0deg) + var(--entry-spin,-6deg))) scale(.46); }
  48%  { opacity:1; transform:translate3d(calc(var(--pose-x,0px) + var(--mask-x) + 12px), calc(var(--pose-y,0px) + var(--mask-y) - 18px), calc(var(--mask-z) + 54px)) rotateX(-10deg) rotateY(8deg) rotateZ(calc(var(--pose-r,0deg) + 1.5deg)) scale(1.08) scale(var(--pose-scale,1)); }
  72%  { transform:translate3d(calc(var(--pose-x,0px) + var(--mask-x) - 4px), calc(var(--pose-y,0px) + var(--mask-y) + 5px), calc(var(--mask-z) + 16px)) rotateX(4deg) rotateY(-3deg) rotateZ(calc(var(--pose-r,0deg) - .6deg)) scale(.985) scale(var(--pose-scale,1)); }
  100% { opacity:1; transform:translate3d(calc(var(--pose-x,0px) + var(--mask-x)), calc(var(--pose-y,0px) + var(--mask-y)), var(--mask-z)) rotateX(0) rotateY(0) rotateZ(var(--pose-r,0deg)) scale(var(--pose-scale,1)); }
}
@keyframes letter-glint {
  0%   { opacity:0; transform:translateX(-46%) rotate(10deg); }
  34%  { opacity:.86; }
  100% { opacity:0; transform:translateX(48%) rotate(10deg); }
}
@keyframes outline-letter-in {
  0%   { opacity:0; transform:translate3d(calc(var(--pose-x,0px) + var(--from-x,0px)), calc(var(--pose-y,0px) + var(--from-y,0px)), 170px) rotateX(var(--from-rx,0deg)) rotateY(var(--from-ry,0deg)) rotateZ(calc(var(--pose-r,0deg) + var(--from-rz,0deg))) scale(.9) scale(var(--pose-scale,1)); }
  62%  { opacity:1; transform:translate3d(var(--pose-x,0px), var(--pose-y,0px), 112px) rotateX(0) rotateY(0) rotateZ(var(--pose-r,0deg)) scale(1.045) scale(var(--pose-scale,1)); }
  100% { opacity:1; transform:translate3d(var(--pose-x,0px), var(--pose-y,0px), 92px) rotateX(0) rotateY(0) rotateZ(var(--pose-r,0deg)) scale(var(--pose-scale,1)); }
}

/* hero foot — sub-line + CTA + meta below the collage */
.hero-foot { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; margin-top:clamp(-72px,-4vw,-14px); }
.hero-sub { font-size:clamp(1.05rem,1.7vw,1.32rem); color:var(--bone-dim); max-width:560px; line-height:1.5; margin:0; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero-meta { display:flex; gap:40px; flex-wrap:wrap; justify-content:center; border-top:1px solid var(--line); padding-top:22px; }
.hero-meta div { display:flex; flex-direction:column; gap:3px; align-items:center; }
.hero-meta strong { font-family:var(--display); font-weight:800; font-size:1.8rem; color:var(--blood); line-height:1; }
.hero-meta span { font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--bone-dim); text-transform:uppercase; }
.hero-scroll { position:absolute; bottom:18px; left:calc(50% - 20px); color:var(--bone-dim); width:40px; height:40px; display:flex; align-items:center; justify-content:center; z-index:3; }
.hero-scroll svg { width:22px; height:22px; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

@keyframes hero-up { 0%{opacity:0; transform:translateY(24px)} 100%{opacity:1; transform:translateY(0)} }
.hero-foot > * { opacity:0; animation:hero-up .8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-foot > .hero-sub  { animation-delay:1.2s; }
.hero-foot > .hero-cta  { animation-delay:1.36s; }
.hero-foot > .hero-meta { animation-delay:1.52s; }
.hero-scroll { opacity:0; animation:hero-up .8s 1.75s forwards, bounce 2.5s 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) {
  .hero-foot > *, .hero-scroll { animation:none!important; opacity:1!important; transform:none!important; }
  .masked, .masked::after, .outline-letter { animation:none; opacity:1; }
  .outline-letter { transform:translate3d(var(--pose-x,0px), var(--pose-y,0px), 92px) rotateZ(var(--pose-r,0deg)) scale(var(--pose-scale,1)); }
}

/* ---------- TICKER ---------- */
.ticker { border-block:1px solid var(--line); background:var(--blood); overflow:hidden; }
.ticker-track { display:flex; align-items:center; gap:26px; white-space:nowrap; padding:11px 0; width:max-content; animation:marquee 36s linear infinite; }
.ticker span { font-family:var(--display); font-weight:700; font-size:.92rem; text-transform:uppercase; letter-spacing:.04em; color:#fff; }
.tick-star { width:13px; height:13px; color:rgba(255,255,255,.65); flex-shrink:0; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- MANIFESTO ---------- */
.manifesto { background:var(--void); text-align:center; }
.manifesto-quote { font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(2.4rem,7vw,5.6rem); line-height:1.04; color:var(--bone); margin:0 auto .7em; max-width:14ch; }
.manifesto-quote em { color:var(--blood); }
.manifesto-text { max-width:680px; margin:0 auto; color:var(--bone-dim); font-size:1.06rem; }

/* ---------- JOURNEY / TIMELINE ---------- */
.journey { background:var(--void-2); }
.timeline { list-style:none; max-width:920px; margin:0 auto; position:relative; }
.timeline::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--blood), var(--line)); }
.tl-item { display:grid; grid-template-columns:120px 1fr; gap:30px; padding:0 0 clamp(40px,5vw,64px) 38px; position:relative; }
.tl-item::before { content:""; position:absolute; left:-5px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--void-2); border:2px solid var(--bone-dim); }
.tl-item.accent-item::before, .tl-item.now-item::before { border-color:var(--blood); background:var(--blood); }
.tl-item.war-item::before { border-color:var(--blood); }
.tl-year { font-family:var(--mono); font-weight:700; font-size:clamp(1.3rem,2.6vw,2.1rem); color:var(--blood); line-height:1.05; letter-spacing:-.02em; }
.tl-body h3 { margin-bottom:.4em; }
.tl-body p { margin:0; color:var(--bone-dim); }
.tl-q { display:block; margin-top:.7em; font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--bone); }
.tl-media { grid-column:1/-1; margin-top:22px; border:1px solid var(--line); overflow:hidden; max-width:420px; }
.tl-media img { width:100%; height:260px; object-fit:cover; filter:grayscale(.15) contrast(1.04); transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.tl-item:hover .tl-media img { transform:scale(1.04); }

/* ---------- MUSIC / DISCOGRAPHY ---------- */
.music { background:var(--void); }
.album-feature { position:relative; display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:46px; align-items:center; padding:clamp(28px,4vw,52px); margin-bottom:clamp(56px,7vw,90px); border:1px solid var(--line); overflow:hidden; isolation:isolate; }
.album-feature::before { content:""; position:absolute; inset:0; z-index:-1; background-image:var(--cover); background-size:cover; background-position:center; filter:blur(34px) saturate(1.2) brightness(.4); transform:scale(1.2); }
.album-feature::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg, rgba(10,10,12,.82), rgba(10,10,12,.6)); }
.album-feature-art { position:relative; aspect-ratio:1/1; border:1px solid var(--line-strong); overflow:hidden; cursor:pointer; box-shadow:0 30px 70px -30px #000; }
.album-feature-art img { width:100%; height:100%; object-fit:cover; }
.album-feature-info h3 { font-size:clamp(1.8rem,4vw,3rem); margin-bottom:.4em; }
.album-feature-info p { color:var(--bone-dim); max-width:46ch; }
.album-feature-info p a { color:var(--blood); border-bottom:1px solid currentColor; }
.album-feature-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }

.season-head { display:flex; align-items:center; gap:18px; margin:clamp(40px,5vw,64px) 0 26px; }
.season-key { font-family:var(--display); font-weight:900; font-size:clamp(1.6rem,4vw,2.6rem); color:transparent; -webkit-text-stroke:1.5px var(--blood); line-height:1; }
.season-head h4 { font-size:clamp(1.1rem,2vw,1.5rem); }
.season-sub { font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:var(--bone-dim); text-transform:uppercase; }

.album-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.album-card { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); transition:border-color .3s, transform .3s; }
.album-card:hover { border-color:var(--blood); transform:translateY(-4px); }
.album-art { position:relative; aspect-ratio:1/1; background-size:cover; background-position:center; }
.album-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,12,.05) 40%, rgba(10,10,12,.7)); opacity:.7; transition:opacity .3s; }
.album-card:hover .album-art::after { opacity:.4; }
.album-type { position:absolute; top:10px; left:10px; z-index:2; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(10,10,12,.7); color:var(--bone); padding:4px 8px; }
.album-play, .yt-play, .album-feature-art .album-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:60px; height:60px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85); background:rgba(10,10,12,.35); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(8px); transition:transform .3s, background .25s, color .25s, border-color .25s; }
.album-play svg, .yt-play svg { width:26px; height:26px; margin-left:3px; }
.album-art:hover .album-play, .album-feature-art:hover .album-play, .yt-card:hover .yt-play { background:var(--blood); border-color:var(--blood); transform:translate(-50%,-50%) scale(1.08); }
.album-meta { padding:13px 14px 15px; }
.album-meta h5 { font-family:var(--sans); font-weight:700; font-size:.92rem; text-transform:none; letter-spacing:0; line-height:1.2; margin-bottom:5px; color:var(--bone); }
.album-link { font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--bone-dim); }
.album-card:hover .album-link { color:var(--blood); }
/* injected bandcamp players */
/* Bandcamp players embedded inline (lazy) — 1 click to play, no JS injection */
.album-iframe { position:absolute; left:0; right:0; bottom:0; width:100%; height:42px; border:0; z-index:4; display:block; }
.album-feature-art { aspect-ratio:auto; cursor:default; }
.album-feature-iframe { display:block; width:100%; aspect-ratio:1/1; border:0; }
.music-note { text-align:center; margin-top:46px; font-family:var(--mono); font-size:.84rem; }
.music-note a { color:var(--blood); letter-spacing:.04em; }

/* ---------- LISTEN / PLATFORMS ---------- */
.listen { background:var(--steel-deep); }
.platforms { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.platform { display:flex; flex-direction:column; gap:4px; padding:26px 24px; border:1px solid var(--line); background:rgba(10,10,12,.3); position:relative; transition:background .25s, border-color .25s, transform .25s; }
.platform:hover { background:var(--blood); border-color:var(--blood); transform:translateY(-3px); }
.platform:hover .platform-note { color:rgba(255,255,255,.85); }
.platform:hover .platform-arrow { color:#fff; }
.platform-name { font-family:var(--display); font-weight:700; font-size:1.3rem; text-transform:uppercase; }
.platform-note { font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--bone-dim); text-transform:uppercase; }
.platform-arrow { position:absolute; top:22px; right:22px; width:20px; height:20px; color:var(--bone-dim); transition:color .25s; }

/* ---------- VIDEO (YouTube) ---------- */
.videos { background:var(--void); }
.yt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.yt-card { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); cursor:pointer; background:#000; }
.yt-poster { width:100%; height:100%; object-fit:cover; transition:transform .6s, opacity .3s; }
.yt-card:hover .yt-poster { transform:scale(1.05); opacity:.8; }
.yt-cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px 18px 16px; background:linear-gradient(transparent, rgba(10,10,12,.9)); pointer-events:none; }
.yt-cap b { font-family:var(--display); font-weight:700; font-size:.96rem; text-transform:uppercase; display:block; }
.yt-cap span { font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--bone-dim); }
.yt-card.is-playing .yt-poster, .yt-card.is-playing .yt-play, .yt-card.is-playing .yt-cap { display:none; }
.yt-card iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- REELS ---------- */
.reels { background:var(--void-2); overflow:hidden; }
.reels .section-head { padding:0 var(--pad-x); }
.reels-swiper { width:100%; max-width:100vw; padding:0 var(--pad-x) 64px!important; overflow:visible!important; }
.reel-card { width:268px; height:476px; position:relative; overflow:hidden; border:1px solid var(--line); background:#000; cursor:pointer; }
.reel-card video { width:100%; height:100%; object-fit:cover; display:block; }
.reel-card video:fullscreen, .reel-card video:-webkit-full-screen { object-fit:contain; background:#000; }
.reel-cap { position:absolute; left:0; right:0; bottom:0; padding:30px 16px 16px; background:linear-gradient(transparent, rgba(10,10,12,.85)); pointer-events:none; z-index:2; }
.reel-cap b { font-family:var(--display); font-weight:700; font-size:.92rem; text-transform:uppercase; display:block; }
.reel-cap span { font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--bone-dim); }
.video-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:64px; height:64px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85); background:rgba(10,10,12,.35); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(8px); transition:transform .3s, background .25s, border-color .25s; }
.video-play svg { width:26px; height:26px; margin-left:3px; }
.reel-card:hover .video-play { background:var(--blood); border-color:var(--blood); transform:translate(-50%,-50%) scale(1.08); }
.video-play.is-hidden { opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.8); }

/* ---------- BANDS ---------- */
.bands { background:var(--void); }
.bands-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.band-card { display:block; padding:32px 30px; border:1px solid var(--line); background:var(--panel); transition:border-color .3s, transform .3s, background .3s; position:relative; }
.band-card:hover { border-color:var(--blood); transform:translateY(-4px); background:var(--panel-2); }
.band-top { display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.band-card h3 { font-size:clamp(1.5rem,2.6vw,2.1rem); }
.band-years { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--bone-dim); white-space:nowrap; }
.band-role { display:inline-block; margin:12px 0 14px; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blood); border:1px solid var(--blood); padding:5px 11px; }
.band-card p { margin:0 0 18px; color:var(--bone-dim); font-size:.97rem; }
.band-go { font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--bone-dim); text-transform:uppercase; }
.band-card:hover .band-go { color:var(--blood); }

/* ---------- CONCERT ---------- */
.concert { position:relative; overflow:hidden; isolation:isolate; text-align:center; }
.concert-bg { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; filter:grayscale(.3) brightness(.5); }
.concert::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,10,12,.78), rgba(10,10,12,.6)); }
.concert-inner { max-width:760px; }
.concert h2 { font-size:clamp(2.6rem,8vw,6rem); }
.concert-lead { color:var(--bone); font-size:1.1rem; max-width:620px; margin:0 auto 2.2em; }
.concert-facts { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:0 auto 2.6em; max-width:680px; }
.concert-facts li { background:rgba(10,10,12,.55); padding:18px 12px; display:flex; flex-direction:column; gap:6px; }
.concert-facts span { font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); }
.concert-facts b { font-family:var(--display); font-weight:700; font-size:.96rem; text-transform:uppercase; }
.concert-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- GALLERY ---------- */
.gallery { background:var(--void-2); overflow:hidden; }
.gallery .section-head { padding:0 var(--pad-x); }
.gallery-swiper { width:100%; max-width:100vw; padding:0 var(--pad-x) 64px!important; overflow:visible!important; }
.gallery-swiper .swiper-slide { width:330px; height:430px; overflow:hidden; border:1px solid var(--line); cursor:pointer; background:var(--panel); }
.gallery-swiper .swiper-slide a, .gallery-swiper .swiper-slide img { display:block; width:100%; height:100%; }
.gallery-swiper .swiper-slide img { object-fit:cover; filter:grayscale(.12) contrast(1.03); transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .4s; }
.gallery-swiper .swiper-slide:hover img { transform:scale(1.06); filter:grayscale(0); }

/* ---------- WORDS / QUOTES ---------- */
.words { background:var(--blood); color:#fff; }
.words-swiper { max-width:900px; margin:0 auto; padding-bottom:54px!important; }
.word-slide { font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.6rem,3.6vw,2.7rem); line-height:1.28; text-align:center; color:#fff; height:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.word-slide cite { display:block; margin-top:18px; font-family:var(--mono); font-style:normal; font-size:.8rem; letter-spacing:.08em; color:rgba(255,255,255,.7); text-transform:uppercase; }

/* ---------- FAQ ---------- */
.faq { background:var(--void); }
.faq-list { max-width:880px; margin:0 auto; }
.faq-list details { border-bottom:1px solid var(--line); transition:border-color .25s; }
.faq-list details[open] { border-color:var(--blood); }
.faq-list summary { padding:26px 0; cursor:pointer; font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,1.9vw,1.4rem); text-transform:uppercase; color:var(--bone); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; transition:color .25s; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; font-family:var(--mono); font-weight:400; font-size:1.7rem; color:var(--blood); transition:transform .35s; flex-shrink:0; line-height:1; }
.faq-list details[open] summary { color:var(--blood); }
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-list details p { padding:0 0 26px; margin:0; color:var(--bone-dim); font-size:1.02rem; max-width:70ch; }
.faq-list a { color:var(--blood); border-bottom:1px solid currentColor; }
.faq-link { background:none; border:0; padding:0; font:inherit; color:var(--blood); border-bottom:1px solid currentColor; cursor:pointer; }

/* ---------- CONTACT ---------- */
.contact { background:var(--steel-deep); }
.contact-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center; }
.contact-text h2 { font-size:clamp(2.4rem,6vw,4.4rem); }
.contact-links { display:flex; flex-direction:column; }
.contact-links a { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:20px 0; border-top:1px solid var(--line); font-family:var(--display); font-weight:700; font-size:clamp(1.1rem,2vw,1.6rem); text-transform:uppercase; transition:color .25s, padding-left .25s; }
.contact-links a:last-child { border-bottom:1px solid var(--line); }
.contact-links a span { font-family:var(--mono); font-size:.72rem; font-weight:400; letter-spacing:.04em; color:var(--bone-dim); text-transform:lowercase; }
.contact-links a:hover { color:var(--blood); padding-left:10px; }

/* ---------- FOOTER ---------- */
.site-footer { background:var(--void-2); border-top:1px solid var(--line); padding:72px 0 36px; font-size:.92rem; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:46px; padding-bottom:44px; border-bottom:1px solid var(--line); }
.footer-brand .logo { margin-bottom:16px; }
.footer-brand .logo-text { font-size:.9rem; }
.footer-brand p { color:var(--bone-dim); max-width:30ch; }
.footer-grid h5 { font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--bone-dim); margin-bottom:14px; font-weight:500; }
.footer-grid p { margin-bottom:.5em; }
.footer-grid a { color:var(--bone); }
.footer-grid a:hover { color:var(--blood); }
.footer-seo { padding:42px 0; border-bottom:1px solid var(--line); }
.footer-seo h4 { font-size:1.2rem; margin-bottom:16px; color:var(--bone); }
.footer-seo p { color:var(--mute); font-size:.86rem; line-height:1.8; max-width:1080px; }
.footer-seo strong { color:var(--bone-dim); font-weight:500; }
.footer-bottom { padding-top:30px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--bone-dim); text-transform:uppercase; }
.footer-bottom p { margin:0; color:inherit; }
.footer-credit { display:inline-flex; align-items:center; gap:7px; }
.footer-credit svg { width:13px; height:13px; color:var(--blood); flex-shrink:0; }
.footer-credit a { border-bottom:1px solid var(--line-strong); transition:color .25s, border-color .25s; }
.footer-credit a:hover { color:var(--blood); border-color:var(--blood); }

/* ---------- SCROLL TOP ---------- */
.scroll-top { position:fixed; bottom:24px; right:24px; width:52px; height:52px; background:var(--blood); color:#fff; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:90; opacity:0; pointer-events:none; transform:translateY(18px); transition:opacity .35s, transform .35s, background .25s; }
.scroll-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.scroll-top:hover { background:var(--blood-2); transform:translateY(-2px); }
.scroll-top svg { width:22px; height:22px; }

/* ---------- SWIPER ---------- */
.swiper-button-prev, .swiper-button-next { width:46px!important; height:46px!important; background:var(--panel); border:1px solid var(--line-strong); color:var(--bone)!important; margin-top:-23px!important; transition:background .25s, color .25s; }
.swiper-button-prev:hover, .swiper-button-next:hover { background:var(--blood); border-color:var(--blood); color:#fff!important; }
.swiper-button-prev::after, .swiper-button-next::after { font-size:1rem!important; font-weight:700; }
.swiper-pagination-bullet { background:var(--bone-dim)!important; opacity:.4!important; }
.swiper-pagination-bullet-active { background:var(--blood)!important; opacity:1!important; width:24px!important; border-radius:0!important; }

/* ---------- FANCYBOX ---------- */
.fancybox-bg { background:rgba(8,8,10,.96)!important; }
.fancybox-skin { background:var(--void)!important; }

/* ---------- CONTACT MODAL ---------- */
.contact-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s; }
.contact-modal.is-open { opacity:1; pointer-events:auto; }
.contact-overlay { position:absolute; inset:0; background:rgba(6,6,8,.86); backdrop-filter:blur(6px); }
.contact-dialog { position:relative; width:100%; max-width:460px; background:var(--panel); border:1px solid var(--line-strong); padding:40px 38px; max-height:92vh; overflow-y:auto; transform:translateY(16px) scale(.98); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.contact-modal.is-open .contact-dialog { transform:none; }
.contact-close { position:absolute; top:14px; right:14px; width:38px; height:38px; background:none; border:0; color:var(--bone-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .2s; }
.contact-close:hover { color:var(--blood); }
.contact-close svg { width:22px; height:22px; }
.contact-form-wrap h3 { font-size:1.6rem; margin-bottom:.5em; }
.contact-form-wrap h3 em { font-family:var(--serif); font-style:italic; text-transform:none; color:var(--blood); font-weight:600; }
.contact-modal-lead { font-size:.92rem; color:var(--bone-dim); margin-bottom:22px; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:15px; }
.field-label { font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); }
.field-label em { color:var(--blood); font-style:normal; }
.field input, .field textarea { width:100%; font-family:var(--sans); font-size:1rem; color:var(--bone); background:var(--void); border:1px solid var(--line-strong); padding:13px 15px; transition:border-color .25s, box-shadow .25s; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--blood); box-shadow:0 0 0 3px rgba(229,64,42,.18); }
.field textarea { resize:vertical; min-height:64px; line-height:1.5; }
.contact-error { font-size:.88rem; color:var(--blood-2); line-height:1.4; margin-bottom:8px; }
.contact-error:empty { display:none; }
.contact-submit { width:100%; position:relative; }
.contact-submit.is-loading .contact-submit-label { opacity:0; }
.contact-submit-spinner { position:absolute; top:50%; left:50%; width:20px; height:20px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; transform:translate(-50%,-50%); opacity:0; animation:spin .8s linear infinite; }
.contact-submit.is-loading .contact-submit-spinner { opacity:1; }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.contact-success { text-align:center; padding:20px 4px; }
.contact-success-icon { width:62px; height:62px; margin:0 auto 18px; border-radius:50%; background:var(--blood); color:#fff; display:flex; align-items:center; justify-content:center; }
.contact-success-icon svg { width:30px; height:30px; }
.contact-success h3 { font-size:1.6rem; margin-bottom:.4em; }
.contact-success p { color:var(--bone-dim); margin-bottom:20px; }

body.modal-open, body.nav-open { overflow:hidden; }

/* ---------- REVEAL ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* =========================================================================
   RESPONSIVE — single breakpoint 860px
   ========================================================================= */
@media (max-width:860px) {
  :root { --pad-x:20px; }
  .nav { display:none; }
  .nav.open {
    display:flex; position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
    width:100vw; height:calc(100dvh - var(--header-h)); transform:none;
    flex-direction:column; align-items:center; justify-content:flex-start;
    background:var(--void); padding:38px 24px; gap:8px; overflow-y:auto; z-index:90;
    animation:navIn .35s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes navIn { from{opacity:0; transform:translateY(-12px)} to{opacity:1; transform:translateY(0)} }
  .nav.open > a { font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--bone); padding:10px 0; }
  .nav-indicator { display:none; }
  .burger { display:flex; }
  .header-cta { display:none; }
  .nav.open .nav-footer { display:flex; flex-direction:column; align-items:center; gap:20px; margin-top:24px; width:100%; max-width:300px; }
  .nav.open .nav-footer .nav-cta { width:100%; }
  .nav.open .nav-footer-link { display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--mono); font-size:.8rem; color:var(--bone-dim); }
  .nav.open .nav-footer-link svg { width:24px; height:24px; color:var(--blood); }

  .hero { min-height:100svh; padding:100px 0 52px; gap:18px; }
  .hero-foot { margin-top:0; }
  .word { height:clamp(120px,34vw,300px); }
  .grid { grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(10,1fr); }
  .hero-scroll { display:none; }
  .hero-meta { gap:22px; }

  .album-feature { grid-template-columns:1fr; gap:28px; }
  .album-feature-art { max-width:360px; }
  .album-feature-art.is-playing .album-feature-iframe { aspect-ratio:1/1; height:auto; }
  .album-grid { grid-template-columns:repeat(2,1fr); }
  .platforms { grid-template-columns:1fr; }
  .yt-grid { grid-template-columns:1fr; }
  .bands-grid { grid-template-columns:1fr; }
  .concert-facts { grid-template-columns:repeat(2,1fr); }
  .contact-inner { grid-template-columns:1fr; gap:34px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:30px; }
  .footer-bottom { flex-direction:column; gap:8px; }

  .tl-item { grid-template-columns:74px 1fr; gap:18px; padding-left:30px; }
  .tl-media img { height:200px; }
  .swiper-button-prev, .swiper-button-next { display:none!important; }
  .gallery-swiper .swiper-slide { width:78vw; height:400px; }
  .reel-card { width:64vw; height:420px; }
  .contact-dialog { padding:34px 24px; }
}

@media (max-width:520px) {
  .album-grid { grid-template-columns:1fr 1fr; }
  .word { height:clamp(108px,42vw,220px); }
  .btn-lg { padding:16px 26px; }
  .hero-cta .btn, .concert-cta .btn { flex:1 1 auto; }
}