@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');

/* ---- Global overflow safety net ---- */
/* Long unbroken strings (e.g. email addresses) or oversized headings can
   force the page wider than the viewport on phones. overflow-wrap: anywhere
   lets any inline content break rather than push the layout sideways. */
html, body {
  overflow-x: hidden;
}
body {
  overflow-wrap: anywhere;
}

/* ---- Responsive typography ---- */
/* The type scale in tokens/typography.css is fixed-px and tuned for
   desktop; on phone widths those sizes (esp. --text-4xl at 64px) are wide
   enough that a single long word can overflow the viewport. Scale the
   scale down below 600px — this cascades into every --font-h* alias
   automatically since they're built from these same tokens. */
@media (max-width: 600px) {
  :root {
    --text-4xl: 36px;
    --text-3xl: 28px;
    --text-2xl: 22px;
    --text-xl: 20px;
  }
}

/* ---- Responsive layout utilities ---- */
/* Grids collapse to a single column on tablet/phone widths */
@media (max-width: 860px) {
  .ds-grid-2, .ds-grid-3, .ds-grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* Section/header side padding tightens on phone widths */
@media (max-width: 600px) {
  .ds-section-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .ds-header-pad {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Header nav: desktop links vs. mobile hamburger */
.ds-desktop-nav { display: flex; }
.ds-mobile-toggle { display: none; }
.ds-mobile-menu { display: none; }

@media (max-width: 860px) {
  .ds-desktop-nav { display: none !important; }
  .ds-mobile-toggle { display: flex !important; }
  .ds-mobile-menu.is-open { display: flex !important; }
}

/* Gallery masonry: 4 fixed columns squeezed every tile down to a sliver
   on phones. Step the column count down with viewport width instead. */
.ds-gallery-grid {
  columns: 4;
  column-gap: 16px;
}
@media (max-width: 860px) {
  .ds-gallery-grid { columns: 3; }
}
@media (max-width: 600px) {
  .ds-gallery-grid { columns: 2; }
}
@media (max-width: 420px) {
  .ds-gallery-grid { columns: 1; }
}