/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * macrostructure: Workbench (deviated) · tone: loud utilitarian · anchor hue: chromatic-other (acid-lime 118deg)
 * theme: custom · paper oklch(31% 0.045 178) petrol · accent oklch(90% 0.19 118) acid
 * display: Archivo 800 · body: Archivo 400 · mono: Martian Mono
 * axes: dark paper / grotesk-sans display / chromatic-other accent
 * system: DESIGN.md at project root governs this build; picks defer to it
 *
 * DEVIATION, stated rather than hidden: Workbench specifies small functional headings
 * ("workbench pages don't shout"). This page shouts, because DESIGN.md fixes the tone as
 * loud utilitarian and the operator approved that direction. Content strategy is Workbench,
 * real product captures carrying the argument; display scale is Manifesto.
 *
 * DEVIATION 2: numbered register labels (01..04) are eyebrows, which Hallmark defaults OFF
 * and permits only when genuinely ordinal. These are topical, not sequential. Kept because
 * the numbered register IS the conceit lifted from the harvested reference, and the labels
 * stack above their heading rather than sitting in a left margin, so gate 54 is clear.
 */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Martian Mono';
  src: url('/assets/fonts/MartianMono-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Shared by /privacy and /terms. The home page keeps its CSS inline for LCP. */

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

body {
  margin: 0;
  background: #0E3B3A;
  color: #F3F0E7;
  font-family: 'Archivo', sans-serif;
}

img { display: block; max-width: 100%; height: auto; }

a {
  color: #C6F24E;
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 242, 78, .5);
}

a:hover { border-bottom-color: #C6F24E; }
a:focus-visible { outline: 2px solid #C6F24E; outline-offset: 3px; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: 28px; }

hr { border: 0; border-top: 1px solid rgba(243, 240, 231, .28); margin: 0; width: 100%; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  border: 0;
  color: inherit;
}

.mark { flex: none; }

.wordmark {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: inherit;
}

.home-link {
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243, 240, 231, .75);
  border: 0;
}

.home-link:hover { color: #C6F24E; }

/* The document sits in one narrow column, offset from the left rather than centred,
   so it keeps the same off-axis feel as the home page registers. */
.doc {
  max-width: 1240px;
  margin-inline: auto;
  padding: 52px 28px 96px;
}

.doc-inner { max-width: 68ch; }

.reg-label {
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(243, 240, 231, .72);
  margin: 0 0 22px;
}

h1 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
}

.updated {
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243, 240, 231, .72);
  margin: 20px 0 0;
}

h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 52px 0 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(243, 240, 231, .18);
}

p, li {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(243, 240, 231, .86);
}

p { margin: 0 0 15px; }

ul { padding-left: 20px; margin: 0 0 15px; }

li { margin-bottom: 6px; }

code {
  font-family: 'Martian Mono', monospace;
  font-size: 13px;
  color: #C6F24E;
  word-break: break-all;
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding-block: 30px 44px;
}

.foot-nav { display: flex; gap: 24px; flex-wrap: wrap; }

.foot-nav a {
  color: rgba(243, 240, 231, .75);
  font-size: 14px;
  border-bottom: 1px solid rgba(243, 240, 231, .3);
}

.foot-nav a:hover { color: #C6F24E; border-bottom-color: #C6F24E; }

.meta {
  font-family: 'Martian Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243, 240, 231, .72);
  margin: 0;
  margin-left: auto;
}

@media (max-width: 900px) {
  .meta { margin-left: 0; }
  h2 { margin-top: 40px; }
}