/* ============================================================
   Edel Club — Foundations
   Colors and typography tokens. Modern Old Money — heritage
   materials, modern restraint.
   ============================================================ */

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

:root {
  /* ---------- Primary — Modern Old Money ---------- */
  --ec-ink:          #1A1A18;   /* True ink black, slightly warm */
  --ec-loden:        #2C3A2E;   /* Deep loden/forest green — primary brand */
  --ec-loden-deep:   #1F2A21;   /* Deepest loden for layering */
  --ec-saddle:       #6B4F35;   /* Saddle leather brown */
  --ec-camel:        #A88B6A;   /* Camel hair — primary accent */
  --ec-camel-light:  #C4A982;   /* Lighter camel for highlights */

  /* ---------- Neutrals — Linen & Oat ---------- */
  --ec-linen:        #ECE7DC;   /* Warm linen — main background */
  --ec-oat:          #E2DAC9;   /* Soft oat */
  --ec-cream:        #F5F1E6;   /* Lightest surface */
  --ec-bone:         #DDD3BD;   /* Deeper neutral */

  /* ---------- Functional grays — warm undertone ---------- */
  --ec-slate-100:    #F0EDE5;
  --ec-slate-300:    #C9C2B0;
  --ec-slate-500:    #8A8470;
  --ec-slate-700:    #4D483C;
  --ec-slate-900:    #2A271F;

  /* ---------- Subtle accent — used very sparingly ---------- */
  --ec-rust:         #8B4A2B;

  /* ---------- Semantic surfaces ---------- */
  --ec-bg:           var(--ec-linen);
  --ec-bg-raised:    var(--ec-cream);
  --ec-bg-sunken:    var(--ec-oat);
  --ec-bg-inverse:   var(--ec-loden);
  --ec-bg-deepest:   var(--ec-ink);

  /* ---------- Semantic text ---------- */
  --ec-fg-1:         var(--ec-ink);          /* Primary text */
  --ec-fg-2:         var(--ec-slate-700);    /* Body */
  --ec-fg-3:         var(--ec-slate-500);    /* Caption / meta */
  --ec-fg-accent:    var(--ec-saddle);       /* Editorial accent */
  --ec-fg-on-dark:   var(--ec-linen);
  --ec-fg-on-dark-2: var(--ec-oat);
  --ec-fg-on-dark-3: var(--ec-camel-light);

  /* ---------- Borders / rules ---------- */
  --ec-rule:         var(--ec-slate-300);
  --ec-rule-strong:  var(--ec-saddle);
  --ec-rule-on-dark: rgba(236, 231, 220, 0.18);

  /* ---------- Type families ---------- */
  --ec-serif-display:   'Cormorant', 'EB Garamond', Georgia, serif;
  --ec-serif-classical: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --ec-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ec-mono:            'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Spacing — generous, editorial ---------- */
  --ec-space-1:  4px;
  --ec-space-2:  8px;
  --ec-space-3:  12px;
  --ec-space-4:  16px;
  --ec-space-5:  24px;
  --ec-space-6:  32px;
  --ec-space-7:  48px;
  --ec-space-8:  64px;
  --ec-space-9:  80px;
  --ec-space-10: 120px;
  --ec-space-11: 160px;

  /* ---------- Radii — refined, never friendly ---------- */
  --ec-radius-0:  0;
  --ec-radius-1:  2px;
  --ec-radius-2:  4px;
  --ec-radius-3:  8px;
  --ec-radius-icon-sm: 14px;
  --ec-radius-icon-md: 20px;
  --ec-radius-icon-lg: 28px;
  --ec-radius-phone:   42px;

  /* ---------- Shadows — subtle, paper-like ---------- */
  --ec-shadow-1: 0 1px 3px rgba(26, 26, 24, 0.06);
  --ec-shadow-2: 0 1px 3px rgba(26, 26, 24, 0.06), 0 8px 20px rgba(26, 26, 24, 0.08);
  --ec-shadow-3: 0 1px 3px rgba(26, 26, 24, 0.06), 0 30px 60px rgba(26, 26, 24, 0.18);
  --ec-shadow-premium: 0 40px 100px -20px rgba(26, 26, 24, 0.4), 0 20px 40px -15px rgba(26, 26, 24, 0.2);
  --ec-shadow-icon: 0 16px 40px rgba(44, 58, 46, 0.18);

  /* ---------- Glassmorphism ---------- */
  --ec-glass-bg: rgba(245, 241, 230, 0.7);
  --ec-glass-bg-dark: rgba(31, 42, 33, 0.85);
  --ec-glass-border: rgba(255, 255, 255, 0.2);
  --ec-glass-blur: 12px;

  /* ---------- Motion — slow, considered, never bouncy ---------- */
  --ec-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ec-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ec-ease-paper:  cubic-bezier(0.32, 0.72, 0, 1);
  --ec-dur-1: 200ms;
  --ec-dur-2: 320ms;
  --ec-dur-3: 450ms;
  --ec-dur-4: 600ms;
  --ec-dur-5: 1200ms;

  /* ---------- Tracking ---------- */
  --ec-track-display: -0.045em;
  --ec-track-headline: -0.025em;
  --ec-track-body: -0.005em;
  --ec-track-meta: 0.22em;
  --ec-track-meta-sm: 0.28em;
}

/* ============================================================
   Semantic typography classes — apply directly or compose
   ============================================================ */

.ec-display,
.ec-h1,
.ec-h2,
.ec-h3,
.ec-h4 {
  font-family: var(--ec-serif-display);
  color: var(--ec-fg-1);
  letter-spacing: var(--ec-track-headline);
  text-wrap: balance;
}

.ec-display {
  font-weight: 400;
  font-size: clamp(80px, 11vw, 168px);
  line-height: 0.92;
  letter-spacing: var(--ec-track-display);
}

.ec-h1 {
  font-weight: 400;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.ec-h2 {
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 56px);
  line-height: 1.05;
}

.ec-h3 {
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ec-h4 {
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* The "light" complement — always paired with a serif heading.
   Never used alone. The voice that drops into a softer register. */
.ec-light {
  font-weight: 300;
  color: var(--ec-fg-accent);
}

/* The trailing punctuation point — the brand's signature gesture.
   "Edel·Club", "Helena.", "EC." */
.ec-mark {
  font-weight: 300;
  color: var(--ec-fg-accent);
}

.ec-body {
  font-family: var(--ec-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ec-fg-2);
  letter-spacing: var(--ec-track-body);
}

.ec-body-lg {
  font-family: var(--ec-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ec-fg-2);
  letter-spacing: var(--ec-track-body);
  max-width: 580px;
}

.ec-body-sm {
  font-family: var(--ec-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ec-fg-2);
}

.ec-body strong,
.ec-body-lg strong,
.ec-body-sm strong {
  font-weight: 500;
  color: var(--ec-fg-1);
}

.ec-pull-quote {
  font-family: var(--ec-serif-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ec-fg-1);
}

.ec-caption {
  font-family: var(--ec-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ec-fg-3);
}

/* The editorial label — uppercase, monospace-feeling tracking, sans.
   Used for nav, dates, presence counts, status. */
.ec-meta {
  font-family: var(--ec-sans);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ec-track-meta);
  color: var(--ec-fg-1);
}

.ec-meta-sm {
  font-family: var(--ec-sans);
  font-weight: 500;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--ec-track-meta-sm);
  color: var(--ec-fg-3);
}

.ec-mono {
  font-family: var(--ec-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Hairline rule — the editorial divider */
.ec-rule {
  border: 0;
  height: 1px;
  background: var(--ec-rule);
}

.ec-rule-accent {
  border: 0;
  height: 1px;
  background: var(--ec-rule-strong);
  width: 56px;
}

/* ============================================================
   Utility — Effects & Depth
   ============================================================ */

.ec-glass {
  background: var(--ec-glass-bg);
  backdrop-filter: blur(var(--ec-glass-blur));
  -webkit-backdrop-filter: blur(var(--ec-glass-blur));
  border: 1px solid var(--ec-glass-border);
}

.ec-glass-dark {
  background: var(--ec-glass-bg-dark);
  backdrop-filter: blur(var(--ec-glass-blur));
  -webkit-backdrop-filter: blur(var(--ec-glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ec-parallax-image {
  overflow: hidden;
}

.ec-parallax-image img {
  transition: transform var(--ec-dur-5) var(--ec-ease);
  will-change: transform;
}

.ec-parallax-image:hover img {
  transform: scale(1.05);
}

.ec-interactive {
  transition: transform var(--ec-dur-2) var(--ec-ease), box-shadow var(--ec-dur-2) var(--ec-ease);
}

.ec-interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--ec-shadow-premium);
}

.ec-text-reveal {
  overflow: hidden;
}

.ec-text-reveal span {
  display: block;
  animation: ec-text-rise var(--ec-dur-5) var(--ec-ease) both;
}

@keyframes ec-text-rise {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}