feat(design): container e tipografia fluidos, cabecalho de secao em duas colunas e grade de projetos automatica

- tokens --shell, --fs-section-title e --fs-lead: iguais ao desenho atual ate ~1440px e crescem em telas grandes
- .ds-section-header vira container; acima de 880px o titulo fica a esquerda e a descricao a direita (aninhamento nativo + container query)
- .ds-grid-fluid: 2 colunas em notebook e 3 em tela grande, sem breakpoint (usada em Projects)
- Hero acompanha a largura util em telas grandes

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

app/components/Hero.tsx

@@ -35,7 +35,7 @@ export default function Hero() {
           duration: shouldReduceMotion ? 0 : 0.45,
           ease: "easeOut",
         }}
-        className="mx-auto grid w-full max-w-[1400px] grid-cols-1 items-center gap-sp-8 px-sp-6 pt-[calc(var(--site-header-height)+32px)] pb-sp-10 lg:grid-cols-[minmax(0,53fr)_minmax(0,47fr)] lg:gap-sp-8 lg:px-sp-12 lg:pb-sp-16"
+        className="mx-auto grid w-full max-w-[max(1400px,var(--shell))] grid-cols-1 items-center gap-sp-8 px-sp-6 pt-[calc(var(--site-header-height)+32px)] pb-sp-10 lg:grid-cols-[minmax(0,53fr)_minmax(0,47fr)] lg:gap-sp-8 lg:px-sp-12 lg:pb-sp-16"
       >
         <div className="min-w-0">
           <p className="mb-sp-5 text-[14px] leading-[1.5] text-[rgba(244,242,237,.72)]">

app/components/Projects.tsx

@@ -35,7 +35,7 @@ export default function Projects({
       dark
       disableChildrenAnimation
     >
-      <div className="ds-grid-2">
+      <div className="ds-grid-fluid">
         {projects.map((project) => {
           const caseStudy = caseStudies.find(
             (entry) => entry.id === project.id,