/* ============================================
   EA International Holdings — base.css
   Brand-aligned: Georgia + Calibri, exact palette
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 400; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:root {
  /* ---------- Brand Palette (per EA Brand Guide) ---------- */
  --black:        #0A0A0C;   /* Cover / closing */
  --navy-deep:    #0A1B2C;   /* Section title backgrounds */
  --navy:         #0B2E4F;   /* Headers, body emphasis, table header */
  --teal:         #01696F;   /* Secondary accent, callout backgrounds */
  --teal-dark:    #0C4E54;   /* Hover state */
  --gold:         #C9A24B;   /* Primary accent — eyebrows, kickers, hairlines */
  --gold-deep:    #8C6A1F;   /* Large decorative numerals, secondary */
  --silver:       #B7BDC4;   /* Subtitle text on dark */
  --silver-deep:  #7E8590;   /* Meta labels, footer secondary */
  --ink:          #1F2A36;   /* Body text on light */
  --surface:      #F4F1EA;   /* Warm off-white background */
  --surface-2:    #FBF9F2;   /* Elevated surface */
  --surface-3:    #E8E3D5;   /* Border on cream */

  /* Semantic tokens */
  --bg: var(--surface);
  --text: var(--ink);
  --text-muted: #4A5A6E;
  --line: rgba(31, 42, 54, 0.14);
  --line-strong: rgba(31, 42, 54, 0.28);

  /* Type scale (fluid) */
  --text-xs: clamp(0.6875rem, 0.66rem + 0.15vw, 0.75rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --text-hero: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;

  --container-max: 1240px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --shadow-sm: 0 1px 2px rgba(10,27,44,0.06);
  --shadow: 0 8px 24px rgba(10,27,44,0.08);
  --shadow-lg: 0 24px 60px rgba(10,27,44,0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 500ms;
}

/* Georgia display + Calibri body (system fonts) */
html {
  font-family: 'Calibri', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
}

body {
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-base);
}

.display, h1, h2, h3, h4 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--navy);
}

.serif { font-family: Georgia, serif; }
.sans { font-family: 'Calibri', 'Segoe UI', sans-serif; }

/* Signature EA eyebrow — Calibri bold, gold, all caps, wide tracking */
.eyebrow {
  font-family: 'Calibri', 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* Dual gold hairline rules — brand signature */
.hairline {
  height: 0.75px;
  background: var(--gold);
  border: none;
  width: 100%;
}
.hairline-strong {
  height: 1.5px;
  background: var(--gold);
  border: none;
  width: 100%;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: var(--space-3) var(--space-4);
  z-index: 100; font-weight: 500;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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