/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --black:          #080807;
  --charcoal:       #101010;
  --charcoal-mid:   #181815;
  --charcoal-light: #222218;

  --amber:          #c87941;
  --amber-warm:     #d9894e;
  --amber-glow:     rgba(200, 121, 65, 0.12);
  --amber-glow-lg:  rgba(200, 121, 65, 0.07);

  --cream:          #d5caa8;
  --cream-mid:      #9a8d6e;
  --cream-dim:      #5c5444;
  --cream-faint:    #2c2820;

  --font: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --ease-out:     cubic-bezier(0.25, 0, 0.25, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   GRAIN OVERLAY
   ============================================================ */

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 1.6s var(--ease-out) forwards;
  animation-delay: 0.4s;
}

.fade-in--delay {
  animation-delay: 1s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1.1s var(--ease-smooth) var(--d, 0s),
    transform 1.1s var(--ease-smooth) var(--d, 0s);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SHARED LAYOUT
   ============================================================ */

.section-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-label {
  font-size: 0.7rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 400;
  margin-bottom: 3rem;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  height: 100svh;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: brightness(0.2) saturate(0.55);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 62% 28%, rgba(200, 121, 65, 0.11) 0%, transparent 65%),
    linear-gradient(to bottom,
      rgba(8, 8, 7, 0.15) 0%,
      rgba(8, 8, 7, 0.05) 35%,
      rgba(8, 8, 7, 0.55) 80%,
      rgba(8, 8, 7, 0.88) 100%
    );
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 1.5rem;
}

.hero__name {
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.05;
  margin-bottom: 1.2rem;
}

.hero__tagline {
  font-size: clamp(0.78rem, 2.2vw, 1rem);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--amber);
  font-style: italic;
  font-weight: 300;
}

.fade-in--delay-2 {
  animation-delay: 1.6s;
}

.hero__ctas {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  margin-top: 2.8rem;
  flex-wrap: wrap;
}

.hero__cta {
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  text-decoration: none;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.hero__cta--listen {
  border: 1px solid var(--amber);
  color: var(--amber);
}

.hero__cta--listen:hover {
  background: var(--amber);
  color: var(--black);
}

.hero__cta--watch {
  border: 1px solid rgba(213, 202, 168, 0.28);
  color: var(--cream-mid);
}

.hero__cta--watch:hover {
  border-color: var(--cream-mid);
  color: var(--cream);
}

.hero__scroll {
  position: absolute;
  bottom: 2.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.hero__scroll span {
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, var(--amber), transparent);
  margin: 0 auto;
  animation: scrollPulse 2.6s var(--ease-smooth) infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0; transform: translateY(-10px); }
  45%, 55% { opacity: 0.65; transform: translateY(0); }
}

/* ============================================================
   LATEST RELEASE
   ============================================================ */

.latest {
  padding: 9rem 1.5rem;
  background: var(--charcoal);
}

.latest__inner {
  max-width: 900px;
  margin: 0 auto;
}

.latest__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 620px) {
  .latest__content {
    grid-template-columns: 260px 1fr;
    gap: 4rem;
  }
}

.latest__art {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: sepia(0.18) brightness(0.88) contrast(1.05);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}

.latest__info {
  padding-top: 0.25rem;
}

.latest__title {
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

.latest__meta {
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cream-mid);
  margin-bottom: 1.6rem;
}

.latest__desc {
  font-size: 1.1rem;
  color: var(--cream-mid);
  font-style: italic;
  line-height: 1.85;
  margin-bottom: 2.5rem;
}

.player {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 2.2rem;
  padding: 1.1rem 1.4rem;
  background: var(--charcoal-light);
  border: 1px solid var(--cream-faint);
}

.player__toggle {
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--amber);
  border: none;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.player__toggle:hover {
  background: var(--amber-warm);
}

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

.player__toggle:active {
  transform: scale(0.94);
}

.player__icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.player__icon--pause {
  display: none;
}

.player.is-playing .player__icon--play {
  display: none;
}

.player.is-playing .player__icon--pause {
  display: block;
}

.player__main {
  flex: 1;
  min-width: 0;
}

.player__seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: var(--cream-faint);
  outline: none;
  cursor: pointer;
  margin-bottom: 0.55rem;
}

.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--amber);
  transition: background 0.2s ease;
}

.player__seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--amber);
  transition: background 0.2s ease;
}

.player__seek::-moz-range-track {
  height: 3px;
  background: var(--cream-faint);
}

.player__seek:hover::-webkit-slider-thumb,
.player__seek:focus-visible::-webkit-slider-thumb {
  background: var(--amber-warm);
}

.player__seek:focus-visible {
  outline: none;
}

.player__time {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--cream-mid);
}

@media (max-width: 480px) {
  .player {
    gap: 1rem;
    padding: 0.9rem 1.1rem;
  }

  .player__toggle {
    width: 2.8rem;
    height: 2.8rem;
  }
}

.latest__primary-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.latest__cta {
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  padding: 0.8rem 1.8rem;
  text-decoration: none;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  display: inline-block;
}

.latest__cta--listen {
  background: var(--amber);
  color: var(--black);
  border: 1px solid var(--amber);
}

.latest__cta--listen:hover {
  background: var(--amber-warm);
  border-color: var(--amber-warm);
}

.latest__cta--watch {
  border: 1px solid var(--cream-dim);
  color: var(--cream-mid);
}

.latest__cta--watch:hover {
  border-color: var(--cream-mid);
  color: var(--cream);
}

.catalog__detail .latest__links {
  margin-top: 0.2rem;
}

.latest__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

.latest__link {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream-mid);
  border-bottom: 1px solid var(--cream-dim);
  padding-bottom: 3px;
  transition: color 0.35s ease, border-color 0.35s ease;
}

.latest__link:hover {
  color: var(--amber-warm);
  border-color: var(--amber-warm);
}

/* ============================================================
   MUSIC / CATALOG
   ============================================================ */

.music {
  padding: 9rem 1.5rem;
}

.catalog {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.catalog__album {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 540px) {
  .catalog__album {
    grid-template-columns: 150px 1fr;
    gap: 2.8rem;
  }
}

.catalog__art-wrap {
  display: block;
  flex-shrink: 0;
}

.catalog__art {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: brightness(0.72) sepia(0.2);
  display: block;
  transition: filter 0.45s var(--ease-smooth);
}

.catalog__art-wrap:hover .catalog__art {
  filter: brightness(0.88) sepia(0.08);
}

.catalog__album-title {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  margin-bottom: 1.4rem;
  line-height: 1.2;
}

.catalog__album-title a {
  color: var(--cream);
  text-decoration: none;
  transition: color 0.3s ease;
}

.catalog__album-title a:hover {
  color: var(--amber-warm);
}

/* Release type and date under a catalog title. Same voice as the featured
   meta line, one step quieter. */
.catalog__meta {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: -0.3rem;
  margin-bottom: 1rem;
}

.catalog__tracks {
  list-style: none;
  margin-bottom: 1.8rem;
  border-top: 1px solid var(--cream-faint);
}

.catalog__track {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--cream-faint);
}

.catalog__track-num {
  font-size: 0.62rem;
  color: var(--amber);
  letter-spacing: 0.05em;
  min-width: 1.6rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.catalog__track-link {
  font-size: 0.95rem;
  color: var(--cream-mid);
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.22s ease;
}

.catalog__track-link:hover {
  color: var(--cream);
}

/* Track with no link yet — same type, none of the link affordance. */
.catalog__track-link--plain,
.catalog__track-link--plain:hover {
  color: var(--cream-mid);
  cursor: default;
}

.catalog__cta {
  font-size: 0.68rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  transition: opacity 0.3s ease;
  display: inline-block;
}

.catalog__cta:hover {
  opacity: 0.7;
}

/* ============================================================
   ABOUT
   ============================================================ */

.about {
  padding: 9rem 1.5rem;
  background: var(--charcoal);
}

.about__inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 620px) {
  .about__inner {
    grid-template-columns: 240px 1fr;
    gap: 4.5rem;
  }
}

.about__image-wrap {
  position: relative;
  display: inline-block;
}

.about__image {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: sepia(0.35) brightness(0.78) contrast(1.08);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.65);
}

.about__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, transparent 55%, rgba(200, 121, 65, 0.07));
  pointer-events: none;
}

.about__text .section-label {
  margin-bottom: 2.2rem;
}

.about__text p {
  font-size: 1.15rem;
  color: var(--cream-mid);
  line-height: 1.9;
  font-style: italic;
  margin-bottom: 1.4rem;
}

.about__text p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   FRAGMENTS
   ============================================================ */

.fragments {
  padding: 9rem 1.5rem;
  position: relative;
}

/* Fast, never-fully-invisible reveal — scroll past this section
   quickly (anchor jump, fling-scroll) should never show a black gap. */
.fragments .reveal:not(.visible) {
  opacity: 0.7;
  transform: translateY(10px);
  transition:
    opacity 0.4s var(--ease-smooth) var(--d, 0s),
    transform 0.4s var(--ease-smooth) var(--d, 0s);
}

.fragments .section-label {
  margin-bottom: 1rem;
}

.fragments__context {
  font-size: 1rem;
  font-style: italic;
  color: var(--cream-mid);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 3.5rem;
}

.fragments__list {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.fragments__exit {
  display: block;
  width: fit-content;
  margin: 4.5rem auto 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--cream-mid);
  border-bottom: 1px solid transparent;
  transition: color 0.35s ease, border-color 0.35s ease;
}

.fragments__exit:hover {
  color: var(--amber-warm);
  border-color: var(--amber-warm);
}

.fragment {
  position: relative;
}

.fragment__dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0.7;
  margin-bottom: 1.2rem;
}

.fragment__text {
  font-size: clamp(1.15rem, 2.8vw, 1.45rem);
  font-style: italic;
  font-weight: 300;
  color: var(--cream);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.fragment__time {
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ============================================================
   PWA
   ============================================================ */

.pwa {
  padding: 9rem 1.5rem;
  background: var(--charcoal-mid);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pwa__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.12) saturate(0.7);
}

.pwa::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(200, 121, 65, 0.14) 0%, transparent 65%),
    linear-gradient(to bottom, rgba(24, 24, 21, 0.6), rgba(24, 24, 21, 0.5));
  pointer-events: none;
}

.pwa__inner {
  position: relative;
  z-index: 2;
}

.pwa__headline {
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 2.5rem;
}

.pwa__btn {
  background: transparent;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  padding: 0.9rem 2.2rem;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease;
}

.pwa__btn:hover,
.pwa__btn:focus-visible {
  background: var(--amber);
  color: var(--black);
  outline: none;
}

.pwa__sub {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream-dim);
  font-style: italic;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  padding: 4.5rem 1.5rem;
  border-top: 1px solid var(--charcoal-light);
}

.footer__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.4rem;
}

.footer__social {
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cream-mid);
  transition: color 0.3s ease;
}

.footer__social:hover {
  color: var(--amber);
}

.footer__copy {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

/* ---- Hero, on a phone held upright ---------------------------------------
   The hero photograph is 1942x809 -- 2.40:1. A portrait phone viewport is
   about 0.46:1, so object-fit: cover scales the image to the viewport HEIGHT
   and then throws away roughly four fifths of its width. At the default
   horizontal position that surviving fifth is x 40%-60% of the picture, and
   Joe sits at x 24%-43%: the crop begins exactly where he ends. What reached
   the phone was the tip of the guitar headstock at the left edge and then bare
   stage. The image was loading perfectly the whole time.

   Only the horizontal position needs moving. Because the image is far wider
   than the viewport, cover scales by height, the full height is always shown,
   and the Y component of object-position does nothing here.

   The photograph is a silhouette against a lamp, so it also needs to be less
   dark than the desktop treatment: at brightness(0.2) a black silhouette on a
   dim stage is simply black. Lifting it reveals the lamp and the rim light on
   Joe without touching the desktop composition. */
@media (max-width: 720px) and (orientation: portrait) {
  .hero__bg-img {
    object-position: 33% center;
    filter: brightness(0.46) saturate(0.62);
  }

  /* The name now sits over the brightest part of the picture. This keeps it
     legible without dimming the whole frame again: a soft pool of shade behind
     the text only, and the existing bottom fade to carry it into the page. */
  .hero__overlay {
    background:
      radial-gradient(ellipse 88% 34% at 50% 46%, rgba(8, 8, 7, 0.72) 0%, rgba(8, 8, 7, 0.34) 55%, transparent 78%),
      radial-gradient(ellipse 70% 40% at 33% 22%, rgba(200, 121, 65, 0.14) 0%, transparent 70%),
      linear-gradient(to bottom,
        rgba(8, 8, 7, 0.55) 0%,
        rgba(8, 8, 7, 0.12) 26%,
        rgba(8, 8, 7, 0.35) 62%,
        rgba(8, 8, 7, 0.92) 100%
      );
  }

  /* Cheap insurance for the few pixels where cream meets lamp glow. */
  .hero__name,
  .hero__tagline {
    text-shadow: 0 1px 16px rgba(8, 8, 7, 0.85);
  }

  /* Centred vertically, the name lands straight across his arms and the
     guitar -- the two things worth seeing. Dropping the block into the lower
     third clears the figure and leaves the text over the darkest part of the
     frame, which is where it is most readable anyway. */
  .hero {
    align-items: flex-end;
  }

  /* The content is bottom-aligned now, so this padding is what holds it clear
     of the scroll indicator -- which sits 2.8rem up and is 52px tall, giving it
     the bottom ~6.05rem of the hero. The floor has to clear that at every
     height, and a vh-only value does not: on a 568px screen 17vh is 96.6px and
     the buttons landed on the indicator by a few pixels. Hence a 7rem floor. */
  .hero__content {
    padding-bottom: clamp(7rem, 17vh, 10rem);
  }

  .hero__ctas {
    margin-top: clamp(1.6rem, 4vh, 2.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .reveal {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }

  .hero__scroll span {
    animation: none;
  }
}