/* =====================================================================
   GAI27 DESIGN SYSTEM — 2/4: BASE
   Typography, links, prose, global element defaults.
   ===================================================================== */

body{ font-family:var(--font-body); color:var(--ink); line-height:1.65;
  background:var(--surface); }

h1,h2,h3,h4{ font-family:var(--font-head); letter-spacing:-.01em; color:var(--ink); }
.display-2,.hero-title{ font-weight:700; line-height:1.1; }
/* homepage hero title: Inter Extra-bold (800) for stronger impact */
.hero-section .hero-title,
.hero-section .hero-title .grad-text{ font-family:var(--font-body); font-weight:800; }
h2,.section-title{ font-weight:600; }

/* Brand identity: section / hero / page titles are ORANGE with an orange underline */
.section-title,.hero-title,.page-title{
  font-family:var(--font-head); letter-spacing:-.01em;
  color:var(--primary) !important;
}
/* Section titles: left-aligned, underline hugs the text */
.section-title{
  border-bottom:3px solid var(--primary); padding-bottom:.4rem;
  display:block; width:fit-content; margin-left:0; margin-right:auto; text-align:left;
}
/* Hero / page-header titles stay centered */
.page-header .section-title,.page-header .hero-title,.page-header .page-title{
  margin-left:auto; margin-right:auto; text-align:center;
}
/* Fluid hero title so it never overflows on small screens */
.display-2,.hero-title{ font-size:clamp(1.8rem, 1.2rem + 4vw, 3.25rem); }

.lead{ color:var(--muted); }
.text-meta,small{ color:var(--faint); }
.prose{ max-width:72ch; } .prose p{ margin-bottom:1.15rem; }

/* Links + colour-role helpers */
.text-primary{ color:var(--primary)!important; }
.text-accent{ color:var(--accent)!important; }
a{ color:var(--primary); }
a:hover{ color:var(--primary-dark); }

/* Global element safety: fluid images, no horizontal scroll */
img{ max-width:100%; height:auto; }
html,body{ overflow-x:hidden; }