/* ============================================================
   The GRC Table
   ------------------------------------------------------------
   Design notes for whoever picks this up (including Claude Code):

   The one signature device is .table-rule — a horizontal rule
   with two short legs, so every section divider is literally a
   table. It comes from the logo, where the rule under "GRC" is
   the tabletop. Keep it. It is the only ornament on the page
   and everything else stays deliberately quiet so it reads.

   Palette is ink + a single deep navy, warmed slightly with a
   bone background rather than pure white. No gradients, no
   glass, no shadows beyond one hairline.
   ============================================================ */

:root {
  /* color */
  --ink:        #14171C;   /* body text, near-black with a cool cast */
  --ink-soft:   #5A6070;   /* secondary text */
  --navy:       #1F3864;   /* the brand blue, from the logo */
  --navy-deep:  #152845;   /* hovers, footer */
  --bone:       #FBFAF7;   /* page background, warmer than white */
  --bone-sink:  #F2F0EA;   /* card + recessed surfaces */
  --hair:       #DFDCD3;   /* hairline borders */

  /* type */
  --display: "Fraunces", Georgia, serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;

  /* scale */
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);

  /* space */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --stack:  clamp(3.5rem, 9vw, 7rem);
  --measure: 34rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; }
a { color: inherit; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--bone);
  padding: 0.6rem 1rem; z-index: 20;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem var(--gutter);
  max-width: 78rem; margin: 0 auto;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
}
.brand-mark { width: 30px; height: 26px; fill: var(--navy); }
.brand-name {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.site-nav { display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 2rem); }
.site-nav a {
  text-decoration: none;
  font-size: var(--step--1);
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--ink); }
.nav-cta {
  color: var(--navy) !important;
  border-bottom: 1.5px solid var(--navy);
  padding-bottom: 1px;
}

/* ---------- hero ---------- */
.hero {
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(3rem, 10vw, 7rem) var(--gutter) clamp(3rem, 8vw, 5.5rem);
}
.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}
.hero h1 {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 500;
  max-width: 20ch;
}
.hero h1 em {
  font-style: italic;
  color: var(--navy);
}
.lede {
  margin-top: 1.8rem;
  max-width: var(--measure);
  font-size: var(--step-1);
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.5;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: 2.2rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.72rem 1.35rem;
  background: var(--navy);
  color: var(--bone);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 2px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--navy-deep); transform: translateY(-1px); }
.btn-quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.btn-quiet:hover { background: var(--bone-sink); }

/* ============================================================
   SIGNATURE: the table rule.
   A divider with legs. This is the page's one ornament.
   ============================================================ */
.table-rule {
  position: relative;
  border: 0;
  height: 5px;
  width: min(78rem - (2 * 1rem), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  background: var(--navy);
  border-radius: 2.5px;
  opacity: 0.9;
}
.table-rule::before,
.table-rule::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 5px;
  height: 22px;
  background: var(--navy);
  border-radius: 0 0 2.5px 2.5px;
}
.table-rule::before { left: 7%; }
.table-rule::after  { right: 7%; }

/* ---------- sections ---------- */
.section {
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--stack) var(--gutter);
}
.section-narrow { max-width: 52rem; }
.section-title {
  font-family: var(--display);
  font-size: var(--step-2);
  margin-bottom: 1.8rem;
}
.body-lg {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---------- cards ---------- */
.cards {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.card {
  background: var(--bone);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.card h3 {
  font-family: var(--display);
  font-size: var(--step-1);
  margin-bottom: 0.7rem;
}
.card p {
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}

/* ---------- join ---------- */
.join { padding-bottom: clamp(4rem, 10vw, 8rem); }

/* ---------- footer ---------- */
.site-foot {
  background: var(--navy);
  color: var(--bone);
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) var(--gutter);
}
.foot-mark {
  width: 46px; height: 40px;
  fill: var(--bone);
  margin: 0 auto 1rem;
  opacity: 0.95;
}
.foot-name {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  margin-bottom: 1.4rem;
}
.foot-links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.8rem;
}
.foot-links a {
  color: var(--bone);
  text-decoration: none;
  font-size: var(--step--1);
  opacity: 0.8;
  border-bottom: 1px solid transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.foot-links a:hover { opacity: 1; border-bottom-color: currentColor; }
.foot-fine {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0;
}

/* ---------- motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}