/* Dead Cossacks
   Theme is locked dark: the band identity is bone on black and a light mode would erase it.
   Shape rule: everything is sharp (radius 0). The only round things are artwork, not UI.
   One accent for the whole page: --blood. */

:root{
  --ink:      #0C0B09;
  --ink-2:    #131110;
  --ink-3:    #1A1714;
  --bone:     #E8DFC9;
  --bone-70:  rgba(232,223,201,.70);
  --bone-46:  rgba(232,223,201,.46);
  --rule:     rgba(232,223,201,.13);
  --rule-2:   rgba(232,223,201,.26);
  --blood:    #C43B2B;

  --wrap: 1280px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --nav-h: 68px;
  --ease: cubic-bezier(.16,1,.3,1);

  --f-disp: "Wix Madefor Display", system-ui, sans-serif;
  --f-text: "Wix Madefor Text", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font:400 1.0625rem/1.65 var(--f-text);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto is load-bearing: the width/height attributes on every img are
   presentational hints, so a CSS width without it leaves the attribute height in place */
img,video{ max-width:100%; height:auto; display:block; }
h1,h2,p,figure,ol{ margin:0; }
ol{ padding:0; list-style:none; }
a{ color:inherit; }

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

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

/* anchors must clear the sticky nav */
#music,#band,#frames,#outro{ scroll-margin-top:var(--nav-h); }

.h2{
  font:800 clamp(1.85rem,3.4vw,2.9rem)/1.06 var(--f-disp);
  letter-spacing:-.025em;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:80;
  background:var(--bone); color:var(--ink); padding:.7rem 1.1rem; font-weight:500;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* No CSS film grain layer here on purpose. A fixed full-page mix-blend-mode
   overlay mis-composites whole sections in Chromium, and the artwork already
   carries its own grain, so the effect cost more than it bought. */

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:rgba(12,11,9,.72); backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--rule);
}
.nav__in{
  height:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
}
.nav__brand{ flex:none; line-height:0; }
.nav__brand img{ width:104px; height:auto; }
.nav__links{ display:flex; gap:clamp(1rem,2.4vw,2rem); margin-left:auto; }
.nav__links a{
  font:500 .8125rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-70); text-decoration:none; padding-block:.5rem;
  transition:color .25s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.lang{
  flex:none; margin-left:auto; background:none; color:var(--bone-70); cursor:pointer;
  border:1px solid var(--rule-2); padding:.42rem .6rem; border-radius:0;
  font:500 .75rem/1 var(--f-mono); letter-spacing:.1em;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.nav__links + .lang{ margin-left:0; }
.lang:hover{ color:var(--bone); border-color:var(--bone-46); }
.lang:active{ transform:translateY(1px); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  font:500 .8125rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  padding:1rem 2.1rem; text-decoration:none; border-radius:0; border:1px solid transparent;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .12s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--bone); color:var(--ink); }
.btn--solid:hover{ background:#fff; }
.btn--ghost{ border-color:var(--rule-2); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--bone); background:rgba(232,223,201,.06); }

/* ---------- 1. hero ---------- */
.hero{
  position:relative; min-height:calc(100dvh - var(--nav-h));
  display:flex; align-items:flex-end; overflow:hidden;
  padding:6rem 0 clamp(3rem,7vh,5.5rem);
}
.hero__media{ position:absolute; inset:0; }
.hero__video{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(12,11,9,.72) 34%, rgba(12,11,9,.18) 62%, rgba(12,11,9,.55) 100%),
    linear-gradient(to right, rgba(12,11,9,.82) 0%, rgba(12,11,9,.3) 46%, transparent 72%);
}
.hero__in{
  position:relative; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
}
.hero__wordmark{ width:clamp(200px,26vw,330px); height:auto; margin-bottom:clamp(1.5rem,3vh,2.4rem); }
.hero__title{
  font:800 clamp(2.3rem,5.4vw,4.3rem)/1.02 var(--f-disp);
  letter-spacing:-.035em; max-width:16ch;
}
.hero__sub{
  margin-top:1.15rem; max-width:44ch; color:var(--bone-70);
  font-size:clamp(1rem,1.2vw,1.15rem);
}
.hero .btn{ margin-top:clamp(1.75rem,3.5vh,2.6rem); }

/* ---------- 2. records ---------- */
.rec{ padding-block:clamp(4.5rem,11vh,8.5rem); }
.rec__grid{ display:grid; grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr); gap:clamp(2.5rem,5vw,5.5rem); align-items:start; }
.rec__stage{ position:sticky; top:calc(var(--nav-h) + 2.5rem); max-width:400px; }

/* the plate is keyed out of the crops, so the faces float straight on the page */
.rec__art{ position:relative; aspect-ratio:3/4; }
.rec__face{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transform:scale(1.03);
  transition:opacity .6s var(--ease), transform .9s var(--ease);
}
.rec__face.is-on{ opacity:1; transform:none; }

.player{ margin-top:1.6rem; }
.player__now{
  font:800 1.15rem/1.25 var(--f-disp); letter-spacing:-.015em; min-height:2.5rem;
}
.player__bar{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; flex-wrap:wrap; }
.pbtn{
  flex:none; width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--rule-2); color:var(--bone-70); border-radius:0; padding:0;
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .12s var(--ease);
}
.pbtn svg{ width:16px; height:16px; fill:currentColor; }
.pbtn:hover{ color:var(--bone); border-color:var(--bone-46); }
.pbtn:active{ transform:scale(.95); }
.pbtn--main{ width:52px; height:52px; background:var(--bone); border-color:var(--bone); color:var(--ink); }
.pbtn--main svg{ width:19px; height:19px; }
.pbtn--main:hover{ background:#fff; border-color:#fff; color:var(--ink); }
.ico-pause{ display:none; }
.player.is-playing .ico-play{ display:none; }
.player.is-playing .ico-pause{ display:block; }
.player.is-loading .pbtn--main{ animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.45; } }

.seek{
  flex:1 1 130px; min-width:110px; height:26px; margin:0; cursor:pointer;
  -webkit-appearance:none; appearance:none; background:transparent;
  --p:0%;
}
.seek::-webkit-slider-runnable-track{
  height:3px; background:linear-gradient(to right, var(--blood) var(--p), var(--rule-2) var(--p));
}
.seek::-moz-range-track{ height:3px; background:var(--rule-2); }
.seek::-moz-range-progress{ height:3px; background:var(--blood); }
.seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; margin-top:-4px;
  background:var(--bone); border:0; border-radius:0;
}
.seek::-moz-range-thumb{ width:11px; height:11px; background:var(--bone); border:0; border-radius:0; }
.player__time{ flex:none; font:400 .78rem/1 var(--f-mono); color:var(--bone-46); font-variant-numeric:tabular-nums; }
.player__note{ margin-top:.8rem; font-size:.85rem; color:var(--blood); }

.tracks{ margin-top:clamp(1.5rem,3vw,2.4rem); border-top:1px solid var(--rule); }
.track{
  width:100%; display:grid; grid-template-columns:auto 1fr auto auto; align-items:baseline;
  gap:clamp(.8rem,2vw,1.6rem); padding:clamp(1rem,2vw,1.35rem) 0;
  background:none; border:0; border-bottom:1px solid var(--rule); border-radius:0;
  color:inherit; text-align:left; cursor:pointer; font:inherit;
  transition:color .25s var(--ease), padding-left .3s var(--ease);
}
.track:hover{ padding-left:.7rem; }
.track__n{ font:400 .78rem/1 var(--f-mono); color:var(--bone-46); font-variant-numeric:tabular-nums; }
.track__t{ font:800 clamp(1.05rem,1.9vw,1.5rem)/1.2 var(--f-disp); letter-spacing:-.02em; }
.track__k{ font:400 .75rem/1 var(--f-mono); letter-spacing:.06em; color:var(--bone-46); }
.track__d{ font:400 .78rem/1 var(--f-mono); color:var(--bone-46); font-variant-numeric:tabular-nums; }
.track.is-cur{ padding-left:.7rem; box-shadow:inset 3px 0 0 var(--blood); }
.track.is-cur .track__n{ color:var(--blood); }
.track.is-cur .track__t{ color:var(--bone); }

/* ---------- 3. band ---------- */
.band{ padding-block:clamp(4rem,10vh,8rem); border-top:1px solid var(--rule); }
.band__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.band__text .lead{
  margin-top:1.6rem; font:800 clamp(1.25rem,2.2vw,1.75rem)/1.28 var(--f-disp); letter-spacing:-.02em;
}
.band__text p + p{ margin-top:1.1rem; }
.band__text p:not(.lead){ color:var(--bone-70); max-width:52ch; }
.band__art{ position:relative; }
/* the artwork runs past the container to the viewport edge */
.band__art img{ width:calc(100% + max(0px, (100vw - var(--wrap))/2 + var(--pad))); max-width:none; }

/* ---------- 4. frames ---------- */
.frames{ padding-block:clamp(4rem,10vh,8rem); border-top:1px solid var(--rule); }
.mosaic{
  margin-top:clamp(2rem,4vw,3.5rem);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.75rem,1.4vw,1.25rem);
}
.mosaic__cell{ position:relative; overflow:hidden; background:var(--ink-2); }
.mosaic__cell img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.mosaic__cell:hover img{ transform:scale(1.035); }
/* no aspect-ratio here: the cell has to stretch across both rows, and an
   aspect-ratio would pin its height and leave a hole under it */
.mosaic__cell--tall{ grid-row:span 2; }
.mosaic__cell--wide{ grid-column:span 2; aspect-ratio:2/1; }
.mosaic__cell:not(.mosaic__cell--tall):not(.mosaic__cell--wide){ aspect-ratio:1/1; }

/* ---------- 5. outro ---------- */
.outro{
  position:relative; min-height:clamp(430px,66vh,620px);
  display:grid; place-items:center; overflow:hidden; border-top:1px solid var(--rule);
}
.outro__media{ position:absolute; inset:0; }
.outro__video{ width:100%; height:100%; object-fit:cover; }
/* the badge loop already carries the logo, so the scrim only has to make type legible */
.outro__scrim{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 62% 58% at 50% 55%, rgba(12,11,9,.9) 22%, rgba(12,11,9,.62) 70%, rgba(12,11,9,.5) 100%);
}
.outro__in{ position:relative; text-align:center; padding:clamp(3rem,8vh,5rem) var(--pad); max-width:34ch; }
.outro__line{ font:800 clamp(1.5rem,3vw,2.4rem)/1.14 var(--f-disp); letter-spacing:-.025em; }
.outro .btn{ margin-top:2rem; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--rule); padding-block:2.2rem; }
.foot__in{ display:flex; flex-wrap:wrap; gap:.75rem 2rem; align-items:baseline; justify-content:space-between; }
.foot p{ font:400 .78rem/1.5 var(--f-mono); color:var(--bone-46); letter-spacing:.04em; }

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

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .rec__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .rec__stage{ position:static; max-width:420px; }
  .band__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .band__art img{ width:100%; }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__links + .lang{ margin-left:auto; }
  .nav__brand img{ width:92px; }
  .hero{ align-items:flex-end; padding-top:4rem; }
  .hero__title{ max-width:none; }
  .mosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mosaic__cell--wide{ grid-column:span 2; }
  .mosaic__cell--tall{ grid-row:span 1; aspect-ratio:3/4; }
  .track{ grid-template-columns:auto 1fr auto; row-gap:.3rem; }
  .track__k{ grid-column:2; }
  .track__d{ grid-column:3; grid-row:1; }
}
@media (max-width:480px){
  .mosaic{ grid-template-columns:1fr; }
  .mosaic__cell--wide,.mosaic__cell--tall{ grid-column:span 1; grid-row:span 1; }
  .mosaic__cell--wide{ aspect-ratio:2/1; }
}

/* ---------- reduced motion ---------- */
@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; }
  .mosaic__cell:hover img{ transform:none; }
}