/* Capital AI site CSS.
   Reads tokens from vendor/design-system/structure.css + theme-capital-ai.css.
   Declares no raw hex of its own: every color here is a token, so the identity
   cannot drift away from the locked brand.md. */

/* ---------- reset-ish, on top of structure.css's box-sizing ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ca-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ca-link-hover); }

/* Focus is part of the brand, not an afterthought: the audience explicitly
   includes people who are not confident here. Never remove the ring. */
:focus-visible {
  outline: 3px solid var(--ca-signal);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--ca-on-band);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display); font-weight: 500;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); z-index: 100; }

/* ---------- the grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  max-width: var(--grid-max);
  margin: 0 auto;
  padding-inline: var(--grid-margin);
}
.wrap { max-width: var(--grid-max); margin: 0 auto; padding-inline: var(--grid-margin); }

/* ---------- type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--text-lg), 3.4vw, var(--text-3xl));
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
.label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin: 0;
}
.body { max-width: var(--measure); margin: 0; }
.body + .body { margin-top: var(--space-3); }
.lede { font-size: var(--text-md); max-width: var(--measure); margin: 0; }
.meta { font-size: var(--text-xs); color: var(--muted); margin: 0; }

/* ---------- masthead: charcoal band, paper mark, orange lower rule ---------- */
.masthead { background: var(--ca-band); border-bottom: 4px solid var(--ca-signal); }
.masthead__inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--grid-max); margin: 0 auto;
  padding: var(--space-3) var(--grid-margin);
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__capital { font-weight: 500; color: var(--ca-on-band); }
/* the tighter-than-standard space between the two words, per brand.md */
/* The wordmark keeps true Signal Orange (3.33:1 on the band). WCAG 1.4.3
   exempts text that is part of a logo or brand name from the contrast
   minimum, and brand.md defines the two-color mark as the identity. This is
   the ONE orange-on-band text in the site, and it is a logotype. Every other
   label on the band uses --ca-signal-on-band. */
.wordmark__ai { font-weight: 600; color: var(--ca-signal); margin-left: 0.2em; }
.masthead .wordmark:hover .wordmark__capital { color: var(--ca-on-band); }

.masthead__nav { display: flex; gap: var(--space-4); align-items: baseline; }
.masthead__nav a {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ca-on-band); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: border-color var(--motion-fast) var(--motion-ease);
}
/* the connector rule completing on hover/focus, per brand.md motion */
.masthead__nav a:hover,
.masthead__nav a:focus-visible { border-bottom-color: var(--ca-signal); }
.masthead__nav a[aria-current="page"] { border-bottom-color: var(--ca-signal); }

/* ---------- hero ---------- */
.hero { padding-block: var(--space-8) var(--space-7); }
.hero__meta { grid-column: 1 / span 2; }
.hero__meta .label + .label { margin-top: var(--space-2); }
.hero__index {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); color: var(--ca-signal);
  line-height: 1;
}
.hero__statement { grid-column: 3 / span 8; }
/* THE ONE deliberate grid break: the statement overruns its column edge.
   It never changes reading order and never causes horizontal scroll, which
   is why it is clamped in vw and the body has overflow-x guarded below. */
.hero__statement .display {
  /* Dialled back from clamp(44px, 9.2vw, --text-5xl/144px) on Shannon's note
     that the hero read too large. Still a poster statement, still the one
     grid break, just no longer shouting. */
  font-size: clamp(40px, 6.6vw, var(--text-4xl));
  margin-left: -0.06em;
}
.hero__next { grid-column: 11 / span 2; align-self: end; }
.hero__next .label { color: var(--muted); }
.hero__next-line {
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
}

/* ---------- generic section ---------- */
.section { padding-block: var(--space-7); border-top: 1px solid var(--hair); }
.section__head { grid-column: 1 / span 3; }
.section__body { grid-column: 5 / span 7; }

/* ---------- the promise line ---------- */
.promise { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); padding: 0; list-style: none; }
.promise li {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-md); text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  border-bottom: 4px solid var(--ca-signal);
  padding-bottom: 2px;
}

/* ---------- program fields ---------- */
.programs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gutter); }
.program { padding: var(--space-4); border: 2px solid var(--ink); }
/* maturity is expressed by SPACE, not only by a word: Builders is wider */
.program--builders { grid-column: span 6; background: var(--ca-builders); color: var(--ca-on-builders); }
.program--community { grid-column: span 3; background: var(--bg); color: var(--ink); }
.program--business { grid-column: span 3; background: var(--ca-business); color: var(--ca-on-business); }
.program--community { border-color: var(--ink); }
/* Orange is a FIELD here, never behind small text: Community uses a thick
   orange marker rule instead of an orange background under body copy. */
.program--community { border-top: 12px solid var(--ca-signal); }

.program__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); line-height: 1; display: block;
}
.program--builders .program__n { font-size: var(--text-3xl); }
.program__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-md); letter-spacing: var(--tracking-label);
  text-transform: uppercase; display: block; margin-top: var(--space-2);
}
.program__state {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; display: inline-block;
  margin-top: var(--space-2); padding: 2px 6px; border: 1.5px solid currentColor;
}
.program__line { margin-top: var(--space-3); font-weight: 500; }
.program__body { margin-top: var(--space-2); font-size: var(--text-sm); }
.program--business a { color: var(--ca-on-business); }

/* ---------- event information matrix ---------- */
.event { border-top: 4px solid var(--ink); padding-top: var(--space-4); }
.event__id {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted);
}
.event__id b { color: var(--ca-signal-ink); font-weight: 600; }
.event__title { margin-top: var(--space-2); font-size: clamp(32px, 5.6vw, var(--text-3xl)); }

.matrix { margin: var(--space-5) 0 0; display: grid; gap: 0; }
.matrix__row {
  display: grid; grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--grid-gutter);
  padding-block: var(--space-3);
  border-top: 1px solid var(--hair);
  align-items: baseline;
}
.matrix__row:last-child { border-bottom: 1px solid var(--hair); }
.matrix__key {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted);
}
.matrix__val { font-size: var(--text-md); }
.matrix__val small { display: block; font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }

/* ---------- buttons ---------- */
/* Primary is Charcoal with Paper text at 10.49:1. NEVER orange with small
   text: Signal Orange is 3.15:1 and would fail AA. This is brand.md law. */
.btn {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-base); letter-spacing: var(--tracking-label);
  text-transform: uppercase; text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--ink);
  background: var(--ink); color: var(--ca-on-band);
  border-radius: var(--radius-sm);
  transition: background var(--motion-base) var(--motion-ease),
              color var(--motion-base) var(--motion-ease);
}
.btn:hover, .btn:focus-visible { background: var(--bg); color: var(--ink); }
.btn--disabled {
  background: var(--bg); color: var(--muted); border-color: var(--hair);
  cursor: not-allowed;
}

/* ---------- footer ---------- */
.footer { background: var(--ca-band); color: var(--ca-on-band); margin-top: var(--space-8); border-top: 4px solid var(--ca-signal); }
.footer__inner { padding-block: var(--space-6); }
.footer a { color: var(--ca-on-band); }
.footer .meta { color: var(--ca-on-band-soft); }
.footer__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gutter); }
.footer__col { grid-column: span 4; }
.footer__col .label { color: var(--ca-signal-on-band); }  /* NOT --ca-signal: 3.33:1 fails AA at this size */
.footer__col p { margin: var(--space-2) 0 0; font-size: var(--text-sm); }

/* ---------- tablet: 8 columns ---------- */
@media (max-width: 1024px) {
  .grid, .programs, .footer__cols { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .hero__meta { grid-column: 1 / span 2; }
  .hero__statement { grid-column: 3 / span 6; }
  .hero__next { grid-column: 1 / span 8; margin-top: var(--space-5); }
  .section__head { grid-column: 1 / span 8; }
  .section__body { grid-column: 1 / span 8; margin-top: var(--space-4); }
  .program--builders { grid-column: span 8; }
  .program--community, .program--business { grid-column: span 4; }
  .footer__col { grid-column: span 4; }
}

/* ---------- mobile: 4 columns ---------- */
@media (max-width: 700px) {
  .grid, .programs, .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero { padding-block: var(--space-6) var(--space-5); }
  .hero__meta, .hero__statement, .hero__next,
  .section__head, .section__body,
  .program, .footer__col { grid-column: 1 / -1; }
  .hero__statement .display { font-size: clamp(34px, 9.5vw, 56px); margin-left: 0; }
  .hero__next { margin-top: var(--space-4); }
  .matrix__row { grid-template-columns: 1fr; gap: var(--space-1); }
  .masthead__inner { gap: var(--space-2); }
  .programs { gap: var(--space-3); }
  .promise li { font-size: var(--text-base); }
}

/* No composition may ever scroll sideways. brand.md makes this a rule of the
   grid break, so it is enforced here rather than trusted. */
html, body { overflow-x: hidden; }

/* ---------- reduced motion: really stop, do not merely shorten ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- email signup ---------- */
.signup { background: var(--ca-band); color: var(--ca-on-band); border-top: 4px solid var(--ca-signal); }
.signup__inner { padding-block: var(--space-7); }
.signup__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--grid-gutter); align-items: start; }
.signup__head { grid-column: 1 / span 5; }
.signup__head .h2 { color: var(--ca-on-band); }
.signup__head p { margin: var(--space-3) 0 0; max-width: 42ch; }
.signup__form-col { grid-column: 7 / span 6; }

.signup form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.signup label {
  display: block; width: 100%;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ca-signal-on-band);
  margin-bottom: var(--space-2);
}
.signup input[type="email"] {
  flex: 1 1 240px; min-width: 0;
  font-family: var(--font-sans); font-size: var(--text-base);
  padding: var(--space-3);
  border: 2px solid var(--ca-on-band);
  border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
}
.signup input[type="email"]::placeholder { color: var(--muted); }
.signup .btn {
  /* Was Signal Orange with Charcoal text. That measured 3.33:1, and the comment
     here used to claim 19px/600 cleared WCAG's large-text threshold. It does
     not: large-text needs 18.66px BOLD, and 600 is semibold, so the button was
     sitting under the floor on a technicality I had talked myself into.
     brand.md settles it anyway ("Primary buttons should normally use Capital
     Charcoal with Workshop Paper text rather than Orange with small text"), so
     on the charcoal band the primary action inverts: Paper field, Charcoal
     text, 10.49:1. Orange stays on the label above it, where it is legal. */
  background: var(--bg); color: var(--ink);
  border-color: var(--bg);
  font-size: var(--text-md);
}
.signup .btn:hover, .signup .btn:focus-visible {
  background: var(--ca-band); color: var(--ca-on-band); border-color: var(--bg);
}
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup__status { width: 100%; margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--ca-on-band-soft); }
.signup__status--error { color: var(--ca-signal-on-band); }
.signup__done { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ca-on-band); }
.signup__fine { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--ca-on-band-soft); max-width: 46ch; }

@media (max-width: 1024px) {
  .signup__grid { grid-template-columns: repeat(8, minmax(0,1fr)); }
  .signup__head { grid-column: 1 / span 8; }
  .signup__form-col { grid-column: 1 / span 8; margin-top: var(--space-4); }
}
@media (max-width: 700px) {
  .signup__grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .signup__head, .signup__form-col { grid-column: 1 / -1; }
  .signup input[type="email"] { flex: 1 1 100%; }
  .signup .btn { width: 100%; text-align: center; }
}

/* The footer was removed 2026-09-01 (Shannon). The .footer rules above are kept
   rather than deleted in case one returns, but nothing renders them today, and
   the rule that used to join the signup band to the footer is gone with it. */