/* EurekaLogic — base element defaults + brand utilities. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-light); /* IBM Plex 300 is the body workhorse */
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  background: var(--el-ink);
  background: var(--grad-orbit); /* signature spotlight-from-top */
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; margin: 0 0 1em; }

a {
  color: var(--el-teal);
  text-decoration: none;
  transition: color var(--dur-fast, 120ms) var(--ease-out, ease);
}
a:hover { color: var(--teal-300); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--accent-teal-quiet); color: var(--text-primary); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs, 4px);
}

/* ---- Eyebrow / kicker — Raleway, uppercase, wide-tracked, teal ---- */
.el-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tagline);
  text-transform: uppercase;
  color: var(--el-teal);
}

/* ---- Wordmark gold gradient text ---- */
.el-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  background: var(--grad-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--el-gold);
}

/* ---- Hexagon (compass) clip — brand motif ---- */
.el-hex {
  clip-path: polygon(50% 3%, 100% 28%, 100% 72%, 50% 97%, 0% 72%, 0% 28%);
}

/* ---- Signature radial background ---- */
.el-orbit-bg { background: var(--grad-orbit); }

/* ---- Inset gold keyline page frame ---- */
.el-keyline {
  position: relative;
}
.el-keyline::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid var(--border-keyline);
  border-radius: 4px;
  pointer-events: none;
}

/* ---- Diamond list bullet (teal ◆) ---- */
.el-list { list-style: none; margin: 0; padding: 0; }
.el-list li { position: relative; padding-left: 1.4em; }
.el-list li::before {
  content: "\25C6"; /* ◆ */
  position: absolute; left: 0; top: 0;
  color: var(--el-teal);
  font-size: 0.7em; line-height: 1.9;
}

/* ---- Filigree divider (rust rule + gold-dotted diamond) ---- */
.el-divider {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--el-rust);
}
.el-divider::before, .el-divider::after {
  content: ""; height: 1px; flex: 1; max-width: 120px;
  background: var(--rule-rust);
}
.el-divider::after { transform: scaleX(-1); }