/* chainman.dev — no imports, fonts, scripts, or generated styles. */
:root {
  color-scheme: dark;
  --canvas: #111410;
  --surface: #191e16;
  --text: #c6ccbf;
  --strong: #f0f0e7;
  --muted: #a1aa98;
  --accent: #b5d69a;
  --rule: #353d2e;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-family: var(--mono);
  background: var(--canvas);
  color: var(--text);
  font-synthesis: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
::selection { color: var(--canvas); background: var(--accent); }
svg { flex: none; vertical-align: middle; }
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:hover { color: var(--strong); text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
  border-radius: 1px;
}
p, h1, h2 { margin: 0; }
p + p { margin-block-start: 1rem; }
h1, h2, strong { color: var(--strong); }
strong { font-weight: 700; }
code { font-family: inherit; font-size: 1em; color: var(--strong); }
/* Keep short commands together when possible, but never force a wide line. */
p code { display: inline-block; max-width: 100%; white-space: normal; }

/* The reading measure scales with text; fixed CSS-pixel gutters do not
   consume more reading space when the user enlarges only the text. */
.page {
  width: min(100% - 48px, 46rem);
  margin-inline: auto;
}
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2.5rem 1.625rem;
  border-block-end: 1px solid var(--rule);
}
.brand {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  color: var(--strong);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1;
}
.brand-mark { color: var(--accent); width: 2.25rem; height: 2.25rem; }
.alpha-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  font-size: .75rem;
  line-height: 1.3;
  text-align: end;
}
.alpha-link::before {
  content: "";
  width: .375rem;
  height: .375rem;
  border: 1px solid currentColor;
  flex: none;
}
.skip-link {
  position: absolute;
  z-index: 1;
  inset-block-start: .75rem;
  inset-inline-start: 16px;
  max-width: calc(100% - 32px);
  padding: .5rem min(1rem, 16px);
  color: var(--canvas);
  background: var(--accent);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--canvas); }
main { outline: none; }
.hero { padding-block: 2.375rem 1.75rem; }
h1 {
  max-width: 24ch;
  margin-block-end: 1.375rem;
  font-size: clamp(1.6875rem, 1.2rem + 1.6vw, 2.375rem);
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -.055em;
  text-wrap: balance;
}
h1 code { color: var(--accent); }
.lede { max-width: 74ch; }

/* A static notice, not an ARIA live alert. Its position is intentional. */
.alpha-notice {
  padding: 1.125rem min(1.25rem, 20px);
  border-inline-start: 2px solid var(--accent);
  background: var(--surface);
  scroll-margin-block-start: 1.5rem;
}
.alpha-notice h2 {
  margin-block-end: .4rem;
  font-size: .9375rem;
  line-height: 1.5;
}
.alpha-notice p { font-size: .875rem; line-height: 1.75; }
.section { margin-block-start: 2rem; }
.section h2 {
  /* Allow the flex text item to reflow at narrow widths and enlarged text. */
  overflow-wrap: anywhere;
  display: flex;
  align-items: baseline;
  gap: .625rem;
  margin-block-end: .75rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -.025em;
}
.section-marker { flex: none; color: var(--accent); }
.alpha-notice:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.usage {
  margin-block-start: 1.875rem;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.75;
}
.action { margin-block: 1.375rem 2.25rem; }
.action-link {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  /* Preserve room for the label when icons and text are enlarged. */
  gap: min(.625rem, 10px);
  min-height: 2.75rem;
  padding-block: .25rem;
  font-size: .9375rem;
  font-weight: 700;
}
.action-link svg { width: 1.125rem; height: 1.125rem; }
.action-link .arrow { margin-inline-start: min(.375rem, 6px); }
.action-note {
  margin-block-start: .25rem;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.6;
}
.footer {
  padding-block: 1.25rem 2rem;
  border-block-start: 1px solid var(--rule);
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.75;
}
.footer a { display: inline-block; padding-block: .375rem; color: inherit; }
.footer a:hover { color: var(--strong); }

@media (max-width: 30rem) {
  .page { width: calc(100% - 32px); }
  .masthead { padding-block: 1.375rem 1rem; }
  .brand { font-size: 1.5rem; }
  .brand-mark { width: 2rem; height: 2rem; }
  .hero { padding-block: 1.75rem 1.5rem; }
  .alpha-notice { padding: 1rem min(1rem, 16px); }
  .section { margin-block-start: 1.75rem; }
}

/* Let user-selected high-contrast colors remain authoritative. */
@media (forced-colors: active) {
  .alpha-notice { border: 1px solid CanvasText; border-inline-start-width: 3px; }
  a:focus-visible { outline-color: Highlight; }
  .brand-mark, .section-marker { color: CanvasText; }
}

/* No transitions or animations are used, including for anchor navigation. */
@media print {
  :root {
    color-scheme: light;
    --canvas: #fff;
    --surface: #fff;
    --text: #202020;
    --strong: #000;
    --muted: #404040;
    --accent: #1f4228;
    --rule: #aaa;
  }
  body { font-size: 9.5pt; line-height: 1.5; }
  .page { width: 100%; }
  .masthead { padding-block: 0 .75rem; }
  .alpha-link, .skip-link { display: none; }
  .hero { padding-block: 1rem; }
  h1 { font-size: 21pt; max-width: 34ch; margin-block-end: .75rem; }
  .alpha-notice { padding: .625rem .875rem; }
  .alpha-notice p, .usage { font-size: 9pt; }
  .section { margin-block-start: 1rem; }
  .section h2 { margin-block-end: .375rem; font-size: 10pt; }
  .action { margin-block: .75rem; }
  .repository-link::after { content: " (github.com/chainmandev/chainman)"; font-size: 8pt; font-weight: 400; }
  .action-link .arrow { display: none; }
  .footer { padding-block: .75rem 0; }
  h1, h2 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  .alpha-notice, .action, .footer { break-inside: avoid; }
  @page { margin: 14mm; }
}