/* Limit hero.svg background size on large screens without affecting other pages */

/* Keep default cover behavior by default; override only when the hero.svg is used */
@media (min-width: 64rem) { /* ~1024px and up */
  header.cover[style*="hero.svg"] {
    /* Prevent the SVG from growing endlessly on ultra-wide screens */
    background-size: clamp(320px, 60vw, 1200px);
    background-repeat: no-repeat; /* ensure no tiling */
    /* bg-top from Tachyons already sets position; include here if needed: */
    /* background-position: top center; */
  }

  /* Push content lower on large screens */
  /* Home page header uses 'cover bg-top' (site-header.html) */
  header.cover.bg-top > .bg-black-60 > .tc-l {
    margin-top: 24rem; /* larger value as requested */
  }

  /* Other pages header uses 'cover bg-center' (page-header.html) */
  /* Half of home spacing applied to the whole content block */
  header.cover.bg-center > .bg-black-60 > .tc-l {
    margin-top: 12rem;
  }
  /* Neutralize the theme's inline margin on the title to avoid doubling */
  header.cover.bg-center > .bg-black-60 > .tc-l > .lh-title {
    margin-top: 0 !important;
  }

  /* Top margin for single content pages (about, contact, services) */
  /* Targets layouts/single.html articles only; homepage uses a different article structure */
  main[role="main"] > article.flex-l {
    margin-top: clamp(3rem, 4.5vw, 6rem);
  }
}