/* =============================================================================
   Responsive recomposition — Phase 8
   Recompose intentionally. Do not shrink desktop.
   Breakpoints: mobile ≤719 · tablet 720–1023 · desktop ≥1024 · wide ≥1440
   ============================================================================= */

/* --- Token recomposition --- */
@media (max-width: 719px) {
  :root {
    --grid-cols: 4;
    --section-y: clamp(4rem, 16vw, 6rem);
    --section-y-tight: clamp(3rem, 12vw, 4.5rem);
    --section-y-loose: clamp(5rem, 18vw, 7.5rem);
    --text-display: clamp(2.75rem, 12vw, 3.75rem);
    --text-display-xl: clamp(3rem, 14vw, 4.25rem);
    --text-h1: clamp(2.1rem, 9vw, 2.85rem);
    --text-h2: clamp(1.65rem, 6.5vw, 2.15rem);
    --reveal-distance: 0.85rem;
  }

  .ed-grid {
    row-gap: var(--space-l);
  }

  .span-4,
  .span-5,
  .span-6,
  .span-7,
  .span-8 {
    grid-column: 1 / -1;
  }

  .start-2,
  .start-3,
  .start-5,
  .start-7,
  .start-8 {
    grid-column-start: 1;
  }

  .offset-nudge,
  .offset-pull {
    transform: none;
    margin-top: 0;
  }

  .offset-end {
    justify-self: stretch;
  }
}

@media (min-width: 720px) and (max-width: 1023px) {
  :root {
    --grid-cols: 8;
    --section-y: clamp(4rem, 9vw, 7rem);
    --text-display: clamp(3rem, 6vw, 4.5rem);
  }

  .span-4 { grid-column: span 4; }
  .span-5,
  .span-6 { grid-column: span 5; }
  .span-7,
  .span-8 { grid-column: span 6; }

  .start-7,
  .start-8 {
    grid-column-start: 4;
  }
}

@media (min-width: 1024px) {
  :root {
    --grid-cols: 12;
  }
}

@media (min-width: 1440px) {
  :root {
    --gutter: clamp(2.5rem, 5vw, 4.5rem);
    --page-max: 96rem;
  }
}

@media (min-width: 1800px) {
  :root {
    --page-max: 104rem;
    --gutter: clamp(3rem, 6vw, 5.5rem);
  }
}

/* Anchor clearance under fixed header */
#work,
#process,
#about,
#contact {
  scroll-margin-top: 5.5rem;
}