/* responsive.css — Project Aurora */

/* ══════════════════════════════════════════════
   TABLET — 900px and below
═══════════════════════════════════════════════ */
@media (max-width: 900px) {

  .nav__links { display: none; }

  /* Identity — single column, image above text */
  .identity__grid {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }

  .identity__image-wrap {
    aspect-ratio: 4/3;
    max-width: 100%;
    position: relative; /* ensure height is derived from aspect-ratio */
    height: auto;
  }

  .identity__image {
    position: absolute;
    inset: 0;
  }

  .music__releases {
    /* Carousel stays flex on all screen sizes — just adjust card width */
    padding-inline: var(--gutter);
  }

  .release {
    flex: 0 0 clamp(220px, 44vw, 300px);
  }

  .performance__grid {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }

  .booking__grid {
    grid-template-columns: 1fr;
  }

  .booking__right {
    position: static;
  }

  .merch__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
  }
}

/* ══════════════════════════════════════════════
   MOBILE — 600px and below
═══════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Global ─────────────────────────────────── */
  :root {
    --chapter-pad: clamp(3rem, 8vh, 5rem);
    --gutter: 1.25rem;
  }

  /* Hide custom cursor on touch */
  .cursor { display: none; }
  body { cursor: auto; }

  /* ── Section titles — tighter on mobile ─────── */
  .section-title {
    font-size: clamp(2.25rem, 9vw, 3rem);
    line-height: 1.0;
  }

  /* ── Hero ───────────────────────────────────── */
  .chapter--hero {
    min-height: 100svh;
    justify-content: flex-end;
  }

  /* Ensure bg image is visible and positioned well on mobile portrait */
  .hero__bg-img {
    inset: 0;           /* remove the -10% bleed that pushes it offscreen */
    background-position: center top;
    transform: scale(1.0);
  }

  .hero__content {
    padding: var(--s-8) var(--gutter);
    padding-bottom: var(--s-16);
  }

  .hero__name {
    font-size: clamp(3.75rem, 15vw, 5rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
  }

  .hero__eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    margin-bottom: var(--s-4);
  }

  .hero__sub {
    margin-top: var(--s-4);
    gap: var(--s-3);
  }

  .hero__divider { width: 32px; }

  .hero__tagline {
    font-size: clamp(var(--t-base), 4vw, var(--t-lg));
  }

  .hero__stats { display: none; }

  .hero__scroll-cue { display: none; }

  /* ── Chapter marker ─────────────────────────── */
  .chapter__marker {
    font-size: 0.6rem;
    top: var(--s-6);
  }

  /* ── Nav ────────────────────────────────────── */
  .nav__cta { display: none; }

  .site-nav {
    padding: var(--s-4) var(--gutter);
  }

  .nav__logo {
    font-size: var(--t-base);
  }

  /* ── Identity ───────────────────────────────── */
  .identity__grid {
    grid-template-columns: 1fr;
    gap: var(--s-8);
    padding-top: var(--s-10);
  }

  /* Image takes full width, fixed height so it's visible */
  .identity__image-wrap {
    width: 100%;
    aspect-ratio: 3/4;
    max-height: 420px;
    position: relative;
    overflow: hidden;
  }

  .identity__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
  }

  .identity__image-frame {
    inset: var(--s-3);
  }

  .identity__body p {
    font-size: var(--t-base);
    line-height: 1.65;
  }

  .identity__quote p {
    font-size: var(--t-lg);
  }

  .identity__tape {
    margin-top: var(--s-12);
  }

  /* ── Music carousel — narrower cards on mobile ── */
  .music__releases {
    gap: var(--s-4);
  }

  .release {
    flex: 0 0 clamp(200px, 72vw, 260px);
  }

  .music__header { margin-bottom: var(--s-6); }

  /* ── Video theater ──────────────────────────── */
  .video-theater__grid {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }

  .video-theater__title {
    font-size: var(--t-xl);
  }

  /* ── Performance ────────────────────────────── */
  .performance__content {
    padding: var(--s-12) var(--gutter);
  }

  .performance__testimonials {
    gap: var(--s-6);
  }

  .testimonial p {
    font-size: var(--t-base);
  }

  .perf-date {
    gap: var(--s-4);
    flex-wrap: wrap;
  }

  .perf-date__venue {
    font-size: var(--t-base);
  }

  /* ── Booking ────────────────────────────────── */
  .booking__types { display: none; }

  .booking__sub {
    font-size: var(--t-base);
  }

  /* ── Merch ──────────────────────────────────── */
  .merch__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
  }

  .merch-item__name {
    font-size: var(--t-base);
  }

  .merch__header { margin-bottom: var(--s-8); }

  /* ── Community ──────────────────────────────── */
  .community__inner {
    padding: var(--s-12) var(--gutter);
    gap: var(--s-6);
  }

  .community__socials {
    gap: var(--s-4);
    flex-wrap: wrap;
    justify-content: center;
  }

  .email-form {
    width: 100%;
    max-width: 100%;
  }

  /* ── Footer ─────────────────────────────────── */
  .site-footer {
    padding: var(--s-8) var(--gutter);
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }

  .site-footer__meta {
    flex-direction: column;
    gap: var(--s-2);
  }

  /* ── Audio toggle ───────────────────────────── */
  .audio-toggle {
    bottom: var(--s-4);
    right: var(--s-4);
  }

  /* ── Tape ───────────────────────────────────── */
  .tape-text {
    font-size: var(--t-lg);
  }

  /* ── WOW features ───────────────────────────── */
  .geo-energy-badge { display: none; }
  .spotify-badge { display: none; }

  .chapter--filmreel { height: 220vh; }

  .reel__frame {
    width: clamp(180px, 65vw, 260px);
  }

  .frequency-egg__line {
    font-size: clamp(var(--t-xl), 8vw, var(--t-3xl));
  }

  .lyric-line {
    font-size: clamp(1rem, 5vw, 1.6rem);
    padding-inline: var(--s-4);
  }
}

/* ══════════════════════════════════════════════
   SMALL MOBILE — 380px and below (iPhone SE etc)
═══════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hero__name {
    font-size: 3.25rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .merch__grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════
   LARGE SCREENS — 1440px+
═══════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .merch__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ══════════════════════════════════════════════
   FOCUS — Accessibility
═══════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--c-amber);
  outline-offset: 4px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-amber);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero__bg-img,
  .hero__light-leak,
  .tape-text,
  .audio-toggle__bars span,
  .hero__scroll-line {
    animation: none !important;
  }

  [data-reveal],
  [data-split-reveal],
  [data-aperture] .char {
    opacity: 1 !important;
    transform: none !important;
  }

  .chapter--filmreel { display: none; }
}