/* reach-x.com/assets/css/reachx.css
 *
 * The Register: institutional, documentary, deliberately unexciting. The site
 * exists to survive a credibility check, and a polished marketing aesthetic
 * would read as marketing, which is the impression being removed.
 */

:root {
  --ink: #16202e;
  --ink-soft: #4a5666;
  --paper: #faf8f4;
  --paper-raised: #ffffff;
  --rule: #d8d2c7;
  --accent: #1f4e79;
  --accent-soft: #eaf0f6;
  --measure: 68ch;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8e6e1;
    --ink-soft: #a3aab6;
    --paper: #12161c;
    --paper-raised: #191f27;
    --rule: #2f3742;
    --accent: #8ab4dd;
    --accent-soft: #1b2530;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin-top: 2.6rem; }
h3 { font-size: 1.1rem; margin-top: 1.8rem; }

/* A numbered label introduces the heading beneath it, so the heading must not
 * carry its usual section gap or the pair reads as two unrelated elements. */
.label + h1, .label + h2, .label + h3 { margin-top: 0; }

p { margin: 0 0 1.1rem; max-width: var(--measure); }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration: none; }

/* Numbered section markers, in mono. Ties the parent typographically to
 * NexGuard, which uses the same device. */
.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 2vw, 1.3rem);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3rem;
}

.brandmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.topbar nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.topbar nav a {
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--accent); }

/* The portfolio register. A table, because a table is what a register is, and
 * because it invites verification rather than admiration. */
.register { width: 100%; border-collapse: collapse; margin: 1.5rem 0 0; font-size: 0.95rem; }
.register caption { text-align: left; color: var(--ink-soft); font-size: 0.85rem; padding-bottom: 0.6rem; }
.register th, .register td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.register th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.register td:first-child { font-family: var(--serif); font-weight: 600; white-space: nowrap; }
.register a { font-family: var(--mono); font-size: 0.85rem; }

.table-scroll { overflow-x: auto; }

/* Entity facts. Mono, because these are data, not prose. */
.entity {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.85;
  color: var(--ink-soft);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
}
.entity strong { color: var(--ink); font-weight: 600; }

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.15rem 0.5rem;
  margin-left: 0.5rem;
}

.entry { padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.entry:last-of-type { border-bottom: 0; }
.entry h2 { margin-top: 0; }
.entry .provides {
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  margin-top: 0.9rem;
}

.field { margin-bottom: 1.1rem; max-width: 34rem; }
.field label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.3rem; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.6rem 0.7rem;
}
.field textarea { min-height: 8rem; resize: vertical; }

.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.95rem;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { opacity: 0.9; }

.sitefoot {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.sitefoot p { margin-bottom: 0.5rem; max-width: none; }
.sitefoot .entity { background: none; border-left: 0; padding: 0; margin: 0 0 1rem; }
.sitefoot nav { display: flex; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .register td:first-child { white-space: normal; }
}