/* =========================================================
   EREDE — Colors & Type Tokens
   Quietly confident. Intentionally minimal.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
  /* ---------- Brand Colors ---------- */
  --erede-navy:        #0F2A44; /* Deep Navy — primary  */
  --erede-cream:       #F5F3EF; /* Off White — canvas   */
  --erede-white:       #FFFFFF;
  --erede-gold:        #C6A15B; /* Muted Gold — accent only */
  --erede-gray:        #8A9198; /* Cool Gray — captions */
  --erede-slate:       #1C1F23; /* Dark Slate — body text */

  /* Subtle navy translucencies (for hairlines, dividers) */
  --erede-navy-12:     rgba(15, 42, 68, 0.12);
  --erede-navy-10:     rgba(15, 42, 68, 0.10);
  --erede-navy-08:     rgba(15, 42, 68, 0.08);
  --erede-navy-05:     rgba(15, 42, 68, 0.05);
  --erede-cream-on-navy-70: rgba(245, 243, 239, 0.70);
  --erede-cream-on-navy-60: rgba(245, 243, 239, 0.60);
  --erede-cream-on-navy-15: rgba(245, 243, 239, 0.15);

  /* ---------- Semantic Color ---------- */
  --bg-canvas:         var(--erede-cream);
  --bg-surface:        var(--erede-white);
  --bg-inverse:        var(--erede-navy);
  --bg-deep:           var(--erede-slate);

  --fg-primary:        var(--erede-navy);
  --fg-body:           var(--erede-slate);
  --fg-muted:          var(--erede-gray);
  --fg-on-dark:        var(--erede-cream);
  --fg-accent:         var(--erede-gold);

  --border-hair:       var(--erede-navy-10);
  --border-strong:     var(--erede-navy);
  --rule-gold:         var(--erede-gold);

  /* ---------- Typography ---------- */
  --font-serif:        'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Tracking */
  --tracking-wide:     0.35em;  /* logo, large eyebrows */
  --tracking-medium:   0.25em;  /* eyebrows, buttons    */
  --tracking-loose:    0.22em;  /* mid                  */
  --tracking-tight:    -0.02em; /* display serif        */
  --tracking-normal:   0;

  /* ---------- Spacing (8-pt scale) ---------- */
  --space-xs:          8px;
  --space-s:           16px;
  --space-m:           32px;
  --space-l:           64px;
  --space-xl:          128px;

  /* ---------- Layout ---------- */
  --max-content:       1200px;
  --gutter:            16px;
  --margin-desktop:    64px;
  --margin-mobile:     24px;

  /* ---------- Radius ---------- */
  --radius-button:     4px;
  --radius-none:       0;

  /* ---------- Borders / hairlines ---------- */
  --hairline:          1px solid var(--border-hair);
  --rule-thickness:    1px;
}

/* =========================================================
   Base
   ========================================================= */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   Type roles — semantic CSS classes
   ========================================================= */

/* Display serif — hero, splash */
.e-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0;
}

/* H1 — page openers */
.e-h1, h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  color: var(--fg-primary);
  margin: 0;
}

/* H2 — section heads */
.e-h2, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--fg-primary);
  margin: 0;
}

/* H3 — sub-section */
.e-h3, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: var(--fg-primary);
  margin: 0;
}

/* Body — long copy */
.e-body, p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-body);
  margin: 0;
}

/* Lead — slightly larger body */
.e-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg-body);
}

/* Caption — fine print */
.e-cap {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

/* Eyebrow — tracked nav / section labels (navy) */
.e-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: var(--tracking-medium);
  text-transform: uppercase;
  color: var(--fg-primary);
}

/* Label — softer tracked label (gray) */
.e-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Wordmark — "EREDE" lockup */
.e-wordmark {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-primary);
}

/* Italic pull-quote */
.e-pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  line-height: 1.5;
  color: var(--fg-primary);
}

/* Section number — small italic gold serif */
.e-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--fg-accent);
}

/* =========================================================
   Atoms
   ========================================================= */

/* The signature — short gold line */
.e-rule {
  display: inline-block;
  width: 48px;
  height: var(--rule-thickness);
  background: var(--rule-gold);
  vertical-align: middle;
  border: 0;
}
.e-rule--short { width: 24px; }
.e-rule--long  { width: 80px; }
.e-rule--gray  { background: var(--erede-gray); }
.e-rule--navy  { background: var(--erede-navy); }

/* Hairline divider */
.e-hairline {
  border: 0;
  border-top: var(--hairline);
}

/* Buttons */
.e-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--tracking-medium);
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: opacity 220ms ease, background-color 220ms ease, color 220ms ease;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-primary);
  text-decoration: none;
}
.e-btn--primary {
  background: var(--erede-navy);
  color: var(--erede-cream);
  border-color: var(--erede-navy);
}
.e-btn--primary:hover { opacity: 0.88; }
.e-btn--secondary {
  background: transparent;
  color: var(--erede-navy);
  border-color: var(--erede-navy);
  padding: 13px 32px;
}
.e-btn--secondary:hover { background: var(--erede-navy); color: var(--erede-cream); }
.e-btn--text {
  border: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--erede-gold);
  border-radius: 0;
}
.e-btn--text:hover { opacity: 0.7; }

/* Form field — bottom border only */
.e-field {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--erede-navy);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--erede-navy);
  font-weight: 300;
  outline: none;
  transition: border-color 220ms ease;
}
.e-field:focus { border-bottom-color: var(--erede-gold); }
.e-field::placeholder { color: var(--erede-gray); }

/* Card */
.e-card {
  background: var(--bg-surface);
  padding: 48px;
  border: 0;
}