/* Responsive layer for the Modernist build.
   Page grids are authored inline (streaming-first), so breakpoints hook onto an
   explicit data-cols contract on each grid container rather than overriding
   arbitrary declarations. Spacing stays on the Modernist tokens. */

@media (max-width: 1180px) {
  [data-cols="4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-cols="3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-cols="split"] { grid-template-columns: 1fr !important; }

  /* Stacked two-column text/photo blocks keep their flush-left column edge but
     no longer need the asymmetric right gutter. */
  [data-cols="2"] > [style*="var(--space-8) 0"] { padding-right: 0 !important; }

  [data-photo="tall"] { min-height: 300px !important; }


  .nav { flex-wrap: wrap; row-gap: var(--space-3); }
  .nav-brand { margin-right: var(--space-4); }
}

@media (max-width: 760px) {
  [data-cols] { grid-template-columns: 1fr !important; }
  [data-rail] { grid-template-columns: 1fr !important; }

  [data-container] { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  [data-hero-pad] { padding: var(--space-6) var(--space-4) !important; }
  .nav { padding-left: var(--space-4); padding-right: var(--space-4); }
  .nav nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: var(--space-4);
    padding-bottom: var(--space-1);
    -webkit-overflow-scrolling: touch;
  }
  .nav-brand { margin-right: var(--space-3); }
  [data-hero-title] { font-size: clamp(34px, 9vw, 56px) !important; }

  /* The on-set checks stop being pins over the photograph and become a list under it. */
  [data-onset="marker"] {
    position: static !important;
    inset: auto !important;
    width: 100%;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
  }

  /* One declaration owns both the mask height and the line box. */
  [data-rotator] { font-size: 16px !important; width: 100%; }

  .table-scroll { overflow-x: auto; }
  .table-scroll .table { min-width: 720px; }
}