/* spintech-child base — sitewide typography, links, selection, hairlines.
 * Component chrome (header, footer, buttons) lives in /assets/components/.
 */

/* ---------- Body refinement ---------- */
body {
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Headings → Fraunces ----------
 * Parent has no bare h1-h6 font-family rules; headings inherit from body
 * (now IBM Plex Sans). We promote them to the display face.
 * `body` prefix bumps specificity above any single-class parent rule.
 */
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
body .display-1, body .display-2, body .display-3,
body .display-4, body .display-5, body .display-6 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ink);
}

/* Italics in Fraunces are a major design feature — preserve them */
body h1 em, body h2 em, body h3 em,
body h4 em, body h5 em, body h6 em {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100;
}

/* ---------- Links ---------- */
body a:not(.btn):not(.wp-block-button__link):not(.menu-item a):not(.scrolling-btn) {
  color: var(--navy);
  transition: color var(--dur-fast) var(--ease-standard);
}
body a:not(.btn):not(.wp-block-button__link):not(.menu-item a):not(.scrolling-btn):hover,
body a:not(.btn):not(.wp-block-button__link):not(.menu-item a):not(.scrolling-btn):focus {
  color: var(--gold-deep);
}

/* ---------- Text selection — gold-on-navy, signature pull from post 357 ---------- */
::selection {
  background: var(--gold);
  color: var(--navy-deep);
}
::-moz-selection {
  background: var(--gold);
  color: var(--navy-deep);
}

/* ---------- Mono utilities ---------- */
code, pre, kbd, samp, tt, var,
.label-mono, .eyebrow {
  font-family: var(--font-mono);
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-light);
}

/* ---------- Hairline rule ---------- */
hr {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 2rem 0;
}

/* ---------- Focus visibility — make keyboard users feel seen ---------- */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}