/* Site-specific layer on top of the Organic design system (css/organic.css).
   The exported design has no breakpoints and sets its layout inline, so these
   rules use !important to collapse the grids on narrow screens. */

html { scroll-behavior: smooth; }

/* Tablet — drop the three-across grids to two */
@media (max-width: 1000px) {
  .sec-trio,
  .toolkit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Phone — single column throughout */
@media (max-width: 780px) {
  header,
  section,
  footer { padding-left: 22px !important; padding-right: 22px !important; }

  #top,
  .sec-trio,
  .work-grid,
  .toolkit-grid,
  .sec-personal { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }

  #top { padding-top: 44px !important; }

  /* Portrait sits under the intro rather than beside it */
  #top > div:last-child { min-height: 0 !important; }

  /* Timeline: date above the role instead of in a fixed 190px column */
  .path-row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }

  #path { padding: 56px 0 !important; }

  .photo-pair { padding: 0 !important; }
  .photo-pair img:last-of-type { margin-top: 0 !important; }

  header { gap: 16px !important; padding-top: 24px !important; }
  header nav { gap: 18px !important; flex-wrap: wrap; }

  footer { margin-top: 40px !important; }
}