@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&display=swap");

@import "./variables.css";
@import "./reset.css";
@import "./components.css";

@import "./sections/nav.css";
@import "./sections/about-hero.css";
@import "./sections/about-story.css";
@import "./sections/projects.css";
@import "./sections/footer.css";

/* ── About dark shell: projects + footer on dark bg ─── */

.projects-footer-shell {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%),
    var(--clr-dark);
}

/* ── Section separator ── */

.section-sep {
  height: 4.5rem;
}

/* ── Override footer CTA top padding for section-sep offset ── */

.footer__cta {
  --_cta-pt: calc(var(--r-footer) + clamp(6rem, 10vw, 10rem));
}

@media (max-width: 64rem) {
  .padding-top-5rem {
    padding-top: 5rem;
  }
}

@media (max-width: 48rem) {
  .section-sep {
    border-bottom-left-radius: 1.5rem; /* 24px */
    border-bottom-right-radius: 1.5rem;
    margin-top: -4rem;
  }
}