/* ============================================================
   assets/css/base.css  —  Typography & Base Styles
   Curve Matrix LLP
   ============================================================ */

body {
  background:   var(--bg-base);
  color:        var(--text-primary);
  font-family:  var(--font-body);
  font-weight:  400;
  font-size:    17px;          /* up from 16px — base scale bumped */
  overflow-x:   hidden;
  cursor:       none;
}

/* ── Headings ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-display);
  font-weight:    600;
  line-height:    1.08;
  letter-spacing: -0.01em;
  color:          var(--text-primary);
}

h1 { font-size: clamp(2.8rem, 8vw,  7.5rem); }
h2 { font-size: clamp(2rem,   5vw,  4rem);   }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }

/* ── Body paragraphs ───────────────────────────────────────── */
p {
  font-size:   clamp(1rem, 1.6vw, 1.15rem);   /* was 0.92–1.05rem */
  line-height: 1.8;
  color:       var(--text-muted);
  font-weight: 400;                            /* was 300 — too thin for Jost */
}

strong { font-weight: 600; color: var(--text-primary); }
em     { font-style: italic; }
small  { font-size: 0.88rem; }                /* was 0.78rem */

/* ── Links ─────────────────────────────────────────────────── */
a {
  color: var(--text-primary);
  transition: color var(--t-base);
}
a:hover { color: var(--acid); }

/* ── Noise overlay (body-level) ────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.45;
}

/* ── Acid / colour helpers ─────────────────────────────────── */
.acid  { color: var(--acid); }
.muted { color: var(--text-muted); }
.white { color: var(--white); }

/* ── Section label ─────────────────────────────────────────── */
.section-label {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  font-size:      0.8rem;          /* was 0.72rem */
  font-weight:    600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--acid);
  margin-bottom:  var(--sp-4);
}
.section-label::before {
  content:    '';
  width:      32px;
  height:     1.5px;
  background: var(--acid);
  flex-shrink: 0;
}
.section-label.centered             { justify-content: center; }
.section-label.centered::before     { display: none; }

/* ── Section headline ──────────────────────────────────────── */
.section-headline {
  font-family:    var(--font-display);
  font-weight:    600;
  font-size:      clamp(2rem, 5vw, 4rem);
  line-height:    1.08;
  letter-spacing: -0.01em;
  margin-bottom:  var(--sp-6);
}

/* ── Section sub-text ──────────────────────────────────────── */
.section-sub {
  font-size:   clamp(1rem, 1.8vw, 1.15rem);   /* was 0.95–1.1rem */
  color:       var(--text-muted);
  line-height: 1.8;
  font-weight: 400;                            /* was 300 */
  max-width:   540px;
}