/* Base — element defaults, typography hierarchy, layout primitives. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background-color: var(--surface-page);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

::selection {
  background: var(--ella-gold);
  color: var(--ella-charcoal);
}

/* Headings — Raleway */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ella-charcoal);
}

h1 { font-size: var(--fs-hero); font-weight: 800; }
h2 { font-size: var(--fs-5xl); font-weight: 700; }
h3 { font-size: var(--fs-3xl); font-weight: 700; }
h4 { font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-snug); }
h5 { font-size: var(--fs-lg); font-weight: 600; }
h6 { font-size: var(--fs-base); font-weight: 600; }

p { color: var(--text-primary); }
p + p { margin-top: var(--space-4); }

a {
  color: inherit;
  transition: color var(--duration-base) var(--easing);
}

strong { font-weight: 600; }
em { font-style: italic; }

/* Layout primitives ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-base);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

.section {
  padding-block: var(--section-y);
}

.section-lg {
  padding-block: var(--section-y-lg);
}

.section-charcoal {
  background: var(--surface-authority);
  color: var(--text-on-dark);
}

.section-charcoal h1,
.section-charcoal h2,
.section-charcoal h3,
.section-charcoal h4,
.section-charcoal h5,
.section-charcoal h6 {
  color: var(--white);
}

.section-pale {
  background: var(--surface-card);
}

/* Eyebrow / kicker */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ella-gold-dark);
  margin-bottom: var(--space-4);
}

.section-charcoal .eyebrow { color: var(--ella-gold); }

/* Lead paragraph */
.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  max-width: 60ch;
}

.section-charcoal .lead { color: rgba(255,255,255,0.78); }

/* Stack — vertical rhythm utility */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.stack-xl > * + * { margin-top: var(--space-10); }

/* Skip link */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-modal);
  background: var(--ella-charcoal);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: top var(--duration-base) var(--easing);
}
.skip-to-main:focus { top: var(--space-4); outline: 2px solid var(--ella-gold); outline-offset: 2px; }

/* Focus state default */
:focus-visible {
  outline: 2px solid var(--ella-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}