/* ============================================================
   ezcodylee — XEROX PUNK ZINE
   Mockup design system. Always-dark by brand intent.
   ink #0A0A0A / paper #F2EFE6 / blood #E01B1B
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,video{max-width:100%;display:block}
button,input{font:inherit;color:inherit}

:root{
  color-scheme:dark;

  --ink:#0A0A0A;
  --ink-2:#141412;
  --ink-3:#1C1B18;
  --paper:#F2EFE6;
  --paper-mute:#F2EFE6;      /* was grey; all secondary text now white */
  --blood:#440404;           /* matches the red in the video */
  --blood-deep:#440404;
  --rule:rgba(242,239,230,.20);
  --rule-hi:rgba(242,239,230,.55);

  --display:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  --cond:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  --body:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;

  --maxw:1280px;
  --gut:20px;
  --hdr:64px;
  --t:150ms;

  --z-grain:60;
  --z-hdr:50;
  --z-menu:40;
}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- photocopy grain ---------- */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:var(--z-grain);
  pointer-events:none;
  opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared bits ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:100;
  background:var(--blood-deep);color:var(--paper);
  padding:10px 16px;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
}
.skip:focus{top:10px}

a{color:inherit}
:focus-visible{outline:3px solid var(--blood);outline-offset:3px}

.stamp{
  font-family:var(--cond);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--paper-mute);
}
.stamp--blood{color:var(--blood)}

.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;
  font-family:var(--cond);font-weight:700;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.09em;
  text-decoration:none;cursor:pointer;
  border:2px solid var(--paper);border-radius:0;
  background:transparent;color:var(--paper);
  transition:background var(--t) linear,color var(--t) linear,border-color var(--t) linear;
}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn--blood{background:var(--blood-deep);border-color:var(--blood-deep);color:var(--paper)}
.btn--blood:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn--sm{min-height:44px;padding:0 16px;font-size:.92rem}
.btn--block{display:flex;width:100%}

/* ---------- header + dropdown ---------- */
.hdr{
  position:sticky;top:0;z-index:var(--z-hdr);
  background:var(--ink);
  border-bottom:1px solid var(--rule-hi);
}
.hdr__in{
  height:var(--hdr);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  font-family:var(--display);font-size:2.1rem;line-height:1;letter-spacing:-.01em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.brand span{color:var(--blood)}

.nav{display:flex;align-items:center;gap:6px}
.nav__link{
  display:none;
  font-family:var(--cond);font-weight:700;font-size:1rem;
  text-transform:uppercase;letter-spacing:.1em;text-decoration:none;
  padding:10px 14px;min-height:44px;line-height:1.6;
  transition:color var(--t) linear;
}
.nav__link:hover{color:var(--blood)}
.nav__link[aria-current="page"]{color:var(--blood)}
@media(min-width:720px){.nav__link{display:inline-flex;align-items:center}}

/* the dropdown */
.menu{position:relative}
.menu__btn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:0 16px;cursor:pointer;
  background:transparent;border:2px solid var(--paper);
  font-family:var(--cond);font-weight:700;font-size:1rem;
  text-transform:uppercase;letter-spacing:.1em;
  transition:background var(--t) linear,color var(--t) linear;
}
.menu__btn:hover,.menu__btn[aria-expanded="true"]{background:var(--paper);color:var(--ink)}
.menu__caret{transition:transform var(--t) linear}
.menu__btn[aria-expanded="true"] .menu__caret{transform:rotate(180deg)}

.menu__list{
  position:absolute;right:0;top:calc(100% + 10px);
  z-index:var(--z-menu);
  min-width:264px;
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:10px 10px 0 var(--blood-deep);
  padding:6px;
  display:none;
}
.menu__list[data-open="true"]{display:block}
.menu__item a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 14px;min-height:48px;
  text-decoration:none;
  font-family:var(--cond);font-weight:700;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.06em;
  transition:background var(--t) linear,color var(--t) linear;
}
.menu__item a:hover,.menu__item a:focus-visible{background:var(--ink);color:var(--paper)}
.menu__num{font-size:.78rem;letter-spacing:.2em;opacity:.55}
.menu__item a:hover .menu__num{opacity:.75}
.menu__sep{height:2px;background:var(--ink);margin:6px 8px;opacity:.15}
.menu__foot{
  padding:12px 14px 10px;
  font-family:var(--cond);font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.6;
}

/* ---------- marquee ---------- */
.ticker{
  background:var(--blood-deep);color:var(--paper);
  border-block:2px solid var(--ink);
  overflow:hidden;white-space:nowrap;
  padding:9px 0;
}
.ticker__track{display:inline-flex;gap:32px;animation:slide 18s linear infinite;will-change:transform}
.ticker span{
  font-family:var(--display);font-size:1.5rem;line-height:1;
  text-transform:uppercase;letter-spacing:.06em;
}
.ticker--top{border-top:0}

/* ---------- video hero ---------- */
.vhero{position:relative;height:calc(100svh - var(--hdr) - 46px);min-height:420px;overflow:hidden;background:var(--ink)}
.vhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* phones: show the whole frame so the name in the video isn't cropped */
@media(max-width:700px){
  .vhero{height:clamp(260px,62vw,420px);min-height:0}
  .vhero video{object-fit:contain}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- two-release grid ---------- */
.two{display:grid;gap:clamp(18px,3vw,36px)}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}
.two iframe{width:100%;height:352px;border:0;display:block;border-radius:12px;background:var(--ink);color-scheme:dark;filter:grayscale(1) contrast(1.15)}
.two__hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.two__name{font-family:var(--display);font-size:1.8rem;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.two__tag{font-family:var(--cond);font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mute)}

/* ---------- media links ---------- */
.links{display:grid;gap:14px;border-top:2px solid var(--rule-hi)}
.links a{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:26px 2px;border-bottom:1px solid var(--rule);text-decoration:none;
  font-family:var(--display);font-size:clamp(2.2rem,7vw,4.6rem);line-height:1;
  text-transform:uppercase;transition:color var(--t) linear;
}
.links a:hover{color:var(--blood)}
.links a svg{flex:none;width:clamp(28px,4vw,48px);height:auto}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(40px,7vw,84px) 0 0;overflow:hidden}
.hero__grid{display:grid;gap:clamp(24px,4vw,48px);align-items:end}
@media(min-width:960px){.hero__grid{grid-template-columns:1.15fr .85fr}}

.hero__kicker{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:18px}
.hero__title{
  font-family:var(--display);
  font-size:clamp(3.6rem,15vw,11rem);
  line-height:.82;letter-spacing:-.045em;
  text-transform:uppercase;
}
.hero__title em{font-style:normal;color:var(--blood);display:block}
.hero__meta{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 20px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:.92rem;color:var(--paper-mute);
}
.hero__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- media drop slot ---------- */
.slot{
  position:relative;
  background:var(--ink-2);
  border:2px dashed var(--rule-hi);
  display:grid;place-items:center;
  text-align:center;padding:24px;
  overflow:hidden;
}
.slot::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--paper) 1px,transparent 1.35px);
  background-size:5px 5px;
  opacity:.14;
}
.slot__label{
  position:relative;
  font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;font-size:.82rem;
  color:var(--paper-mute);
}
.slot__label b{display:block;color:var(--paper);font-size:1.05rem;letter-spacing:.12em;margin-bottom:6px}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.slot--sq{aspect-ratio:1/1}
.slot--wide{aspect-ratio:16/9}
.slot--port{aspect-ratio:3/4}
.slot--hero{aspect-ratio:4/5;transform:rotate(-1.4deg)}

.tape{
  position:absolute;z-index:2;
  width:110px;height:28px;
  background:rgba(242,239,230,.22);
  border-left:1px dashed rgba(10,10,10,.25);
  border-right:1px dashed rgba(10,10,10,.25);
}
.tape--tl{top:-12px;left:-18px;transform:rotate(-8deg)}
.tape--br{bottom:-12px;right:-18px;transform:rotate(-6deg)}

/* ---------- section scaffolding ---------- */
.sec{padding:clamp(48px,7vw,92px) 0;border-top:1px solid var(--rule)}
.sec__hd{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px 24px;margin-bottom:clamp(24px,3vw,38px);
}
.sec__title{
  font-family:var(--display);
  font-size:clamp(2rem,6vw,4.2rem);
  line-height:.9;letter-spacing:-.035em;text-transform:uppercase;
}
.sec__note{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:.8rem;color:var(--paper-mute);
}
.sec__note--flag{color:var(--blood);border:1px solid var(--blood);padding:5px 10px}

.lead{max-width:62ch;color:var(--paper-mute);font-size:1.05rem}

/* ---------- release block ---------- */
.release{display:grid;gap:clamp(22px,4vw,44px)}
@media(min-width:860px){.release{grid-template-columns:minmax(0,420px) 1fr;align-items:start}}
.release__art{position:relative}
.dsp{display:grid;gap:10px;margin-top:22px}
@media(min-width:520px){.dsp{grid-template-columns:1fr 1fr}}
.dsp a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;padding:0 18px;text-decoration:none;
  border:2px solid var(--rule-hi);
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  transition:background var(--t) linear,color var(--t) linear,border-color var(--t) linear;
}
.dsp a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dsp svg{flex:none}

.tracklist{margin-top:26px;border-top:1px solid var(--rule)}
.tracklist li{
  display:flex;gap:16px;align-items:baseline;
  padding:11px 2px;border-bottom:1px solid var(--rule);
  font-family:var(--cond);font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em;
}
.tracklist li span:first-child{color:var(--blood);font-size:.85rem;letter-spacing:.14em;min-width:28px}

/* ---------- discography grid ---------- */
.disco{display:grid;gap:clamp(16px,2.4vw,28px);grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.disco{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.disco{grid-template-columns:repeat(4,1fr)}}
.rel{text-decoration:none;display:block;cursor:pointer}
.rel__art{position:relative;margin-bottom:12px;transition:transform var(--t) linear}
.rel:hover .rel__art{transform:rotate(-1.5deg)}
.rel__name{
  font-family:var(--cond);font-weight:700;font-size:1.22rem;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.15;
  transition:color var(--t) linear;
}
.rel:hover .rel__name{color:var(--blood)}
.rel__yr{font-family:var(--cond);font-size:.82rem;letter-spacing:.18em;color:var(--paper-mute)}

/* ---------- tour ---------- */
.dates{border-top:2px solid var(--rule-hi)}
.date{
  display:grid;gap:6px 22px;align-items:center;
  padding:20px 2px;border-bottom:1px solid var(--rule);
  transition:background var(--t) linear;
}
@media(min-width:820px){
  .date{grid-template-columns:140px 1fr 200px auto;padding-inline:14px;margin-inline:-14px}
}
.date:hover{background:var(--ink-2)}
.date--past{opacity:.45}
.date__when{
  font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--blood);
}
.date__city{font-family:var(--cond);font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
.date__venue{font-family:var(--cond);font-size:1rem;text-transform:uppercase;letter-spacing:.12em;color:var(--paper-mute)}
.date__act{justify-self:start}
@media(min-width:820px){.date__act{justify-self:end}}
.sold{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.85rem;color:var(--paper-mute);border:2px solid var(--rule);padding:11px 16px;display:inline-block;
}

/* ---------- merch ---------- */
.shop{display:grid;gap:clamp(18px,2.6vw,32px);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.shop{grid-template-columns:repeat(3,1fr)}}
.prod{text-decoration:none;display:block;cursor:pointer}
.prod__art{position:relative;margin-bottom:14px;transition:transform var(--t) linear}
.prod:hover .prod__art{transform:translate(-3px,-3px)}
.prod__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.prod__name{font-family:var(--cond);font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:.04em}
.prod__price{font-family:var(--display);font-size:1rem;color:var(--blood)}
.prod__sizes{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.prod__sizes span{
  font-family:var(--cond);font-size:.8rem;letter-spacing:.12em;
  border:1px solid var(--rule-hi);padding:3px 8px;color:var(--paper-mute);
}

/* ---------- media gallery ---------- */
.gal{display:grid;gap:clamp(14px,2vw,24px);grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal--vid{grid-template-columns:1fr}
@media(min-width:820px){.gal--vid{grid-template-columns:repeat(2,1fr)}}
.shot{position:relative}
.shot figcaption{
  margin-top:10px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:.82rem;color:var(--paper-mute);
}

/* updates page: photo + form same height */
.release--eq{align-items:stretch}
.release--eq .slot{aspect-ratio:auto;height:100%;min-height:420px;border:2px solid var(--paper);background:var(--ink)}
.release--eq .slot::before{display:none}

/* ---------- newsletter ---------- */
.crew{
  border:2px solid var(--paper);
  padding:clamp(24px,4vw,52px);
  position:relative;
  background:var(--ink-2);
}
.crew__title{
  font-family:var(--display);
  font-size:clamp(2rem,7vw,4.6rem);line-height:.88;letter-spacing:-.04em;
  text-transform:uppercase;
}
.crew__title em{font-style:normal;color:var(--blood)}
.form{margin-top:26px;max-width:620px}
.field{margin-bottom:16px}
.field label{
  display:block;margin-bottom:7px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;
}
.field input{
  width:100%;min-height:54px;padding:0 16px;
  background:var(--ink);color:var(--paper);
  border:2px solid var(--rule-hi);border-radius:0;
  font-family:var(--cond);font-size:1.15rem;letter-spacing:.04em;
  transition:border-color var(--t) linear;
}
.field input::placeholder{color:#6E6C66}
.field input:focus{border-color:var(--blood)}
.field input[aria-invalid="true"]{border-color:var(--blood)}
.err{
  display:none;margin-top:7px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.85rem;color:var(--blood);
}
.err[data-show="true"]{display:block}
.fineprint{margin-top:14px;font-size:.88rem;color:var(--paper-mute);max-width:52ch}
.done{
  display:none;border:2px solid var(--blood);padding:20px;margin-top:22px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
}
.done[data-show="true"]{display:block}
.done b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--blood);margin-bottom:6px;letter-spacing:-.02em}

/* ---------- footer ---------- */
.ftr{border-top:2px solid var(--rule-hi);padding:48px 0 34px;margin-top:20px}
.ftr__grid{display:grid;gap:32px}
@media(min-width:760px){.ftr__grid{grid-template-columns:1fr auto}}
.ftr__mark{font-family:var(--display);font-size:clamp(2.4rem,9vw,5rem);line-height:.85;letter-spacing:-.045em;text-transform:uppercase}
.ftr__mark span{color:var(--blood)}
.social{display:flex;flex-wrap:wrap;gap:8px}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:2px solid var(--rule-hi);
  transition:background var(--t) linear,color var(--t) linear,border-color var(--t) linear;
}
.social a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.social a svg{width:22px;height:22px}
.ftr__legal{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.02em;font-size:.85rem;color:var(--paper);
}

/* ---------- interior page head ---------- */
.phead{padding:clamp(34px,5vw,62px) 0 0}
.phead__title{
  font-family:var(--display);
  font-size:clamp(2rem,6vw,4.2rem);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;
}
.phead__title em{font-style:normal;color:var(--blood);display:block}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker__track{animation:none}
  .slot--hero,.tape{transform:none}
}

/* ---------- press / read about ---------- */
.press{display:grid;gap:14px;border-top:2px solid var(--rule-hi)}
.press__item{
  display:grid;gap:4px 24px;align-items:center;
  padding:26px 2px;border-bottom:1px solid var(--rule);text-decoration:none;
  transition:color var(--t) linear;
}
@media(min-width:760px){
  .press__item{grid-template-columns:1fr auto;grid-template-areas:"pub go" "title go"}
  .press__pub{grid-area:pub}.press__title{grid-area:title}.press__go{grid-area:go}
}
.press__pub{font-family:var(--cond);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mute)}
.press__title{font-family:var(--display);font-size:clamp(1.8rem,5vw,3.4rem);line-height:1;text-transform:uppercase}
.press__go{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.3rem;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.press__go svg{width:28px;height:28px}
.press__item:hover .press__title,.press__item:hover .press__go{color:var(--blood)}

/* ---------- splatter behind the updates heading ---------- */
.phead--splat{position:relative;overflow-x:clip}
.phead--splat::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:0;top:-30%;width:min(100%,1100px);height:170%;
  background:url("img/splatter.png?v=2") center/contain no-repeat;
  opacity:.9;
}
.phead--splat .wrap{position:relative;z-index:1}