/* ─────────────────────────────────────────────────────────────────────────
   editorial.css — STG portal editorial/photographic redesign.

   Loaded AFTER style.css (forked from elen). Overrides palette + type to
   a warm-neutral, sans-serif, photo-forward system. Scoped via `.e-*`
   classes for new markup; a short override block at the top rewires the
   inherited CSS custom properties so existing components (footer, modal,
   etc.) inherit the new palette without per-element changes.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Palette ─────────────────────────────────────────────────────────── */

:root, [data-theme="light"] {
  --e-bg:        #f6f5f1;          /* cooler sandstone — less yellow */
  --e-bg-warm:   #ededE7;
  --e-bg-band:   #e9e7e1;
  --e-bg-dark:   #111111;          /* true charcoal, not warm */
  --e-text:      #0f0f0f;          /* near-black for the corporate feel */
  --e-text-mute: #4a4a48;
  --e-line:      rgba(15,15,15,0.12);
  --e-line-strong: rgba(15,15,15,0.28);
  --e-accent:    #b34915;          /* kept copper, slightly shifted for stronger contrast on cool bg */
  --e-accent-hover: #8c370e;

  /* Rewire inherited variables so the rest of the site inherits the new palette. */
  --bg:          var(--e-bg);
  --text:        var(--e-text);
  --text-light:  var(--e-text-mute);
  --accent:      var(--e-accent);
  --accent-hover: var(--e-accent-hover);
  --accent-glow: rgba(184,74,19,0.18);
  --card-bg:     #ffffff;
  --card-border: var(--e-line);
}

[data-theme="dark"] {
  --e-bg:        #141311;
  --e-bg-warm:   #1c1a16;
  --e-bg-band:   #1c1a16;
  --e-bg-dark:   #0b0a09;
  --e-text:      #f3efe7;
  --e-text-mute: #a39a8d;
  --e-line:      rgba(243,239,231,0.12);
  --e-line-strong: rgba(243,239,231,0.28);
  --e-accent:    #e26a22;
  --e-accent-hover: #c85310;

  --bg:          var(--e-bg);
  --text:        var(--e-text);
  --text-light:  var(--e-text-mute);
  --accent:      var(--e-accent);
  --accent-hover: var(--e-accent-hover);
  --accent-glow: rgba(226,106,34,0.22);
  --card-bg:     #1c1a16;
  --card-border: var(--e-line);
}

/* ── Type ────────────────────────────────────────────────────────────── */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  background: var(--e-bg);
  color: var(--e-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: inherit;
  color: var(--e-text);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.e-display {
  font-weight: 300;
  font-size: clamp(44px, 7vw, 112px);
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.e-display em {
  font-style: normal;
  color: var(--e-accent);
  font-weight: 400;
}
.e-h2 {
  font-weight: 400;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.e-lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--e-text-mute);
  max-width: 60ch;
}
.e-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--e-accent);
}
.e-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--e-accent);
}
.e-num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--e-accent);
  letter-spacing: 0.08em;
  font-size: 12px;
}

/* ── Layout primitives ───────────────────────────────────────────────── */

.e-section { padding: 96px 0; position: relative; }
.e-section--tight { padding: 64px 0; }
.e-section--band { background: var(--e-bg-band); }
.e-section--dark { background: var(--e-bg-dark); color: #f5efe6; }
.e-section--dark h1, .e-section--dark h2, .e-section--dark h3 { color: #f5efe6; }
.e-section--dark .e-lead { color: rgba(245,239,230,0.72); }
.e-section--dark .e-eyebrow { color: #e8a56f; }
.e-section--dark .e-eyebrow::before { background: #e8a56f; }

.e-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.e-container--narrow { max-width: 880px; }
.e-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; }
.e-header .e-meta {
  display: flex; align-items: baseline; gap: 16px;
  color: var(--e-text-mute);
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
}
.e-header .e-h2 { max-width: 22ch; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.e-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 0;
  border: 1px solid var(--e-text);
  background: var(--e-text);
  color: var(--e-bg);
  font-weight: 500; font-size: 14px; letter-spacing: 0.01em;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.e-btn:hover { background: var(--e-accent); border-color: var(--e-accent); color: #fff; }
.e-btn--ghost {
  background: transparent; color: var(--e-text);
}
.e-btn--ghost:hover { background: var(--e-text); color: var(--e-bg); }
.e-btn svg { transition: transform .2s ease; }
.e-btn:hover svg { transform: translateX(3px); }

/* ── Dividers ────────────────────────────────────────────────────────── */

.e-hr { height: 1px; background: var(--e-line); border: 0; margin: 0; }
.e-hr--strong { background: var(--e-line-strong); }

/* ── Header & footer tweaks (to drop the "agency" feel) ──────────────── */

.header { background: var(--e-bg) !important; border-bottom: 1px solid var(--e-line); }
.header.scrolled { background: rgba(250,247,242,0.92) !important; backdrop-filter: blur(14px); }
[data-theme="dark"] .header { background: var(--e-bg) !important; }
[data-theme="dark"] .header.scrolled { background: rgba(20,19,17,0.88) !important; }

.footer,
[data-theme="dark"] .footer,
[data-theme="light"] .footer { background: var(--e-bg-dark); color: rgba(245,239,230,0.82); }
.footer a { color: #e8a56f; }
.footer .section-title { color: #f5efe6; }