/* =====================================================================
   CELERY WOLF — hand-drawn zine / DIY punk
   paper background, marker headlines, scrappy rotated cards
   ===================================================================== */
:root{
  --paper:#f4f0e6;          /* warm paper */
  --paper2:#ece6d6;         /* slightly darker paper band */
  --ink:#1c1a17;            /* marker black */
  --celery:#6f8f3f;         /* celery green */
  --celery-dk:#566f2f;
  --wolf:#8c8d87;           /* wolf grey */
  --line:#1c1a17;
}

*{box-sizing:border-box}
/* scroll-padding-top offsets anchor jumps by the sticky nav's height (+ a little
   breathing room) so section headings don't hide under the header. --nav-h is set
   by releases.js and updates on resize/wrap. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h, 80px) + 14px)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Shantell Sans","Comic Sans MS",cursive,sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.55;
  /* faint paper speckle */
  background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size:5px 5px;
}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------- headings: marker ---------- */
h1,h2,h3,.btn,.nav__brand span{
  font-family:"Permanent Marker","Shantell Sans",cursive;
  font-weight:400;
  letter-spacing:.5px;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  padding:.6rem 1.2rem;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.nav__brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-size:1.3rem}
.nav__logo{width:42px;height:42px;object-fit:contain;transform:rotate(-6deg)}
.nav__links{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.nav__links a{text-decoration:none;font-weight:800}
.nav__links a:not(.nav__cta):hover{color:var(--celery-dk)}
.nav__cta{
  background:var(--ink);color:var(--paper);
  padding:.25rem .7rem;border-radius:3px;transform:rotate(-2deg);
  font-family:"Permanent Marker",cursive;
}
.nav__cta:hover{background:var(--celery-dk);color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);
  padding:.55rem 1.1rem;font-size:1.05rem;
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-1deg);
  transition:transform .08s ease, box-shadow .08s ease, background .15s;
}
.btn:hover{transform:rotate(-1deg) translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn--green{background:var(--celery);color:#fff;border-color:var(--ink)}
.btn--green:hover{background:var(--celery-dk)}
.btn--sm{font-size:.95rem;padding:.35rem .8rem;box-shadow:3px 3px 0 var(--ink)}
.btn--full{display:block;width:100%;text-align:center;transform:rotate(0);font-size:1.25rem;margin-top:.4rem}

/* ---------- hero (dark banner) ---------- */
.hero{
  text-align:center;
  padding:3rem 1.2rem 3.5rem;
  background:var(--ink);
  color:var(--paper);
  border-bottom:3px solid var(--ink);
}
.hero__logo{width:230px;margin:0 auto 1rem;transform:rotate(-3deg)}
.hero__title{font-size:clamp(3rem,12vw,6rem);margin:.2rem 0;line-height:.95;color:#fff}
.hero__tag{font-size:1.25rem;max-width:30ch;margin:.5rem auto 1.6rem;color:#e9e4d7}
.hero__btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero .btn{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 rgba(255,255,255,.85)}
.hero .btn:hover{box-shadow:2px 2px 0 rgba(255,255,255,.85)}
.hero .btn--green{background:var(--celery);color:#fff;border-color:#fff}
.hero .btn--green:hover{background:var(--celery-dk)}

/* ---------- sections ---------- */
.section{max-width:1000px;margin:0 auto;padding:3rem 1.2rem}
.section--paper{background:var(--paper2);max-width:none;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.section--paper > *{max-width:1000px;margin-left:auto;margin-right:auto}
.section__title{
  font-size:clamp(2.2rem,7vw,3.4rem);margin:0 0 .3rem;
  display:inline-block;
  border-bottom:5px solid var(--celery);
  transform:rotate(-1.5deg);
}
.section__sub{font-size:1.15rem;max-width:60ch;margin:.6rem 0 2rem}

/* ---------- release grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1.6rem;
}
.card{
  text-decoration:none;color:var(--ink);
  background:#fff;
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  display:flex;flex-direction:column;
  transition:transform .1s ease, box-shadow .1s ease;
}
.card:nth-child(2n){transform:rotate(1deg)}
.card:nth-child(3n){transform:rotate(-1.2deg)}
.card:hover{transform:rotate(0) translateY(-4px);box-shadow:8px 10px 0 var(--celery)}
.card--featured{border-width:4px}
.card__art{position:relative;border-bottom:3px solid var(--ink);background:var(--wolf)}
.card__art img{width:100%;aspect-ratio:1/1;object-fit:cover}
.card__tag{
  position:absolute;top:-12px;right:-10px;
  background:var(--celery);color:#fff;
  font-family:"Permanent Marker",cursive;
  font-size:.78rem;letter-spacing:.5px;
  padding:.12rem .5rem;border:2px solid var(--ink);
  transform:rotate(4deg);box-shadow:2px 2px 0 var(--ink);
}
.card__body{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.card__band{font-weight:800;color:var(--celery-dk);font-size:.85rem;text-transform:uppercase;letter-spacing:1px;margin:0}
.card__title{font-size:1.45rem;margin:.1rem 0;line-height:1}
.card__meta{font-size:.9rem;margin:0;color:#444}
.card__formats{font-size:.9rem;margin:.2rem 0 0;font-weight:600}
.card__note{font-size:.82rem;margin:.3rem 0 0;color:var(--celery-dk);font-weight:600}
.card__listen{margin-top:auto;padding-top:.6rem;font-weight:800;color:var(--ink)}
.card:hover .card__listen{color:var(--celery-dk)}

.bands-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:2rem;font-weight:600}

/* ---------- lathe ---------- */
.lathe{max-width:60ch}
.lathe p{margin:0 0 1rem}
.lathe a:not(.btn){color:var(--celery-dk);text-decoration:underline;font-weight:800}
.lathe a:not(.btn):hover{color:var(--ink)}
.lathe__specs{
  list-style:none;padding:1rem 1.2rem;margin:1.4rem 0;
  background:#fff;border:3px dashed var(--ink);
  transform:rotate(-.6deg);
}
.lathe__specs li{padding:.2rem 0;border-bottom:1px dashed rgba(0,0,0,.2)}
.lathe__specs li:last-child{border-bottom:0}
.lathe__specs b{color:var(--celery-dk)}

/* ---------- signup ---------- */
.signup{
  max-width:560px;background:#fff;
  border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);
  padding:1.6rem 1.4rem;transform:rotate(-.4deg);
}
.signup__row{margin-bottom:.8rem}
.signup__row--2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.signup__row--3{display:grid;grid-template-columns:2fr .6fr 1fr;gap:.8rem}
.signup label{display:block;font-weight:800;font-size:.95rem}
.signup input[type=email],
.signup input[type=text],
.signup input[type=tel]{
  width:100%;margin-top:.25rem;padding:.55rem .6rem;
  font-family:inherit;font-size:1rem;font-weight:500;
  border:2px solid var(--ink);background:var(--paper);
}
.signup input:focus{outline:none;border-color:var(--celery);background:#fff}
.signup__note{font-weight:800;margin:1.2rem 0 .5rem;color:var(--celery-dk)}
.check{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0;font-weight:500 !important;font-size:.9rem}
.check input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--celery)}
.signup__fine{font-size:.78rem;color:#555;line-height:1.4;margin:1rem 0 .4rem}
.signup__msg{margin:.8rem 0 0;font-weight:800;min-height:1.2em}
.signup__msg.is-ok{color:var(--celery-dk)}
.signup__msg.is-error{color:#b3261e}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- shows ---------- */
.shows-list{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:1.6rem}
.show{
  background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem;
}
.show:nth-child(even){transform:rotate(-.5deg)}
.show:nth-child(odd){transform:rotate(.4deg)}
.show__date{
  flex:0 0 auto;background:var(--ink);color:var(--paper);
  font-family:"Permanent Marker",cursive;font-size:1rem;line-height:1.15;
  padding:.45rem .65rem;transform:rotate(-2deg);white-space:nowrap;
}
.show__body{flex:1;min-width:0}
.show__band{font-weight:800;color:var(--celery-dk);font-size:.85rem;text-transform:uppercase;letter-spacing:1px;margin:0 0 .1rem}
.show__venue{font-size:1.5rem;margin:.05rem 0 .15rem;line-height:1}
.show__city{font-family:inherit;font-size:1rem;color:var(--celery-dk);font-weight:800}
.show__addr{font-size:.9rem;margin:0;color:#555}
.show__with{font-weight:800;margin:.3rem 0 0}
.show__info{font-size:.92rem;margin:.2rem 0 0;color:#333}
#shows .btn{margin-top:.4rem}

/* ---------- footer ---------- */
.footer{
  text-align:center;padding:2.5rem 1.2rem;
  background:var(--ink);color:var(--paper);
  border-top:3px solid var(--ink);
}
.footer__logo{width:90px;margin:0 auto .6rem;transform:rotate(4deg)}
.footer__name{font-family:"Permanent Marker",cursive;font-size:1.3rem;margin:.2rem 0;color:#fff}
.footer__links{font-weight:600;font-size:.95rem}
.footer__links a{text-decoration:none}
.footer__links a:hover{color:var(--celery)}

/* ---------- mobile ---------- */
@media (max-width:560px){
  body{font-size:17px}
  .nav__links{gap:.7rem;font-size:.95rem}
  .signup__row--3{grid-template-columns:1fr 1fr;}
  .signup__row--3 label:first-child{grid-column:1/-1}
  .signup{transform:none}
  .show{flex-direction:column;gap:.5rem}
}