/* Ithaca — Base reset + editorial utility classes
   These classes mirror the brand book's vocabulary so HTML specimens, cards and consumers
   can write semantic markup without re-deriving the type scale each time. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface-page);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: var(--sans-features);
}
a { color: inherit; text-decoration: none; }
html { scrollbar-color: var(--ith-navy) var(--ith-parchment); }

/* ——— Eyebrow / mono caption ——— */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.eyebrow-light { color: var(--text-muted-on-dark); }

/* ——— Serif display & headings (always light) ——— */
.display {
  font-family: var(--font-serif);
  font-weight: var(--fw-display);
  font-size: var(--type-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.display i, .display em,
.h1 i, .h1 em, .h2 i, .h2 em { font-style: italic; font-weight: var(--fw-display); }

.h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-display);
  font-size: var(--type-h1);
  line-height: 1.02;
  letter-spacing: var(--tracking-heading);
}
.h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-display);
  font-size: var(--type-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 15px;
  letter-spacing: var(--tracking-body);
}

/* ——— Body / lede ——— */
.lede {
  font-family: var(--font-serif);
  font-weight: var(--fw-display);
  font-size: var(--type-lede);
  line-height: var(--lh-lede);
  letter-spacing: -0.01em;
}
.body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-body);
}
.body-sm { font-size: var(--type-body-sm); line-height: 1.55; }

/* ——— Mono / data ——— */
.mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: var(--tracking-mono-tight);
}
.tabular { font-variant-numeric: tabular-nums; }

/* ——— Rules ——— */
.rule { height: 1px; background: var(--line); width: 100%; }
.rule-inv { background: var(--line-on-dark); }
.rule-v { width: 1px; background: var(--line); align-self: stretch; }

/* ——— Chip (the only rounded form) ——— */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ——— Brass dot marker ——— */
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); display: inline-block;
}

/* ——— Section scaffolding ——— */
.section { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); position: relative; }
.section-dark { background: var(--surface-dark); color: var(--text-on-dark); border-top-color: var(--line-on-dark); }
.section-dark .eyebrow, .section-dark .muted { color: var(--text-muted-on-dark); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }