/* ---------------------------------------------------------------------------
   moxlade.com — the umbrella page.

   The subject is a register: a corpus is a book of entries that were written on
   the day they happened and never erased. So the page is ruled like one. The
   horizontal lines and the left field column are the structure, not decoration —
   every row is <field name> | <value>, which is also what comes back on the
   wire. There are no cards, no shadows and no gradients, because a ledger has
   none of those.

   One warm colour exists (--brass) and it marks what is real and callable: a
   figure that came out of a corpus, and the address you can send a question to.
   Everything else lives on the ink/paper axis.

   Dark only, deliberately: this is the operator's side of a product with no UI.
   --------------------------------------------------------------------------- */

/* The Moxlade family, 2026-09-02. JetBrains Mono carries the display and every
   label — the register's numbers and field names were always mono, and this is
   the family's mono. Fraunces takes the serif body role Newsreader held: the
   ask/answer contrast the page is built on is machine voice against human voice,
   and it needs a serif to stay legible.
   buyer.moxlade.com carries the family's third face, Space Grotesk, where its
   design has a grotesque role. Neither site loads a face it never renders. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/jetbrains-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/fraunces-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/fraunces-400-italic.woff2') format('woff2');
}

:root {
  /* Ink, not black. A blue-green cast at this depth reads as depth rather than
     as a switched-off screen, and it keeps the paper tone from going blue. */
  --ink:        #0b1417;
  --ink-raised: #101d21;
  --rule:       #1c3037;
  --rule-soft:  #16262b;
  --paper:      #e8e6e0;
  --muted:      #90a4a9;
  /* The one warm value. It marks what is real and callable: figures that came
     out of a corpus, and the address you can send a question to. Nothing else
     on this page is allowed to be brass. */
  --brass:      #d3a65c;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text: 'Fraunces', Iowan Old Style, Charter, Georgia, serif;

  --shell: 68rem;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  /* The field column. Its width is a constant so every row on the page — the
     exchange, the three claims, the register meta — rules to the same line. */
  --field: 9.5rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  padding: 0.5rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-decoration: none;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- the ruled line ------------------------------------------------------ */
/* Every rule on the page draws itself once on load, left to right, the way a
   register is ruled before it is written in. It is the only motion here. */

@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.bar,
.block,
.entry,
.foot,
.xrow-answer {
  position: relative;
}

.bar::after,
.block::before,
.entry::before,
.foot::before,
.xrow-answer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
  animation: rule-in 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.bar::after   { bottom: 0; }
/* `.block` is also `.shell`, so its border box includes the gutter; without
   this the section rules would run wider than every rule inside them. */
.block::before { inset-inline: var(--gutter); }
.block::before,
.entry::before,
.foot::before,
.xrow-answer::before { top: 0; }

.block::before      { animation-delay: 180ms; }
.entry::before      { animation-delay: 240ms; }
.xrow-answer::before{ animation-delay: 120ms; }
.foot::before       { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .bar::after, .block::before, .entry::before, .foot::before, .xrow-answer::before {
    animation: none;
  }
}

/* --- header -------------------------------------------------------------- */

.bar-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
}
.wordmark .mark { height: 1.25rem; width: auto; display: block; flex: 0 0 auto; }

/* --- hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(4.5rem, 11vw, 8.5rem) clamp(3.5rem, 8vw, 6rem); }

/* The headline is set TO the measure: both clauses are 19 characters, and in a
   monospace at -0.045em each one is 10.55em wide, so the size that exactly fills
   the content column is (column / 10.55). The two `vw` terms are the column at
   the two gutter regimes — 5vw either side above 480px, a flat 24px below it —
   and the 4.25rem term stops it growing once the shell has capped. The result
   never wraps at any width, which is the whole point: two lines, an ask and an
   answer, at every size. Re-derive it if the wording changes length. */
h1 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 300;
  font-size: max(1.35rem, min(8.5vw, 9.4vw - 4.5px, 4.25rem));
  line-height: 1.12;
  letter-spacing: -0.045em;
}
/* The two clauses are an ask and an answer, so the second one starts where every
   answer on this page starts: the value column. The grid says it; no second
   colour is needed to. */
h1 .line { display: block; }
h1 .line-answer { padding-left: var(--field); }

/* The family's one editorial move, used once: an italic serif phrase inside
   roman body copy. It marks the claim the whole page rests on, not a decoration. */
.lede em { font-style: italic; color: var(--paper); }

.lede {
  max-width: 34em;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  color: var(--muted);
}

/* --- the exchange -------------------------------------------------------- */

.exchange {
  margin: clamp(3rem, 7vw, 4.5rem) 0 0;
  border-top: 1px solid var(--rule-soft);
}

.xrow {
  display: grid;
  grid-template-columns: var(--field) minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.5rem;
}
.xrow-answer { padding-bottom: 1.75rem; }

.field {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.9;
  color: var(--muted);
  /* 0.75 lands this 12px label at exactly 4.50:1 on the ink — the AA floor to
     three decimal places. 0.85 buys the margin back. */
  opacity: 0.85;
}

.prose-ask {
  margin: 0;
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  line-height: 1.4;
  max-width: 24em;
}

/* The answer is set as what it is: field names and figures, aligned on a
   column, tabular so the digits line up the way they would in a ledger. */
.record { margin: 0; }
.record > div {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.3rem;
}
.record dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}
.record dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.record dd b {
  font-weight: 500;
  color: var(--brass);
}

/* --- generic section ----------------------------------------------------- */

.block { padding-block: clamp(3.5rem, 8vw, 6rem); }

h2 {
  margin: 0 0 2.5rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  letter-spacing: -0.03em;
}

.sub {
  margin: -1.9rem 0 2.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.rows { border-top: 1px solid var(--rule-soft); }

.row {
  display: grid;
  grid-template-columns: var(--field) minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--rule-soft);
}
.row p {
  margin: 0;
  max-width: 44em;
  color: var(--muted);
}

/* --- the register -------------------------------------------------------- */
/* The blank lines are the point: the book is open and mostly unwritten. They
   are ruled and numbered like the filled one, and carry nothing else. */

.register {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--rule-soft);
}

.entry {
  display: grid;
  grid-template-columns: var(--field) minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 2.25rem;
}
.entry::before { background: var(--rule-soft); }
.entry:first-child::before { background: var(--rule); }

.no {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.entry-blank {
  padding-block: 1.5rem;
}
.entry-blank .no { opacity: 0.5; }

.entry-body h3 {
  margin: 0 0 0.75rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
}
.entry-body h3 a {
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
  transition: color 160ms;
}
.entry-body h3 a:hover { color: var(--brass); }

.entry-body > p {
  margin: 0;
  max-width: 42em;
  color: var(--muted);
}

.meta { margin: 1.5rem 0 0; }
.meta > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.22rem;
}
.meta dt,
.meta dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.meta dt { color: var(--muted); opacity: 0.85; }
.meta dd { color: var(--paper); font-variant-numeric: tabular-nums; }
.meta code,
.meta dd b {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  color: var(--brass);
}

.note {
  margin: 2rem 0 0;
  max-width: 34em;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --- footer -------------------------------------------------------------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2rem 1.25rem;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.foot-links a {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 160ms, border-color 160ms;
}
.foot-links a:hover { color: var(--paper); border-bottom-color: var(--brass); }

.foot-legal {
  margin: 0;
  padding-bottom: 3.5rem;
  max-width: 42em;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
  opacity: 0.8;
}

/* --- narrow -------------------------------------------------------------- */
/* The field column stops being a column and becomes a line above its value.
   Everything stays left-aligned; the register still reads as a register. */

@media (max-width: 44rem) {
  :root { --field: 0; }

  .xrow,
  .row,
  .entry,
  .record > div,
  .meta > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .record > div,
  .meta > div { gap: 0.15rem; padding-block: 0.45rem; }

  .field, .no { line-height: 1.4; }

  .entry-blank { padding-block: 1.25rem; }

  /* --field is 0 here, so the headline's answer line falls back into the column
     with everything else. */
}

/* --- the legal pages ----------------------------------------------------- */
/* Same ink, same two faces, but these are documents rather than a page: one
   column at a reading measure, the serif doing the work, and no register
   furniture — nothing here is a field and a value. */

.legal { padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem); }

.legal h1 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 300;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: -0.04em;
}

.legal .updated {
  margin: 0.75rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.85;
}

.legal-lede {
  max-width: 34em;
  margin: 2rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--paper);
}

.legal h2 {
  margin: 2.75rem 0 0.75rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.legal p,
.legal li {
  max-width: 34em;
  color: var(--muted);
}
.legal p { margin: 0 0 0.9rem; }

.legal ul {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
}
.legal li { margin-bottom: 0.55rem; }
.legal li::marker { color: var(--rule); }

.legal strong { color: var(--paper); font-weight: 500; }

.legal code {
  font-family: var(--mono);
  font-size: 0.875em;
  color: var(--paper);
}

.legal a { color: var(--paper); text-decoration-color: var(--brass); }

/* The wordmark is a link on every page but the home page; it must not look
   like body copy that happens to be clickable. */
a.wordmark { text-decoration: none; }