/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --color-bg: #0f0f0f;
  --color-text: #ebe4d7;
  --color-text-muted: #8a8378;
  --color-accent: #a0492e;
  --color-border: #2a2a2a;

  --font-headline: "Zilla Slab", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;

  --max-prose: 720px;
  --max-grid: 1280px;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
}

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

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: color 150ms ease, border-color 150ms ease;
}

a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }

p + p { margin-top: var(--space-sm); }

/* ==========================================================================
   Section layout
   ========================================================================== */
section {
  padding: var(--space-xl) var(--space-md);
}

section + section {
  border-top: 1px solid var(--color-border);
}

.container {
  max-width: var(--max-prose);
  margin: 0 auto;
}

.container-wide {
  max-width: var(--max-grid);
  margin: 0 auto;
}

.muted {
  color: var(--color-text-muted);
}

/* ==========================================================================
   Hero
   ========================================================================== */
#hero {
  position: relative;
  padding: 0;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  border-top: 0;
}

#hero + section {
  border-top: 0;
}

/* Gradient lives on #hero (not .hero-image) so image filters don't shift
   the endpoint color and break the seam with the page background. */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 15, 15, 0.15) 0%,
    rgba(15, 15, 15, 0.05) 40%,
    rgba(15, 15, 15, 0.6) 75%,
    rgba(15, 15, 15, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-image {
  position: absolute;
  inset: 0;
  background-image: url("assets/img/hero/hero.png");
  background-size: cover;
  background-position: center 25%;
  filter: grayscale(0.2) contrast(1.05) brightness(0.75);
}

.hero-overlay {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-lg);
  max-width: var(--max-grid);
  margin: 0 auto;
  z-index: 2;
}

.hero-overlay h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-family: var(--font-headline);
  font-size: 1rem;
  color: var(--color-text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: var(--space-sm);
}

/* On narrow viewports: image at top at its natural aspect (1179x912 ~1.29:1),
   full composition visible with no cropping. Text overlay flows below the
   image instead of on top of it, so subjects aren't covered by the headline.
   The bottom fade gradient stays anchored to the image area only. */
@media (max-width: 700px) {
  #hero {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    overflow: visible;
  }

  .hero-image {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1179 / 912;
  }

  #hero::after {
    top: 0;
    bottom: auto;
    height: calc(100vw * 912 / 1179);
  }

  .hero-overlay {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: var(--space-md);
    max-width: none;
    margin: 0;
  }
}

/* ==========================================================================
   Story
   ========================================================================== */
#story h2 {
  margin-bottom: var(--space-md);
}

#story p {
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
}

@media (max-width: 600px) {
  #story p {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Discography
   ========================================================================== */
#discography h2 {
  margin-bottom: var(--space-md);
}

.release {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.release:last-child {
  border-bottom: 0;
}

.release-cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(0.1);
}

.release-cover--empty {
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    repeating-linear-gradient(
      45deg,
      #1a1a1a,
      #1a1a1a 8px,
      #141414 8px,
      #141414 16px
    );
  border: 1px solid var(--color-border);
}

.release-body h3 {
  margin-bottom: var(--space-xs);
}

.release-meta {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

@media (max-width: 600px) {
  .release {
    grid-template-columns: 1fr;
  }
  .release-cover {
    max-width: 280px;
  }
}

/* ==========================================================================
   Studio archive + Live
   ========================================================================== */
#studio h2 {
  margin-bottom: var(--space-sm);
}

.section-intro {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.subsection {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xs);
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: filter 250ms ease, transform 300ms ease;
}

.photo-grid img:hover {
  filter: brightness(1.1);
  transform: scale(1.01);
}

@media (max-width: 600px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Listen
   ========================================================================== */
#listen h2 {
  margin-bottom: var(--space-md);
}

.listen-tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.listen-tiles a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  transition: border-color 200ms ease, background 200ms ease;
}

.listen-tiles a:hover {
  border-color: var(--color-accent);
  background: rgba(160, 73, 46, 0.08);
}

.tile-label {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ==========================================================================
   Contact
   ========================================================================== */
#contact {
  padding-bottom: var(--space-lg);
}

#contact h2 {
  margin-bottom: var(--space-md);
}

#contact p {
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
}

.footer-mark {
  margin-top: var(--space-xl);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  text-align: center;
}

/* ==========================================================================
   Responsive globals
   ========================================================================== */
@media (max-width: 600px) {
  html { font-size: 16px; }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }

  /* Tighter vertical rhythm on phone — desktop's --space-xl section
     padding produces ~250px gaps between sections that feel like holes
     on a small screen. */
  section {
    padding: var(--space-md) var(--space-sm);
  }

  /* Long contact email should wrap instead of overflowing the viewport */
  #contact a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #contact p {
    font-size: 1rem;
  }
}

@media (min-width: 601px) and (max-width: 960px) {
  section { padding: var(--space-lg) var(--space-md); }
}