/* crib notes — base element defaults.
   Light-touch resets so raw HTML already reads like the brand.
   Consumers get these for free by linking styles.css. */
:root { color-scheme: light; }

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

/* headings: Instrument Serif, always lowercase */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* italic is the emphasis gesture in display type */
h1 em, h2 em, h3 em { font-style: italic; }

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

em { font-style: italic; }
strong { font-weight: 600; }

a { color: var(--text-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--slate-blue) 35%, transparent); transition: border-color 160ms ease, color 160ms ease; }
a:hover { color: color-mix(in srgb, var(--slate-blue) 80%, var(--ink)); border-bottom-color: var(--slate-blue); }

hr { border: none; border-top: 1px solid var(--border-hairline); margin: var(--space-7) 0; }

small { font-size: var(--fs-small); }

::selection { background: color-mix(in srgb, var(--slate-blue) 22%, transparent); }

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

/* the mark — a small slate-blue star, doubles as footnote glyph */
.cn-star { color: var(--mark); font-style: normal; }