/* ============================================================
   BASE  —  element defaults & brand motif helpers
   Light, optional resets so a bare page already feels like
   Transducer. Product work can rely on tokens directly.
   ============================================================ */

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Serif display defaults — sentence case, never shout */
h1, h2, h3 {
  color: var(--text-strong);
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: 56px; line-height: 1.06; }
h2 { font-size: 40px; line-height: 1.1; }
h3 { font-size: 28px; line-height: 1.2; }

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--gold-soft); color: var(--ink); }

/* ---- Brand motif: the mono kicker ---- */
.tm-kicker {
  display: inline-block;
  font: var(--kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Brand motif: the hairline that follows a kicker ---- */
.tm-hairline {
  width: var(--hairline-w);
  height: 1px;
  border: 0;
  margin: var(--space-4) 0;
  background: var(--hairline-strong);
}

/* ---- Brand motif: the gold pull-quote rule / callout ---- */
.tm-callout {
  border-left: var(--rule-gold);
  padding-left: var(--space-4);
  color: var(--text-body);
}

/* ---- Brand motif: credit-block metadata (film-slate style) ---- */
.tm-credit {
  font: var(--meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
}
.tm-credit dt { color: var(--text-faint); }
.tm-credit dd { margin: 0; color: var(--text-on-dark-body); }