/* AI Agency Toolkit — shared foundation (Direction C, "The Index").
   One source for tokens, reset, masthead, and footer. Every React page links
   this before its own stylesheet. index.html and pages/graduate-compass.html
   still carry inline copies of these rules; a later package dedupes them. */

:root {
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px;
  --space-12: 96px;

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --text-caption: 0.8125rem;  --lh-caption: 16px;
  --text-body: 1rem;          --lh-body: 24px;
  --text-lead: 1.25rem;       --lh-lead: 32px;
  --text-heading: 1.5625rem;  --lh-heading: 32px;
  --text-title: 1.9375rem;    --lh-title: 40px;
  --text-display: 2.4375rem;  --lh-display: 48px;
  --text-display-lg: 3.0625rem; --lh-display-lg: 56px;

  --color-ground: #FFFFFF;
  --color-ink: #0B0B0C;
  --color-text-2: #6B6B70;
  --color-rule: #E6E6E6;
  --color-ground-2: #F3F3F4;
  --color-pointer: #B42318;
  --color-accent: #0B0B0C;
  --color-focus: #0B0B0C;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 150ms;
}

* { box-sizing: border-box; margin: 0; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 400;
  background: var(--color-ground);
  color: var(--color-ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--space-3); }

h1 em, h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ---------------- masthead ---------------- */
.mast { border-bottom: 1px solid var(--color-rule); font-family: var(--font-sans); }
.mast__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.mast__name {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.mast__name:hover { color: var(--color-text-2); }
.mast__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}
.mast__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.mast__nav a:hover { color: var(--color-text-2); }
.mast__nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
@media (max-width: 640px) {
  .mast__row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .mast__nav ul { gap: var(--space-2); }
}

/* ---------------- footer · three-part bar ---------------- */
.foot {
  margin-top: var(--space-12);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-2);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-1) var(--space-3);
}
.foot .caps { font-weight: 500; color: var(--color-ink); }
.foot a {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-text-2);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.foot a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 40rem) {
  .foot { grid-template-columns: 1fr; justify-items: start; gap: var(--space-2); }
  .foot a { justify-self: start; }
}

/* ---------------- legacy type roles ----------------
   Carried over from the retired type stylesheet, re-cut in the tokens
   above. Only the four class names the React pages still reference are kept;
   each page's own redesign package should retire its last use. */
.t-hero {
  font-family: var(--font-sans);
  font-size: var(--text-display-lg);
  line-height: var(--lh-display-lg);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.t-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: 400;
}
.t-eyebrow, .t-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .t-hero { font-size: var(--text-display); line-height: var(--lh-display); }
}