/* Autumn Moonlight — one-pager styles
   Design grounded in the band's own materials: the UMBRA cover (a crescent
   eclipse over painted black texture), the band photo (fog, night forest,
   two cold neon tubes), and the reviewers' own line — "the soundtrack to a
   film that hasn't been shot yet." One cold accent (the neon), one warm
   ember spent once, a serif built for that cinematic register. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  --ink: #0b0e10;
  --ink-2: #12161a;
  --paper: #e9e2d4;
  --paper-dim: #9a988e;
  --dim: #838a8f;
  --glow: #b9d3db;
  --glow-dim: #6c7f85;
  --ember: #a86a41;
  --panel: #1b2024;
  --panel-line: rgba(233, 226, 212, 0.1);
  --line: rgba(233, 226, 212, 0.14);
  --line-strong: rgba(233, 226, 212, 0.26);
  --max-w: 1120px;
  --gutter: 1.25rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--ink);
  background-image: radial-gradient(ellipse 120% 80% at 50% -10%, rgba(185, 211, 219, 0.05), transparent 60%);
  color: var(--paper);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* Header — transparent over the hero; the wordmark stays hidden there (the
   hero already spells the name in full) and only fades in once you've
   scrolled past it, the same beat as the reference site the client pointed
   to: the logo is something the page reveals to you, not a fixture. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.4rem 0;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(9, 11, 13, 0.97);
  padding: 0.9rem 0;
  border-color: var(--line);
}
.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.brand {
  justify-self: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.site-header.is-scrolled .brand {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.brand img { height: 18px; width: auto; }

.lang-toggle {
  justify-self: end;
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.lang-toggle button {
  background: transparent;
  border: 0;
  color: var(--paper-dim);
  font-family: var(--sans);
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
}

/* Hamburger — always the way in, on every screen size */
.nav-toggle {
  justify-self: start;
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--paper);
  width: 38px;
  height: 34px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 18px; height: 18px; }

/* Left-hand drawer nav — one step lighter than the page, not a flash of
   daylight: a quiet panel the eye settles into rather than blinks at. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 7, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
  z-index: 149;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

.main-nav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 150;
  width: min(22rem, 84vw);
  background: var(--panel);
  color: var(--paper);
  padding: 5.5rem 2.5rem 2.5rem;
  border-right: 1px solid var(--panel-line);
  box-shadow: 40px 0 60px rgba(0,0,0,0.35);
  transform: translateX(-100%);
  transition: transform 0.4s var(--ease);
  overflow-y: auto;
}
.main-nav.is-open { transform: translateX(0); }

.nav-close {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--paper);
  width: 38px;
  height: 34px;
  cursor: pointer;
}

.main-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}
.main-nav a {
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--paper);
  position: relative;
  transition: color 0.25s var(--ease);
}
.main-nav a:hover,
.main-nav a:focus-visible { color: var(--glow); }
.main-nav a.is-current { color: var(--glow); }
.main-nav a.is-current::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ember);
  transform: translateY(-50%);
}

@media (max-width: 480px) {
  .main-nav { padding: 5rem 1.75rem 2rem; }
  .main-nav a { font-size: 1.5rem; }
}

/* Hero — one orchestrated entrance, nothing else animates on load */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--paper);
  overflow: hidden;
}
.hero-bg,
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.hero-video.is-visible { opacity: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8,10,11,0.97) 2%, rgba(8,10,11,0.55) 42%, rgba(8,10,11,0.28) 100%),
    linear-gradient(to right, rgba(8,10,11,0.35), transparent 40%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 6rem 0 calc(6rem + env(safe-area-inset-bottom, 0px));
  width: 100%;
}
.hero-content h1 {
  margin: 0;
  opacity: 0;
  animation: hero-rise 1s var(--ease) 0.15s forwards;
}
.hero-wordmark img {
  display: block;
  width: clamp(220px, 46vw, 640px);
  height: auto;
}
.hero-strapline {
  margin: 1.1rem 0 0;
  max-width: 34ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--glow);
  opacity: 0;
  animation: hero-rise 1s var(--ease) 0.35s forwards;
}
.hero-meta {
  margin: 1.4rem 0 2.2rem;
  color: var(--paper-dim);
  font-size: 1rem;
  opacity: 0;
  animation: hero-rise 1s var(--ease) 0.5s forwards;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: center;
  opacity: 0;
  animation: hero-rise 1s var(--ease) 0.65s forwards;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.6rem;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-primary:hover { transform: translateY(-1px); background: #fff; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--paper);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.text-link:hover { color: var(--glow); border-color: var(--glow); }

/* Featured single — UMBRA, kept in view right after the hero rather than
   buried at the top of the catalog list further down. */
.feature-umbra { padding: 5.5rem 0; }
.feature-grid {
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  gap: 3.5rem;
  align-items: center;
}
.feature-media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  max-width: 420px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
}
.feature-video,
.feature-media picture,
.feature-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,10,11,0.55) 0%, transparent 30%);
  pointer-events: none;
}
.feature-eyebrow {
  margin: 0 0 0.4rem;
  color: var(--ember);
  font-size: 0.95rem;
}
.feature-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
}
.feature-date {
  margin: 0.5rem 0 1.2rem;
  color: var(--dim);
  font-size: 1rem;
}
.feature-desc {
  max-width: 52ch;
  color: var(--paper-dim);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 1.8rem;
}

@media (max-width: 720px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-media { width: min(80vw, 340px); margin: 0 auto; }
}

/* Sections */
section { padding: 6.5rem 0; }
section + section { border-top: 1px solid var(--line); }
section[id] { scroll-margin-top: 96px; }

.section-head {
  margin-bottom: 3rem;
  max-width: 56ch;
}
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 0.6rem;
  line-height: 1.05;
}
.section-dek {
  margin: 0;
  color: var(--dim);
  font-size: 1.02rem;
}

/* Bio */
.bio-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: center;
}
.bio-photo {
  border: 1px solid var(--line);
}
.bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.05);
}
.bio-text p {
  max-width: 66ch;
  color: var(--paper-dim);
  font-size: 1.12rem;
  line-height: 1.75;
}
.bio-text p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 3.4rem;
  font-weight: 500;
  float: left;
  line-height: 0.85;
  padding: 0.1rem 0.5rem 0 0;
  color: var(--glow);
}
.bio-text strong { color: var(--paper); font-weight: 600; }

/* Discography — a numbered catalog, not a card grid */
.catalog { list-style: none; margin: 0; padding: 0; }
.catalog-item {
  display: grid;
  grid-template-columns: 3rem 6.5rem 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}
.catalog-item:last-child { border-bottom: 1px solid var(--line); }
.catalog-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--dim);
  font-size: 1.1rem;
}
.catalog-cover {
  width: 6.5rem;
  height: 6.5rem;
  overflow: hidden;
  background: var(--ink-2);
  flex-shrink: 0;
}
.catalog-cover img { width: 100%; height: 100%; object-fit: cover; }
.catalog-body h3 {
  margin: 0 0 0.3rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.catalog-tag {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--ember);
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  transform: translateY(-2px);
}
.catalog-meta {
  margin: 0;
  color: var(--dim);
  font-size: 0.92rem;
}
.catalog-desc {
  margin: 0.5rem 0 0;
  color: var(--paper-dim);
  font-size: 0.95rem;
  max-width: 52ch;
}
.catalog-quote {
  margin: 0.6rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--paper-dim);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 48ch;
}
.catalog-quote-source {
  font-style: normal;
  font-family: var(--sans);
  color: var(--dim);
  font-size: 0.82rem;
}
.catalog-link {
  justify-self: end;
  white-space: nowrap;
}
.catalog-links {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.catalog-icon-link {
  color: var(--dim);
  transition: color 0.2s var(--ease);
}
.catalog-icon-link:hover,
.catalog-icon-link:focus-visible { color: var(--glow); }
.catalog-icon-link svg { width: 20px; height: 20px; display: block; }

/* Featured release (UMBRA) gets the one bold moment */
.catalog-item--featured {
  grid-template-columns: 3rem 10rem 1fr auto;
  padding: 2rem 0 2.4rem;
}
.catalog-item--featured .catalog-cover { width: 10rem; height: 10rem; }
.catalog-item--featured .catalog-body h3 { font-size: 1.9rem; }

/* Press */
.press-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.press-item {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}
.press-list li:last-child { border-bottom: 1px solid var(--line); }
.press-quote {
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.4;
  max-width: 46ch;
  color: var(--paper);
}
.press-source {
  font-size: 0.88rem;
  color: var(--dim);
}
.press-source strong { color: var(--paper-dim); font-weight: 600; }
.press-source a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  color: var(--dim);
}
.press-source a:hover { color: var(--glow); border-color: var(--glow); }
.press-empty { color: var(--dim); font-size: 0.95rem; margin-top: 1.5rem; }

/* Social — a plain index, not a button rack */
.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--paper-dim);
  font-size: 1.05rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.social-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.8; }
.social-link:hover { color: var(--glow); border-color: var(--glow); }

/* Contact */
.contact-block { display: flex; flex-direction: column; gap: 0.9rem; }
.contact-email {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4vw, 2rem);
  text-decoration: none;
  color: var(--paper);
  border-bottom: 1px solid var(--line-strong);
  display: inline-block;
  width: fit-content;
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.contact-email:hover { color: var(--glow); border-color: var(--glow); }
.contact-note { color: var(--dim); font-size: 0.92rem; margin: 0; }

/* Footer */
.site-footer {
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.85rem;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
}

/* i18n visibility */
[data-lang] { display: none; }
[data-lang].is-active { display: block; }
span[data-lang].is-active,
h3 span[data-lang].is-active { display: inline; }

@media (max-width: 720px) {
  section { padding: 4.5rem 0; }
  .hero-content { padding: 5rem 0 calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
  .catalog-item,
  .catalog-item--featured {
    grid-template-columns: 2.4rem 4.6rem 1fr;
  }
  .catalog-link,
  .catalog-links { grid-column: 2 / -1; justify-self: start; margin-top: 0.4rem; }
  .catalog-cover,
  .catalog-item--featured .catalog-cover { width: 4.6rem; height: 4.6rem; }
  .bio-text p:first-of-type::first-letter { font-size: 2.6rem; }
  .bio-grid { grid-template-columns: 1fr; gap: 2rem; }
  .bio-photo { order: -1; }
}

/* Reveal-on-scroll (progressive enhancement: hidden only once JS confirms
   it can reveal — see the .js-ready flag set in main.js) */
.js-ready [data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.js-ready [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Secondary, quieter link for the hero (artist profile vs. playlist CTA) */
.text-link--muted { color: var(--dim); border-color: var(--line); font-size: 0.85rem; }
.text-link--muted:hover { color: var(--glow); border-color: var(--glow); }

/* Press: featured pull-quote treatment for the single strongest line */
.press-item--featured {
  border-top: none;
  padding: 0 0 2.5rem;
  margin-bottom: 0.5rem;
}
.press-item--featured .press-quote {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.25;
  max-width: 34ch;
  border-left: 3px solid var(--ember);
  padding-left: 1.5rem;
}
.press-item--featured .press-source { padding-left: calc(1.5rem + 3px); }
.press-list--rest { margin-top: 0.5rem; }