@import url("../fonts/fonts.css");

/* ============================================================
   Rebunked Records — design tokens
   Colours lifted from the original Wix palette.
   ============================================================ */
:root {
  --orange:  #f67d2a;
  /* Same hue, darkened for use on white — brand orange is only 2.66:1
     against #fff, which fails AA even at large sizes. This is 5.1:1. */
  --orange-deep: #b4520c;
  --red:     #f74b4c;
  --amber:   #ff9700;
  --black:   #000000;
  --ink:     #0a0a0a;
  --dark:    #2b2b2b;
  /* Wix used #7d7d7d, which is only 4.1:1 on white — just under WCAG AA.
     Nudged one step darker for 5.3:1; visually near-identical. */
  --gray:    #6b6b6b;
  --mute:    #c7c7c7;
  --white:   #ffffff;

  --display: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --body:    "Barlow", "Helvetica Neue", Arial, sans-serif;

  --rail-w:  76px;
  --nav-h:   57px;
  --wrap:    1180px;

  --ease:    cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .085em;
  line-height: 1.18;
  margin: 0;
}

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

/* The social rail is fixed at left:20px and is 76px wide, so content
   must start at >= 116px. Between the rail breakpoint and the point
   where the natural gutter is wide enough on its own, pad both sides
   symmetrically so the content stays centred and never runs under it. */
@media (min-width: 1181px) {
  .wrap { padding-inline: calc(var(--rail-w) + 40px); }
}
@media (min-width: 1500px) {
  .wrap { padding-inline: 24px; }
}

/* Screen-reader only */
.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;
}

/* Visible focus for keyboard users */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; top: -100px; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--white); color: var(--black);
  padding: 12px 22px; border-radius: 0 0 6px 6px;
  font-family: var(--display); font-size: 13px;
  letter-spacing: .08em; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--black);
  min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: center;
  padding: 8px 16px;
}

.nav {
  display: flex;
  background: var(--white);
  border: 1px solid var(--black);
}
.nav a {
  display: block;
  padding: 11px 26px;
  font-family: var(--body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  background: transparent;
  border: 2px solid var(--black);
  transition: background .22s var(--ease), color .22s var(--ease);
  white-space: nowrap;
}
.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current="page"] {
  background: var(--black);
  color: var(--white);
}

/* ============================================================
   Fixed social rail (desktop)
   ============================================================ */
.rail {
  position: fixed;
  top: calc(var(--nav-h) + 20px);
  left: 20px;
  z-index: 55;
  width: var(--rail-w);
  background: var(--white);
  padding: 22px 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
}
.rail a {
  display: block; width: 38px; height: 38px;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.rail a:hover { transform: scale(1.14); }
.rail img { width: 38px; height: 38px; object-fit: contain; }

/* Mobile: rail collapses into a horizontal strip under the hero */
.rail-strip { display: none; }

@media (max-width: 1180px) {
  .rail { display: none; }
  .rail-strip {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 18px;
    background: var(--white);
    padding: 20px 18px;
  }
  .rail-strip a { width: 34px; height: 34px; }
  .rail-strip img { width: 34px; height: 34px; object-fit: contain; }
}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section { position: relative; padding: 84px 0; }
.section--dark  { background: var(--black); }
.section--panel { background: var(--dark); }
.section--light { background: var(--white); color: var(--gray); }
.section--tight { padding: 60px 0; }

.section--light h2,
.section--light h3 { color: var(--black); }

/* Red triangle divider (mirrors the Wix arrow motif) */
.tri {
  width: 105px; height: 78px;
  background: var(--red);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  margin: 0 auto;
}
.tri--up { clip-path: polygon(50% 0, 0 100%, 100% 100%); }

.eyebrow {
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 27px);
  letter-spacing: .085em;
  text-align: center;
  margin: 0 0 34px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: center;
  padding: 72px 0;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background: #111 url("../img/hero-bg.jpg") center / cover no-repeat;
  z-index: 0;
}
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .72);
}
.hero .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
}

.hero__title,
.hero__sub,
.hero__cta {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.18;
  margin: 0;
}
.hero__title {
  font-size: clamp(38px, 5.6vw, 66px);
  color: var(--orange);
  letter-spacing: .075em;
  margin-bottom: .3em;
}
.hero__sub {
  font-size: clamp(20px, 2.9vw, 35px);
  color: var(--white);
  letter-spacing: .055em;
  margin-bottom: .5em;
}
.hero__cta {
  font-size: clamp(28px, 4.2vw, 50px);
  color: var(--orange);
  letter-spacing: .075em;
}

/* Spotify player card */
.player {
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.player iframe {
  width: 100%;
  height: 520px;
  border: 0;
  border-radius: 12px;
}
@media (max-width: 900px) {
  .player iframe { height: 420px; }
}

.player__note {
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  margin: 12px 0 2px;
}
.player__note a { color: var(--orange); text-decoration: none; }
.player__note a:hover { text-decoration: underline; }

/* ============================================================
   Album blurb
   ============================================================ */
.blurb {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--gray);
  text-transform: uppercase;
}
.blurb p + p { margin-top: 1.35em; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 34px;
  border: 2px solid var(--orange);
  background: var(--orange);
  color: var(--black);
  cursor: pointer;
  transition: background .24s var(--ease), color .24s var(--ease),
              border-color .24s var(--ease), transform .18s var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: transparent;
  color: var(--orange);
  transform: translateY(-2px);
}
.btn--ghost {
  background: transparent; color: var(--white);
  border-color: rgba(255, 255, 255, .5);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--white); color: var(--black); border-color: var(--white);
}
.btn--dark {
  background: var(--black); color: var(--white); border-color: var(--black);
}
.btn--dark:hover, .btn--dark:focus-visible {
  background: transparent; color: var(--black);
}

.btn-row {
  display: flex; flex-wrap: wrap;
  gap: 14px; justify-content: center;
  margin-top: 30px;
}

/* ============================================================
   Donate
   ============================================================ */
.donate { text-align: center; }
.donate h2 {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.5;
  margin-bottom: 30px;
}
.donate__btn {
  display: inline-block;
  border: 0; background: none; padding: 0; cursor: pointer;
  transition: transform .18s var(--ease);
}
.donate__btn:hover { transform: translateY(-2px); }
.donate__btn img { width: 147px; height: auto; }

/* ============================================================
   Follow
   ============================================================ */
.follow { background: rgba(43, 43, 43, .8); }
.follow h2 {
  font-size: clamp(19px, 2.7vw, 27px);
  text-align: center;
  margin-bottom: 34px;
}
.follow__icons {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 34px;
}
.follow__icons a {
  display: block; width: 101px; height: 101px;
  transition: transform .22s var(--ease);
}
.follow__icons a:hover { transform: translateY(-6px) scale(1.05); }
.follow__icons img { width: 101px; height: 101px; object-fit: contain; }
@media (max-width: 560px) {
  .follow__icons { gap: 20px; }
  .follow__icons a, .follow__icons img { width: 76px; height: 76px; }
}

/* ============================================================
   Video
   ============================================================ */
.video-section { position: relative; overflow: hidden; }
.video-section__bg {
  position: absolute; inset: 0;
  background: #111 url("../img/hero-bg.jpg") center / cover no-repeat;
  opacity: .3;
  z-index: 0;
}
.video-section .wrap { position: relative; z-index: 1; }

/* Serve WebP to browsers that support it — no JS, no flash of the JPEG */
@supports (background-image: image-set(url("../img/hero-bg.webp") type("image/webp"))) {
  .hero__bg,
  .video-section__bg {
    background-image: image-set(url("../img/hero-bg.webp") type("image/webp"));
  }
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 5px solid var(--black);
  background: var(--black);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.video-frame iframe,
.video-frame button {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Click-to-load YouTube facade — keeps the page fast & cookie-free until play */
.video-frame button {
  padding: 0; cursor: pointer;
  background: #000 center / cover no-repeat;
  display: grid; place-items: center;
}
.video-frame button::after {
  content: "";
  width: 84px; height: 60px;
  background: rgba(0, 0, 0, .72);
  border-radius: 14px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  position: absolute;
  transition: background .2s var(--ease);
}
.video-frame button::before {
  content: "";
  position: absolute; z-index: 2;
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent #fff;
  margin-left: 6px;
}
.video-frame button:hover::after { background: var(--red); }

/* ============================================================
   Merch
   ============================================================ */
.merch-link {
  display: block;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.merch-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}
.merch-link img { width: 100%; }
.merch-link + .merch-link { margin-top: 32px; }

/* ============================================================
   About
   ============================================================ */
.about__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px; align-items: center;
}
@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; gap: 34px; }
}
.about h2 {
  font-size: clamp(28px, 4vw, 38px);
  margin-bottom: .35em;
}
.about h2 span {
  display: block;
  font-size: .58em;
  letter-spacing: .07em;
  margin-top: .45em;
}
.about p {
  font-size: 18px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.6;
}
.about p a { color: var(--orange); text-decoration: underline; }
.about__photo img { width: 100%; }

/* ============================================================
   Contact + signup
   ============================================================ */
.contact { text-align: center; }
.contact h2 {
  font-size: clamp(28px, 4vw, 38px);
  color: var(--gray) !important;
  margin-bottom: .5em;
}
.contact__mail {
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 46px;
}
.contact__mail a { color: var(--orange-deep); }

/* Any accent heading sitting on a white section */
.section--light .eyebrow--accent { color: var(--orange-deep); }

.contact__strip { width: 100%; margin: 0 0 46px; }
.contact__strip img { width: 100%; }

.signup {
  background: var(--black);
  padding: 34px 30px 30px;
  max-width: 862px;
  margin-inline: auto;
  text-align: left;
}
.signup h3 {
  font-family: var(--body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 20px;
  color: var(--white);
  margin-bottom: 18px;
}
.signup input[type="email"] {
  width: 100%; height: 44px;
  background: var(--black);
  border: 3px solid var(--white);
  color: var(--white);
  font-family: var(--body); font-weight: 300; font-size: 17px;
  padding: 0 18px;
  margin-bottom: 14px;
}
.signup input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.signup input[type="email"]:focus { outline: none; border-color: var(--orange); }
.signup button {
  width: 100%; height: 44px;
  background: var(--white); color: var(--dark);
  border: 0; cursor: pointer;
  font-family: var(--body); font-size: 17px;
  letter-spacing: .05em; text-transform: uppercase;
  transition: background .24s var(--ease), color .24s var(--ease);
}
.signup button:hover { background: var(--orange); color: var(--black); }
.signup__hp { position: absolute; left: -9999px; }
.signup__msg {
  margin-top: 14px; font-size: 17px; color: var(--orange);
}
.signup__msg[hidden] { display: none; }

.to-top { margin-top: 48px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--amber);
  color: var(--black);
  text-align: center;
  padding: 34px 20px;
}
.site-footer p {
  margin: 0;
  font-size: 20px;
  letter-spacing: .1em;
}

/* ============================================================
   Meetups page
   ============================================================ */
.meetup { text-align: center; }
.meetup__flyer {
  max-width: 640px;
  margin: 0 auto 38px;
  display: block;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.meetup h1 {
  font-size: clamp(26px, 4vw, 42px);
  color: var(--orange);
  margin-bottom: .5em;
}
.meetup__hit {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(18px, 2.5vw, 27px);
  letter-spacing: .06em;
  line-height: 1.35;
  margin: 56px 0 26px;
}
.meetup__hit em {
  color: var(--orange); font-style: normal;
}