/* ============================================================
   gregnb.com — gbll design system tokens + personal site styles
   Tokens inlined from the Claude Design project, teal accent
   (--brand-alt-teal set) swapped into --brand* per the handoff.
   Edit the design system, then re-inline; don't invent new
   colours here. Never introduce a second accent.
   ============================================================ */

:root {
  /* brand — teal, replaces gbll magenta everywhere brand colour appears */
  --brand: #155e75;
  --brand-2: #0e4a5e;
  --brand-tint: #e8f2f5;
  --brand-tint-2: #cfe4ea;
  --brand-line: #9cc4d0;

  /* neutral warm ink scale */
  --ink-0: #fafaf9;
  --ink-1: #f5f3ee;   /* page background */
  --ink-2: #ece9e1;   /* hairline borders */
  --ink-3: #d9d5cb;   /* faint mono numerals */
  --ink-4: #a8a39a;   /* labels */
  --ink-5: #6b6962;   /* secondary text */
  --ink-6: #3a3833;   /* body */
  --ink-7: #1a1a1a;   /* headings, primary ink */
  --surface: #ffffff;
  --tint: #fbf9f4;

  /* type stacks */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', 'Iowan Old Style', 'Charter', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* shape */
  --radius-control: 6px;
  --radius-card: 8px;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 5%), 0 6px 16px rgb(0 0 0 / 6%);
  --focus-ring: 0 0 0 3px rgb(21 94 117 / 12%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--ink-1);
  color: var(--ink-7);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.005em;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 40px; }
::selection { background: var(--brand-tint); }

a { color: var(--brand); }
a:hover { color: var(--brand-2); }
a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ---------- mono eyebrow labels ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4);
}
.eyebrow--brand { color: var(--brand); }

/* ---------- nav (all pages) ---------- */
.site-nav { border-bottom: 1px solid var(--ink-2); }
.site-nav .wrap { height: 64px; display: flex; align-items: center; }
.wordmark {
  display: flex; align-items: baseline; gap: 2px;
  text-decoration: none; color: var(--ink-7);
  font-weight: 600; font-size: 17px; letter-spacing: -.03em;
}
.wordmark .dot { color: var(--brand); }
.site-nav nav { margin-left: auto; display: flex; gap: 26px; align-items: baseline; }
.site-nav nav a {
  font-size: 13px; color: var(--ink-5); text-decoration: none;
  display: flex; gap: 7px; align-items: baseline;
  transition: color .15s ease;
}
.site-nav nav a:hover { color: var(--ink-7); }
.site-nav nav .num { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.site-nav nav a[aria-current="page"] { color: var(--ink-7); font-weight: 500; }
.site-nav nav a[aria-current="page"] .num { color: var(--brand); }

/* ---------- hero (home) ---------- */
.hero { border-bottom: 1px solid var(--ink-2); background: var(--surface); }
.hero .wrap {
  padding-top: 96px; padding-bottom: 84px;
  display: grid; grid-template-columns: 1fr 280px; gap: 64px;
  align-items: start;
}
.hero .eyebrow--brand { margin-bottom: 26px; }
.hero h1 {
  font-size: 64px; font-weight: 500;
  letter-spacing: -.035em; line-height: 1.04;
}
.hero .intro {
  font-family: var(--serif);
  font-size: 20px; line-height: 1.6; color: var(--ink-6);
  margin-top: 30px; max-width: 520px;
}
.hero .cta { display: flex; align-items: center; gap: 12px; margin-top: 38px; }

/* buttons (gbll .btn primitives, hero sizing) */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 14px/1 var(--sans);
  color: var(--ink-7);
  background: var(--surface);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-control);
  padding: 11px 20px 12px;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--tint); color: var(--ink-7); }
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }

/* ---------- household census card ---------- */
.census {
  background: var(--surface);
  border: 1px solid var(--ink-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.census__head {
  padding: 14px 20px; border-bottom: 1px solid var(--ink-2);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4);
}
.census__rows {
  padding: 8px 20px 14px;
  font-family: var(--mono); font-size: 13px; color: var(--ink-6);
}
.census__row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px dashed var(--ink-2);
}
.census__row:last-child { border-bottom: none; }
.census__row b { font-weight: 400; color: var(--ink-7); }
.census__foot {
  padding: 11px 20px; background: var(--brand-tint);
  font-family: var(--mono); font-size: 11px; color: var(--brand);
}

/* ---------- index (home) ---------- */
.index .wrap { padding-top: 64px; padding-bottom: 88px; }
.index .eyebrow { margin-bottom: 8px; }
.index-list { display: flex; flex-direction: column; }
.index-list a {
  display: grid; grid-template-columns: 64px 200px 1fr 24px; gap: 24px;
  align-items: baseline; padding: 26px 12px;
  border-bottom: 1px solid var(--ink-2);
  text-decoration: none; color: var(--ink-7);
  transition: background .15s ease;
}
.index-list a:hover { background: var(--surface); color: var(--ink-7); }
.index-list .num { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.index-list .title { font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.index-list .desc { font-size: 14px; color: var(--ink-5); }
.index-list .arrow { font-size: 16px; color: var(--brand); justify-self: end; }

/* ---------- page header (inner pages) ---------- */
.page-head { border-bottom: 1px solid var(--ink-2); background: var(--surface); }
.page-head .wrap { padding-top: 72px; padding-bottom: 56px; }
.page-head .eyebrow--brand { margin-bottom: 18px; }
.page-head h1 {
  font-size: 46px; font-weight: 500;
  letter-spacing: -.03em; line-height: 1.08;
}
.page-head .intro {
  font-family: var(--serif);
  font-size: 17px; line-height: 1.6; color: var(--ink-5);
  margin-top: 18px; max-width: 560px;
}
.page-head .note {
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  margin-top: 16px;
}

/* ---------- editorial two-column grid (inner pages) ---------- */
.page-body .wrap {
  padding-top: 64px; padding-bottom: 88px;
  display: flex; flex-direction: column; gap: 56px;
}
.editorial { display: grid; grid-template-columns: 180px 1fr; gap: 48px; }
.editorial > .label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand);
  padding-top: 5px;
}
.editorial > .label--faint { color: var(--ink-4); }

/* about / now prose */
.prose {
  font-family: var(--serif);
  font-size: 18px; line-height: 1.7; color: var(--ink-6);
  max-width: 600px;
  display: flex; flex-direction: column; gap: 22px;
}
.now-entry {
  font-family: var(--serif);
  font-size: 17px; line-height: 1.65; color: var(--ink-6);
  max-width: 580px;
}
.footnote { font-size: 12.5px; color: var(--ink-4); max-width: 580px; }
.footnote a { color: var(--ink-5); }
.footnote a:hover { color: var(--brand-2); }

/* uses — ruled hardware columns */
.ruled-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px;
  max-width: 640px;
}
.ruled-cols ul { list-style: none; display: flex; flex-direction: column; }
.ruled-cols li {
  font-size: 14px; color: var(--ink-6);
  padding: 9px 0; border-bottom: 1px solid var(--ink-2);
}
.ruled-cols li:last-child { border-bottom: none; }

/* uses — software groups */
.groups {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px;
  max-width: 640px;
}
.groups h2 { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.groups ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--ink-6);
}

/* uses — service chips (gbll .chip primitive) */
.chips { display: flex; gap: 10px; flex-wrap: wrap; max-width: 640px; }
.chip {
  display: inline-flex; align-items: center;
  font-size: 13px; line-height: 1;
  color: var(--ink-5);
  background: var(--ink-1);
  border: 1px solid var(--ink-2);
  border-radius: 999px;
  padding: 3px 7px 4px;
  white-space: nowrap;
}
.page-body .chip { background: var(--surface); }

/* ---------- footer (all pages) ---------- */
.site-footer { border-top: 1px solid var(--ink-2); background: var(--surface); }
.site-footer .wrap {
  padding-top: 26px; padding-bottom: 26px;
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
}
.site-footer .wordmark { font-size: 13px; letter-spacing: -.02em; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer nav a { font-size: 12px; color: var(--ink-5); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink-7); }
.site-footer .copyright {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
}

/* ---------- motion (page-load reveal only; one-shot) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  .rise   { animation: rise .5s ease-out both; }
  .rise-2 { animation: rise .5s ease-out .12s both; }
  .rise-3 { animation: rise .5s ease-out .2s both; }
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .site-nav nav { gap: 16px; }

  .hero .wrap {
    grid-template-columns: 1fr; gap: 48px;
    padding-top: 64px; padding-bottom: 56px;
  }
  .hero h1 { font-size: clamp(42px, 12vw, 64px); }
  .census { max-width: 360px; }

  .index-list a {
    grid-template-columns: 32px 1fr 24px; gap: 6px 16px;
    padding: 22px 4px;
  }
  .index-list .num { grid-column: 1; grid-row: 1; }
  .index-list .title { grid-column: 2; grid-row: 1; }
  .index-list .desc { grid-column: 2; grid-row: 2; }
  .index-list .arrow { grid-column: 3; grid-row: 1; }

  .page-head .wrap { padding-top: 48px; padding-bottom: 40px; }
  .page-head h1 { font-size: 36px; }
  .page-body .wrap { padding-top: 48px; padding-bottom: 64px; gap: 44px; }

  /* label stacks above its content */
  .editorial { grid-template-columns: 1fr; gap: 14px; }
  .editorial > .label { padding-top: 0; }

  .ruled-cols { grid-template-columns: 1fr; }
  .ruled-cols ul:first-child li:last-child { border-bottom: 1px solid var(--ink-2); }
  .groups { grid-template-columns: 1fr 1fr; }

  .site-footer .copyright { margin-left: 0; width: 100%; }
}