/* ============================================================
   DUSTY CHAIN — base element styles & a few brand utilities.
   Foundation-level only; components own their own styling.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin: 0 0 var(--space-4); }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Brand utilities ---- */

/* Stacked / tracked wordmark type */
.dc-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);
  line-height: var(--lh-tight);
  color: var(--text-heading);
}

/* Tracked uppercase micro-label — EXPLORE · CONNECT · IMPACT */
.dc-overline {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--dc-teal-deep);
}

/* The signature gold chain-link rule (thin gold divider) */
.dc-rule-gold {
  height: 2px;
  border: 0;
  background: var(--rule-gold);
  width: 64px;
  margin: var(--space-4) 0;
}

/* Topographic contour texture — brand's map/terrain motif.
   Layer over deep-teal or night surfaces. */
.dc-topo {
  background-color: var(--surface-brand);
  background-image:
    repeating-radial-gradient(
      circle at 30% 20%,
      transparent 0,
      transparent 22px,
      rgba(201, 169, 110, 0.10) 22px,
      rgba(201, 169, 110, 0.10) 23px,
      transparent 23px,
      transparent 46px
    ),
    repeating-radial-gradient(
      circle at 78% 82%,
      transparent 0,
      transparent 30px,
      rgba(201, 169, 110, 0.08) 30px,
      rgba(201, 169, 110, 0.08) 31px,
      transparent 31px,
      transparent 62px
    );
}