/* Josh Holland site: shared brand stylesheet.
   Used by the home page (index.html) and Be Your Band (be-your-band/index.html).
   Change a colour, font or button here and both pages follow. */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap");

/* Brand tokens (approved 2026-09-25) */
:root {
  /* Green and warm white are set once, as red green blue numbers, so every glow and
     see-through line follows them. #00FF66 = 0 255 102, #F4F1E6 = 244 241 230. */
  --green-rgb: 0 255 102;
  --warm-white-rgb: 244 241 230;

  --bg: #0a0a0a;
  --green: rgb(var(--green-rgb));
  --warm-white: rgb(var(--warm-white-rgb));
  --pale-yellow: #F2E6A6;
  --body: #B4B2AB;

  /* Neutrals derived from the tokens above, no new hues */
  --surface: #111111;
  --line: rgb(var(--warm-white-rgb) / 0.14);
  --muted: rgb(var(--warm-white-rgb) / 0.55);
  --glow: rgb(var(--green-rgb) / 0.45);

  /* Headline font: change this one line to try another face */
  --font-headline: "Bebas Neue", "Oswald", "League Gothic", Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5.5vw, 88px);
  --max: 1280px;

  /* One corner style for the whole site: buttons, photos, video, panels */
  --radius: 12px;
}

/* Browser surfaces follow the brand */
::selection { background: var(--green); color: var(--bg); }
html { scrollbar-color: #3a3a38 var(--bg); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3a3a38; border-radius: var(--radius); border: 3px solid var(--bg); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }

.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  color: var(--warm-white);
  margin: 0;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Hierarchy: the hero name is the biggest type on each page; section headings are clearly smaller */
.section h2 { font-size: clamp(40px, 4.6vw, 66px); }
/* A plain supporting line under a heading, for sections that do not get a yellow subline */
.note { margin-top: 14px; max-width: 36em; font-size: clamp(16px, 1.25vw, 18px); color: var(--muted); }
.subline {
  color: var(--pale-yellow);
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 0.35em;
}
.lede { max-width: 32em; margin-top: 18px; font-size: clamp(16px, 1.3vw, 19px); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  text-decoration: none;
  border-radius: var(--radius);
  transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
/* Flat green by default. Only a button with .btn-glow glows (one per page at most). */
.btn-solid {
  background: var(--green);
  color: var(--bg);
  font-weight: 700;
  font-size: 19px;
  padding: 16px 40px;
}
.btn-solid:hover { transform: translateY(-1px); }
.btn-glow { box-shadow: 0 0 22px var(--glow), 0 0 60px rgb(var(--green-rgb) / 0.18); }
.btn-glow:hover { box-shadow: 0 0 30px rgb(var(--green-rgb) / 0.65), 0 0 80px rgb(var(--green-rgb) / 0.25); }
.btn-outline {
  border: 1.5px solid var(--green);
  color: var(--warm-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 12px 28px;
}
.btn-outline:hover { background: rgb(var(--green-rgb) / 0.12); }
.btn:focus-visible, .nav a:focus-visible { outline: 2px solid var(--warm-white); outline-offset: 4px; }

.site-header { position: relative; z-index: 3; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 28px; padding-bottom: 20px;
}

.nav { display: flex; gap: clamp(20px, 3.4vw, 48px); }
.nav a {
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--warm-white);
  opacity: 0.85;
}
.nav a:hover { opacity: 1; color: var(--green); }

/* Wordmark: JOSH [transient] HOLLAND, the one menu logo on every page. Flat, no glow. */
.wordmark {
  display: inline-flex; align-items: center; gap: 0.3em;
  text-decoration: none;
  font-family: var(--font-headline);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: 0.34em;
  line-height: 1;
  color: var(--warm-white);
  white-space: nowrap;
}
.wordmark span:last-child { margin-right: -0.34em; }
.wordmark svg { width: 1.3em; height: 1.6em; overflow: visible; }
.wordmark:focus-visible { outline: 2px solid var(--warm-white); outline-offset: 6px; }

/* Sections: no numbers or eyebrow labels. Each page varies the spacing per section. */
.section { padding: clamp(40px, 4.5vw, 72px) 0; }

/* Placeholder panels (photos, video, playlist). The small corner label comes from data-label. */
.placeholder {
  position: relative;
  background:
    radial-gradient(120% 90% at 30% 20%, rgb(var(--warm-white-rgb) / 0.06), transparent 60%),
    linear-gradient(160deg, #181818, #0e0e0e);
}
.placeholder::after {
  content: attr(data-label);
  position: absolute; left: 12px; bottom: 10px;
  font-size: 10px; letter-spacing: 0.3em;
  color: rgb(var(--warm-white-rgb) / 0.32);
}

/* Hear the work: Spotify's standard playlist embed is full width, 352px tall, 12px corners */
.spotify-slot { margin-top: clamp(32px, 3.5vw, 48px); }
.spotify-slot > * { display: block; width: 100%; height: 352px; border: 0; border-radius: var(--radius); }
.spotify-placeholder { box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.spotify-placeholder::after { left: auto; right: 16px; }
.spotify-placeholder .cover {
  position: absolute; left: 16px; top: 16px; bottom: 16px; aspect-ratio: 1;
  border-radius: 8px; background: rgb(var(--warm-white-rgb) / 0.05);
}
.spotify-placeholder .rows { position: absolute; left: 352px; right: 24px; top: 44px; display: grid; gap: 22px; }
.spotify-placeholder .rows span { height: 10px; border-radius: 5px; background: rgb(var(--warm-white-rgb) / 0.06); }
.spotify-placeholder .rows span:nth-child(odd) { width: 70%; }
.spotify-placeholder .rows span:first-child { width: 45%; height: 18px; }

/* Footer */
.site-footer .wrap {
  position: relative;
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 22px; padding-bottom: 30px;
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted);
}
.site-footer .wrap::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }

[id] { scroll-margin-top: 16px; }

/* AI REFERENCE label: shown on every AI-made stand-in photo so none can go live by accident.
   Delete the one <span class="ai-ref"> line in a spot when its real photo goes in. */
.ai-ref {
  position: absolute; z-index: 3;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgb(var(--warm-white-rgb) / 0.9);
  text-shadow: 0 0 6px rgb(0 0 0 / 0.9), 0 1px 2px rgb(0 0 0 / 0.9);
  pointer-events: none;
}

/* Quotes: the curly quotation marks are drawn around each quote, so the quote text itself stays exactly as approved */
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }

/* The audio transient: its colour always follows --green */
.signal-stroke { stroke: var(--green); }
.signal-fill { fill: var(--green); }
.signal-stop { stop-color: var(--green); }

@media (max-width: 640px) {
  .spotify-placeholder .cover { right: auto; bottom: auto; width: 120px; height: 120px; }
  .spotify-placeholder .rows { left: 16px; right: 16px; top: 160px; gap: 18px; }
  .site-footer .wrap { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
}