/* ==========================================================================
   LEA : LIGHT ECHOES ALGORITHM — responsive.css
   Breakpoints: 480 / 768 / 1024 / 1440 / 1920
   Mobile has its own composition logic — not shrunken desktop.
   ========================================================================== */

/* ---- ≤ 1024px : tablet ---------------------------------------------------- */

@media (max-width: 1024px) {
  .primary-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .transmission-grid,
  .human-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Single column: portrait goes back to a natural ratio instead of filling. */
  .human .human-portrait {
    aspect-ratio: 3 / 4;
    flex: 0 0 auto;
    max-width: 26rem;
    min-height: 0;
  }

  /* Press cards stack: thumbnail above the text. */
  .press-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .press-thumb {
    max-width: 28rem;
  }

  /* Signal map: single-column bar under the globe. */
  .signal-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .signal-log {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Detail overlay becomes a touch smaller on phones. */
  .signal-detail {
    width: min(15rem, 70%);
    padding: var(--space-sm);
  }

  .transmission-grid .art {
    max-width: 30rem;
  }

  .signals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signal:nth-child(odd) {
    border-left: none;
    padding-left: 0;
  }

  .signal:nth-child(-n + 2) {
    border-bottom: 1px solid var(--color-line);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .about-block {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
}

/* ---- ≤ 768px : large mobile ------------------------------------------------ */

@media (max-width: 768px) {
  :root {
    --space-section: clamp(4rem, 10vh, 6rem);
  }

  .hero-statement {
    font-size: var(--text-lg);
    max-width: 24ch;
  }

  .hero-meta-top {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .work,
  .work--feature {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .work .work-media,
  .work:nth-child(even) .work-media {
    order: 0; /* text first, compact artwork below */
    justify-self: start;
    max-width: 200px;
  }

  .press-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .catalog-row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas:
      "art title"
      "art meta"
      "links links";
    row-gap: var(--space-sm);
  }

  .catalog-index { display: none; }
  .catalog-row .art { grid-area: art; }
  .catalog-main { grid-area: title; }
  .catalog-meta { grid-area: meta; }

  .catalog-links {
    grid-area: links;
    justify-content: flex-start;
  }

  .press-grid,
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .timeline-year {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .reel {
    --reel-cell-w: min(23rem, 88vw);
  }

  .reel-nav {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.4rem;
  }

  .manifesto-support {
    margin-left: 0;
  }

  .tv-console {
    grid-template-columns: minmax(0, 1fr);
  }

  .tv-lyrics-col {
    min-height: 0;
  }

  .tv-lyrics-col .lyrics-panel {
    position: static;
    max-height: 22rem;
  }

  .tv-playlist .tv-item {
    flex-basis: 108px;
  }

  .newsletter {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pulse-foot {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  /* Keep the follow row on one line — icon-only on small screens. */
  .follow-net { display: none; }

  .follow-card { padding: var(--space-sm) 0.3rem; }
}

/* ---- ≤ 480px : small mobile -------------------------------------------------- */

@media (max-width: 480px) {
  .brand-sub {
    display: none;
  }

  .signals-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .signal {
    border-left: none;
    padding-inline: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .signal:last-child {
    border-bottom: none;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .btn-row .link-signal {
    align-self: center;
  }

  .transmission-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- ≥ 1440px : large desktop -------------------------------------------------- */

@media (min-width: 1440px) {
  .hero-statement {
    max-width: 34ch;
  }
}

/* ---- ≥ 1920px : ultrawide ------------------------------------------------------- */

@media (min-width: 1920px) {
  :root {
    --width-max: 1720px;
  }

  .hero-inner {
    padding-block: var(--space-2xl);
  }
}