/* Site-wide contrast + accessibility layer. Loaded after each page's inline
   styles, so it wins ties. From the sol design audit, 2026-08-29. */

/* #767a6d reads 4.21:1 on paper and 3.96:1 on cream — under the 4.5:1 body
   floor. Every page keys its quiet text off this token. */
:root { --muted: #64685e; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #176fae;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ---- design-system synthesis (sol audit + Zach's edits, 2026-08-29) ---- */

/* Radius scale. Pills stay 999. */
:root { --r-nested: 12px; --r-frame: 16px; --r-card: 18px; --r-surface: 20px; }

/* Headers organized around the home page: 20px vertical, 23px wordmark. */
.topbar { padding-top: 20px; padding-bottom: 20px; }
.topbar .wordmark { font-size: 23px; }

/* ALI chameleon: anywhere ALI is named or speaks, the adaptive band.
   Weight and family inherit; only the ink shifts. */
.ali-ink {
  background: linear-gradient(100deg, #1f7fd0, #0f9b8e, #3f9e2f, #2a6f8f, #6f5fc9, #1f7fd0);
  background-size: 320% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ali-band 16s linear infinite;
}
@keyframes ali-band { from { background-position: 0 0; } to { background-position: 320% 0; } }
@media (prefers-reduced-motion: reduce) { .ali-ink { animation: none; } }

/* White vs cream: cream is the resting surface; white is for interactive
   moments — inputs, buttons, hover and open states. */

/* One meaning per colour (Zach, 2026-08-30). Functional UI obeys:
   blue = interaction · juniper = land, dollars earned, and the site itself
   (the wordmark tld) · gold = estimate and funding money · rust = cost and
   warning · the chameleon band = ALI. Drawn work (marks, arrows, step hexes,
   ramp-rules) keeps the whole pen palette.
   Rust and blue as body TEXT use the darkened pair (#a94f27, #176fae). */
.wordmark .tld { color: #475a3c; }

/* ---- the rail: one path, every page ends on it (spec 2026-09-01).
   Lives on the night surface, so the tints are the footer's own. ---- */
.rail { margin: 0; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; row-gap: 6px; }
.rail-eyebrow { grid-column: 1 / -1; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8ea07c; }
.rail ol { grid-column: 1; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* the statement slot: one eyebrow and one line above the rail, where a page
   has something to say before it hands off */
.foot-say { margin: 0 0 clamp(22px, 3vw, 30px); }
.foot-say .eyebrow-n { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8ea07c; }
.foot-say .say { margin: 8px 0 0; max-width: 28ch; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.22; letter-spacing: -0.012em; color: #f3f0e4; }
.rail li { display: flex; align-items: center; gap: 8px; }
.rail li + li::before { content: ""; flex: 0 0 22px; height: 1px; background: rgba(243,240,228,.25); }
.rail li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 19px; letter-spacing: -0.012em; color: #f3f0e4; opacity: .62; text-decoration: none; }
.rail li a:hover { opacity: 1; color: #fff; }
.rail li[aria-current] a { opacity: 1; }
.rail .hexmark { flex: 0 0 26px; width: 26px; height: 28px; display: block; }
.rail-next { grid-column: 2; justify-self: end; display: inline-block; box-sizing: border-box; margin: 0; min-height: 44px; padding: 11px 22px; border-radius: 999px; background: var(--paper, #fbfaf5); color: var(--night, #151a22); font-weight: 600; font-size: 14px; line-height: 22px; text-decoration: none; }
.rail-next:hover { background: #fff; color: var(--night, #151a22); }
/* a narrow column cannot hold the four steps and the button on one line:
   the button drops under the steps, still reading as what comes next */
@container (max-width: 860px) {
  .rail ol { grid-column: 1 / -1; }
  .rail-next { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
}
@media (max-width: 680px) {
  .rail { grid-template-columns: 1fr; }
  .rail ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .rail li + li::before { display: none; }
  .rail li a { font-size: 17px; }
  .rail-next { grid-column: 1; justify-self: stretch; display: block; margin-top: 8px; text-align: center; }
}